扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Three.Js实现看房自由小项目
  • 298

0
分享到

Three.Js实现看房自由小项目

three.js看房three.js全景看房three.js看房自由 2022-11-13 18:11:01 298人浏览 独家记忆
摘要

目录一、前言二、基础知识三、场景3.1 网络模型3.2 光照3.2.1 环境光3.2.2 平行光3.2.3 点光源3.2.4 聚光灯3.2.5 半球光四、相机4.1 正交相机4.2

一、前言

概述：基于webGL的三维引擎，目前是国内资料最多、使用最广泛的三维引擎，可以制作一些3D可视化项目

目前随着元宇宙概念的爆火，THREE技术已经深入到了物联网、VR、游戏、数据可视化等多个平台，今天我们主要基于THREE实现一个三维的VR看房小项目

二、基础知识

Three.js一般分为三个部分：场景、相机、渲染器，这三个主要的分支就构成了THREE.JS的主要功能区，这三大部分还有许多细小的分支，这些留到我们后续抽出一些章节专门讲解一下。

工作流程：场景——相机——渲染器

从实际生活中拍照角度立方体网格模型和光照组成了一个虚拟的三维场景,相机对象就像你生活中使用的相机一样可以拍照，只不过一个是拍摄真实的景物，一个是拍摄虚拟的景物。拍摄一个物体的时候相机的位置和角度需要设置，虚拟的相机还需要设置投影方式，当你创建好一个三维场景，相机也设置好，就差一个动作“咔”，通过渲染器就可以执行拍照动作。

三、场景

概述：场景主要由网络模型与光照组成，网络模型分为几何体与材质

3.1 网络模型

几何体就像我们小时候学我们就知道点线面体四种概念，点动成线，线动成面，面动成体，而材质就像是是几何体上面的涂鸦，有不同的颜色、图案…

例子如下：

//打造酷炫三角形
for (let i = 0; i < 50; i++) { 
    const geometry = new THREE.BufferGeometry();
    const arr = new Float32Array(9);
    for (let j = 0; j < 9; j++) { 
        arr[j] = Math.random() * 5;
    }
    geometry.setAttribute('position', new THREE.BufferAttribute(arr, 3));
    let randomColor = new THREE.Color(Math.random(), Math.random(), Math.random());
    const material = new THREE.MeshBasicMaterial({
        color: randomColor,
        transparent: true,
        opacity:0.5,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}


const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshStandardMaterial({ color: 0x0000ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);


const geometry = new THREE.ConeGeometry(5, 15, 32);//底面半径 高 侧边三角分段
const material = new THREE.MeshStandardMaterial({ color: 0x0000ff });
const clone = new THREE.Mesh(geometry, material);
scene.add(clone);

3.2 光照

3.2.1 环境光

概念：光照对three.js的物体全表面进行光照测试，有可能会发生光照融合

//环境光
const ambient = new THREE.AmbientLight(0x404040);
scene.add(ambient);

3.2.2 平行光

概念：向特定方向发射的光，太阳光也视作平行的一种，和上面比较，物体变亮了

//平行光  颜色 强度
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(100, 100, 100);//光源位置
directionalLight.target = cube;//光源目标 默认 0 0 0
scene.add(directionalLight);

3.2.3 点光源

概念：由中间向四周发射光、强度比平行光小

// 颜色 强度 距离 衰退量（默认1）
const pointLight = new THREE.PointLight(0xff0000, 1, 100, 1);
pointLight.position.set(50, 50, 50);
scene.add(pointLight);

3.2.4 聚光灯

概念：家里面的节能灯泡，强度较好

//聚光灯
const spotLigth = new THREE.PointLight(0xffffff);
spotLigth.position.set(50, 50, 50);
spotLigth.target = cube;
spotLigth.angle = Math.PI / 6;
scene.add(spotLigth);

3.2.5 半球光

概念：光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色

//半球光
const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);//天空 场景 
scene.add(light);

四、相机

4.1 正交相机

参数(属性)含义
left渲染空间的左边界
right渲染空间的右边界
top渲染空间的上边界
bottom渲染空间的下边界
nearnear属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 默认值0.1
farfar属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。 默认值1000
let width = window.innerWidth;
let height = window.innerHeight;
const camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 1000);
scene.add(camera);
camera.position.set(100, 200, 100);

4.2 透视相机

参数含义默认值
fovfov表示视场，所谓视场就是能够看到的角度范围，人的眼睛大约能够看到180度的视场，视角大小设置要根据具体应用，一般游戏会设置60~90度45
aspectaspect表示渲染窗口的长宽比，如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比window.innerWidth/window.innerHeight
nearnear属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。0.1
farfar属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小，会有部分场景看不到1000
let width = window.innerWidth;
let height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(150, 100, 300);
camera.lookAt(scene.position);

五、渲染器

概述：从WEBGL的角度来看，three就是对它的进一步封装，想要进一步了解渲染器这方面的知识点还需要了解一下WEBGL，这里我们就不做过多介绍了。

六、贴图纹理

6.1 基础介绍

概述：这部分对于我们是否能够给别人呈现一个真实的渲染场景来说，很重要，比如下面一个普普通通的正方体，我们只要一加上贴图，立马不一样了。

以前

之后

6.2 环境贴图

概述：目前有许许多多的贴图，比如基础、透明、环境、法线、金属、粗糙、置换等等，今天我们呢主要讲解一下环境和一点 HDR处理

在THREE的世界里面，坐标抽x、y、z的位置关系图如下所示：

2

红、绿、蓝分别代表x、z、y，我们的贴图就是在px nx py ny pz nz这六个方向防止一张图片，其中p就代表坐标轴的正方向

CubeTextureLoader：加载CubeTexture的一个类。 内部使用ImageLoader来加载文件。

//场景贴图
const sphereTexture = new THREE.CubeTextureLoader().setPath('./textures/course/environmentMaps/0/');
const envTexture= sphereTexture.load([
    'px.jpg',
    'nx.jpg',
    'py.jpg',
    'ny.jpg',
    'pz.jpg',
    'nz.jpg'
]);
//场景添加背景
scene.background = envTexture;
//场景的物体添加环境贴图（无默认情况使用）
scene.environment = envTexture;

const sphereGeometry = new THREE.SphereGeometry(5, 30, 30);
const sphereMaterial = new THREE.MeshStandardMaterial({
    roughness: 0,//设置粗糙程度
    metalness: 1,//金属度
    envMap:envTexture,

});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

gif图片有点大上传不了，我就截了几张图

请添加图片描述

请添加图片描述

6.3 HDR处理

概述：高动态范围图像，相比普通的图像，能够提供更多的动态范围和图像细节，一般被运用于电视显示产品以及图片视频拍摄制作当中。

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader;
const rgbeLoader = new RGBELoader().setPath('./textures/course/hdr/');
//异步加载
rgbeLoader.loadAsync('002.hdr').then((texture) => {

    //设置加载方式 等距圆柱投影的环境贴图
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
 })

七、拓展

7.1 坐标系

概述：坐标轴能够更好的反馈物体的位置信息，红、绿、蓝分别代表x、z、y

const axesHelper = new THREE.AxesHelper(20);//里面的数字代表坐标抽长度
scene.add(axesHelper);

7.2 控制器

概述：通过鼠标控制物体和相机的移动、旋转、缩放

导包

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

应用

const controls = new OrbitControls(camera, renderer.domElement)

自旋转

controls.autoRotate = true

必须在render函数调用update实时更新才奏效

7.3 自适应

概述：根据屏幕大小自适应场景

//自适应屏幕
window.addEventListener('resize', () => { 
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setPixelRatio(window.devicePixelRatio)
})

设置相机的宽高比、重新更新渲染相机、渲染器的渲染大小、设备的像素比

7.4 全屏响应

概述：双击进入全屏，再次双击/ESC退出全屏

window.addEventListener('dblclick', () => { 
    let isFullScreen = document.fullscreenElement
    if (!isFullScreen) {
        renderer.domElement.requestFullscreen()
    }
    else { 
        document.exitFullscreen()
    }
})

7.5 信息面板

概述；通过操作面板完成界面的移动物体的相关应用

链接：https://www.npmjs.com/package/dat.gui

//安装npm
npm install --save dat.gui
//如果出现...标记错误，安装到开发依赖就可以了
npm i --save-dev @types/dat.gui

1

//界面操作
const gui = new dat.GUI();

//操作物体位置
gui
    .add(cube.position, 'x')
    .min(0)
    .max(10)
    .step(0.1)
    .name('X轴移动')
    .onChange((value) => {
        console.log('修改的值为' + value);
    })
    .onFinishChange((value) => {
        console.log('完全停止' + value);
    });
//操作物体颜色
const colors = {
    color: '#0000ff',
};
gui
    .addColor(colors, 'color')
    .onChange((value) => {
        //修改物体颜色
        cube.material.color.set(value);
    });

7.6 频率检测

概述：检测帧率

导包

import Stats from 'three/addons/libs/stats.module.js';

应用

const stats = new Stats();
document.body.appendChild(stats.dom);

自变化

20221021_110002

stats.update()

必须在render函数调用update实时更新才奏效

7.7 导航网格

概述：底部二维平面的网格化，帮助我们更好的创建场景

const gridHelper = new THREE.GridHelper(10, 20)//网格大小、细分次数
scene.add(gridHelper)

八、源码

//导入包
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as dat from 'dat.gui';
import Stats from 'three/addons/libs/stats.module.js';


let scene,camera,renderer

//场景
scene = new THREE.Scene();

//坐标抽
const axesHelper = new THREE.AxesHelper(20);
scene.add(axesHelper);

//场景贴图
const sphereTexture = new THREE.CubeTextureLoader().setPath('./textures/course/environmentMaps/0/');
const envTexture= sphereTexture.load([
    'px.jpg',
    'nx.jpg',
    'py.jpg',
    'ny.jpg',
    'pz.jpg',
    'nz.jpg'
]);
//场景添加背景
scene.background = envTexture;
//场景的物体添加环境贴图（无默认情况使用）
scene.environment = envTexture;

const sphereGeometry = new THREE.SphereGeometry(5, 30, 30);
const sphereMaterial = new THREE.MeshStandardMaterial({
    roughness: 0,//设置粗糙程度
    metalness: 1,//金属度
    envMap:envTexture,

});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);




//光照
const ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.05);
directionalLight.position.set(10,10,10);
directionalLight.lookAt(scene.position);
scene.add( directionalLight );


//相机
camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    1,
    2000,
);
camera.position.set(10,10,20);
camera.lookAt(scene.position);
scene.add(camera);


//渲染器
renderer = new THREE.WebGLRenderer({
    //防止锯齿
    antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
// renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);

//鼠标控制器
const controls = new OrbitControls(camera, renderer.domElement);
//阻尼 必须在 render函数调用  controls.update();
controls.dampingFactor = true;
controls.autoRotate=true

const stats=new Stats()
document.body.appendChild(stats.dom);
function render () { 
   
    renderer.render(scene, camera);
    requestAnimationFrame(render);
    controls.update();//调用
    stats.update()
}
render();


//全屏操作
window.addEventListener('dblclick', () => { 
    //查询是否全屏
    let isFullScene = document.fullscreenElement;
    console.log(isFullScene);
    if (!isFullScene) {
        renderer.domElement.requestFullscreen();
    }
    else { 
        document.exitFullscreen();
    }
})

//自适应
window.addEventListener('resize', () => { 
    //宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);//设置像素比

})

//界面操作
const gui = new dat.GUI();

//操作物体位置
gui
    .add(sphere.position, 'x')
    .min(0)
    .max(10)
    .step(0.1)
    .name('X轴移动')
    .onChange((value) => {
        console.log('修改的值为' + value);
    })
    .onFinishChange((value) => {
        console.log('完全停止' + value);
    });
//操作物体颜色
const colors = {
    color: '#0000ff',
};
gui
    .addColor(colors, 'color')
    .onChange((value) => {
        //修改物体颜色
        sphere.material.color.set(value);
    });

到此这篇关于Three.Js实现看房自由的文章就介绍到这了,更多相关three.js看房内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Three.Js实现看房自由小项目

本文链接: https://lsjlt.com/news/170282.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Three.Js实现看房自由小项目
    目录一、前言二、基础知识三、场景3.1 网络模型3.2 光照3.2.1 环境光3.2.2 平行光3.2.3 点光源3.2.4 聚光灯3.2.5 半球光四、相机4.1 正交相机4.2 ...
    99+
    2022-11-13
    three.js看房 three.js全景看房 three.js看房自由
  • three.js如何实现3d全景看房
    这篇文章主要介绍“three.js如何实现3d全景看房”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“three.js如何实现3d全景看房”文章能帮助大家解决问题。认识threejsthree.js就...
    99+
    2023-07-02
  • three.js实现3d全景看房示例
    目录背景认识threejs安装与使用3D世界的三剑客场景（scene）相机（camera）透视相机正交投影相机渲染器（renderer）世界雏形造物几何体（geometry）材质（m...
    99+
    2024-04-02
  • EasyX实现自由落体小球
    本文实例为大家分享了EasyX实现自由落体小球的具体代码，供大家参考，具体内容如下 1. 要实现自由落体,首先得实现匀速下落 #include<graphics.h>  ...
    99+
    2024-04-02
  • C++实现推箱子小项目
    本文实例为大家分享了C++实现推箱子小项目的具体代码，供大家参考，具体内容如下 代码： #include <bits/stdc++.h> #include<c...
    99+
    2024-04-02
  • C#实现截图工具小项目
    本文实例为大家分享了C#实现截图工具小项目的具体代码，供大家参考，具体内容如下 1.起因 一直用的截图是qq的截图，所以想要实现一个简单点的截图，为了方便。 2.思路 讲一下实现流程...
    99+
    2024-04-02
  • C语言实现扫雷小项目
    本文实例为大家分享了C语言实现扫雷小项目的具体代码，供大家参考，具体内容如下 游戏的基本设计流程如下： 菜单实现： void menu() { printf("#######...
    99+
    2024-04-02
  • Java练手小项目实现一个项目管理系统
    目录前言：一、项目需求二、功能实现三、具体模块的实现四、总结前言： 时隔多日，我们学习完java的面向对象阶段，毕竟需要付诸实践，这个小项目就 作为我们第一个java面向对象解决的项...
    99+
    2024-04-02
  • C语言实现通讯录小项目
    本文实例为大家分享了C语言实现通讯录小项目的具体代码，供大家参考，具体内容如下 编写程序实现通讯录的基本功能，可以做到增，删，查，改，打印通讯录，等等功能 test.c #inc...
    99+
    2024-04-02
  • C语言实现弹跳小球项目
    目录一、项目描述和最终项目展示二、输出一个小球三、下落的小球四、来回弹跳的小球五、最终项目实现本文实例为大家分享了C语言实现弹跳小球项的具体代码，供大家参考，具体内容如下 一、项目描...
    99+
    2024-04-02
  • C语言实现猜数字小项目
    学习完c语言循环、选择内容，我们对c语言有个初步的认识了，让我们来实现一个小项目吧！！！ 1.猜数字小项目分析： 我们利用c语言制造出随机数来猜，在只知道范围的前提下我们无非有以下三...
    99+
    2024-04-02
  • Android怎么实现小球自由碰撞动画
    这篇文章主要介绍“Android怎么实现小球自由碰撞动画”，在日常操作中，相信很多人在Android怎么实现小球自由碰撞动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Android怎么实现小球自由碰撞动画...
    99+
    2023-06-22
  • Linux实现项目的自动化部署
    一、自动化部署git项目 #!/bin/bash # 清除项目进程和历史文件 pkill -f start.py sleep 1 cd /root/automation |rm -rf testProduce/ ...
    99+
    2022-07-08
    Linux 项目自动化部署
  • 基于vue3实现一个抽奖小项目
    目录前言数据保存姓名切换奖项切换历史记录数据导入结语前言 在公司年会期间我做了个抽奖小项目，我把它分享出来，有用得着的可以看下。浏览链接：http://xisite.top/orig...
    99+
    2023-01-28
    vue3抽奖项目 vue3抽奖
  • C语言实现扫雷游戏小项目
    本文实例为大家分享了C语言实现扫雷游戏的具体代码，供大家参考，具体内容如下 一.基本实现功能 1.建立一个游戏菜单 2.创建游戏盘，一个埋雷，一个显示。 3.打印游戏盘。 4.翻开坐...
    99+
    2024-04-02
  • Gitlab-runner+Docker实现自动部署SpringBoot项目
    目录1.环境要求当前我的服务版本2.主要流程3.GitlabRunner 安装和注册3.1 安装总结一共就2个步骤：1.添加gitlab官方库：2.命令安装:3.2 开始注册4.制作...
    99+
    2024-04-02
  • Jenkins自动化部署SpringBoot项目的实现
    目录1、Jenkins介绍1.1、概念1.2、优势1.3、Jenkins目的2、环境准备3、Jenkins下载3.1、下载3.2、运行3.3、问题解决4、Jenkins配置4.1、用...
    99+
    2023-01-13
    Jenkins自动化部署SpringBoot Jenkins部署SpringBoot
  • Java 项目中如何实现自定义ArrayList
    本篇文章为大家展示了Java 项目中如何实现自定义ArrayList，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。Java 中模仿源码自定义ArrayList最近看了下ArrayList的源码，抽空...
    99+
    2023-05-31
    java 自定义 arraylist
  • k8s怎么实现自动部署go项目
    要实现自动部署Go项目，可以使用Kubernetes（K8s）提供的以下功能： 编写Dockerfile：首先，需要编写一个Do...
    99+
    2023-10-27
    k8s go
  • 房地产项目管理系统的重要性及其实现方式
    房地产项目管理系统是现代房地产行业中必不可少的工具之一，它可以帮助房地产开发商和物业管理者更好地管理项目的各个阶段，包括规划、设计、施工、销售和后期维护等。本文将探讨房地产项目管理系统的重要性，并介绍其实现方式。 详细说明：1. 项目规划阶...
    99+
    2024-01-14
    管理系统 房地产项目 重要性
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作