定制软件THREE.JS实现看房自由（VR看房）

---

---

一、前言

概述：基于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);}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UlBSgxKr-1666681292595)(https://gitee.com/riskbaby/picgo/raw/master/blog/202209211037215.png#pic_center)]

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);
1
2
3
4

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);
1
2
3
4

3.2 光照

3.2.1 环境光

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

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

3.2.2 平行光

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

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

3.2.3 点光源

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

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

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);
1
2
3
4
5
6

3.2.5 半球光

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

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

四、相机

4.1 相机

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);
1
2
3
4
5

4.2 透视相机

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);
1
2
3
4
5

五、渲染器

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

六、贴图纹理

6.1 基础介绍

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

以前

之后

6.2 环境贴图

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

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

红、绿、蓝分别代表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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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; })
1
2
3
4
5
6
7
8
9

七、拓展

7.1 坐标系

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

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

7.2 控制器

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

导包

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

应用

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

自旋转

controls.autoRotate = true
1

必须在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)})
1
2
3
4
5
6
7

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

7.4 全屏响应

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

window.addEventListener('dblclick', () => {     let isFullScreen = document.fullscreenElement    if (!isFullScreen) {        renderer.domElement.requestFullscreen()    }    else {         document.exitFullscreen()    }})
1
2
3
4
5
6
7
8
9

7.5 信息面板

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

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

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

//界面操作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);    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

7.6 频率检测

概述：检测帧率

导包

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

应用

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

自变化

stats.update()
1

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

7.7 导航网格

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

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

八、源码

//导入包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=trueconst 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);    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143