VR看房
*
– 一、前言
– 二、基础知识
– 三、场景
–
+ 3.1 网络模型
+ 3.2 光照
+
* 3.2.1 环境光
* 3.2.2 平行光
* 3.2.3 点光源
* 3.2.4 聚光灯
* 3.2.5 半球光
– 四、相机
–
+ 4.1 正交相机
+ 4.2 透视相机
– 五、渲染器
– 六、贴图纹理
–
+ 6.1 基础介绍
+ 6.2 环境贴图
+ 6.3 HDR处理
– 七、拓展
–
+ 7.1 坐标系
+ 7.2 控制器
+ 7.3 自适应
+ 7.4 全屏响应
+ 7.5 信息面板
+ 7.6 频率检测
+ 7.7 导航网格
– 八、源码
; 一、前言
概述：基于 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);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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);
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);
Original: https://blog.csdn.net/qq_53673551/article/details/127513554
Author: 知心宝贝
Title: THREE.JS实现看房自由（VR看房）
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/778600/
转载文章受原作者版权保护。转载请注明原作者出处！