【js&threeJS】入门three，并实现全景看房案例，附带全码

序幕：

首先附上官方文档以及案例库地址：

three.js docs

three.js examples

全景图切割工具：HDRI to CubeMap 

前置了解：

Three.js 是一个用于创建和渲染 3D 图形的 JavaScript 库。它基于 WebGL 技术

three.js有四个不同的引用资源：three.module.min.js、three.module.js、three.min.js、three.js，区别如下：

• three.module.min.js 是最小化且已模块化的版本，用于生产环境。
• three.module.js 是模块化但未压缩的版本，用于开发环境。
• three.min.js 是非模块化且压缩过的旧版本，适合旧项目或不支持 ES 模块的环境。
• three.js 是未压缩和精简的旧版本

首先实现一个3d自动旋转的几何体

• 从BootCDN中下载three.module.js

• 根据官方文档起步中编写如下代码：

效果如下：

将3d自动旋转的几何体改成可鼠标旋转

需要借助轨道控制器（OrbitControls）

• 首先下载Three资源库

• 然后根据three/examples/jsm/controls/OrbitControls路径，获取到OrbitControls.js
• 开始编码修改

• 效果如图：

全景查看房屋

根据我的了解目前常用于实现全景看房效果的有两种，分别是 天空盒(skyBox) 和 全景图片贴图。

天空盒

 方法是最容易理解的，在我们身处的场景内，无非就是6个面，上下、前后、左右。将这6个面的视觉处理成图片就得到6张不同方向视觉的图片，如下：

• 首先我们将6个视觉的图片贴到立方体的6个面，可以得到一个房间

• 然后将视觉移到立方体中心，并让贴图内翻转一下，就能实现全景看房 

最终效果图：

全代码如下：

全景图贴图

全景图贴图这种方式我认为是简单而且效果最好的一种。写之前需要一张全景图片，这个用单反的全景模式就能拍一张，如下：

• 添加一个球体。并把全景图作为贴图贴到球体上，得到的效果如下

• 同样，把视觉放球内，贴图反转。 

最终效果同上

全代码：

---

---

扩展记录

以下代码为将纹理赋给场景背景，如何旋转调整单独几张图片：

        function sceneBackground() {
            scene = new THREE.Scene();
            var urls = [
                'https://cdn.huodao.hk/upload_img/20220620/3e532822bd445485d27677ca55a79b10.jpg?proportion=1',
                'https://cdn.huodao.hk/upload_img/20220620/cebf6fbcafdf4f5c945e0881418e34ec.jpg?proportion=1',
                'https://cdn.huodao.hk/upload_img/20220620/273081d1896fc66866842543090916d3.jpg?proportion=1',
                'https://cdn.huodao.hk/upload_img/20220620/8747f61fd2215aa748dd2afb6dce3822.jpg?proportion=1',
                'https://cdn.huodao.hk/upload_img/20220620/c34262935511d61b2e9f456b689f5c1c.jpg?proportion=1',
                'https://cdn.huodao.hk/upload_img/20220620/722d2bf88f6087800ddf116511b51e73.jpg?proportion=1'
            ];

            var cubeTextureLoader = new THREE.CubeTextureLoader();
            var textureCube = cubeTextureLoader.load(urls, function (texture) {
                // 确定要旋转的面索引，例如右侧面为第 0 个面（索引从 0 开始）
                var faceIndex = [2, 3];
                for (let i = 0; i < faceIndex.length; i++) {
                    // 获取指定面的纹理
                    var faceTexture = texture.image[faceIndex[i]];

                    // 创建一个 canvas 元素用于绘制纹理
                    var canvas = document.createElement("canvas");
                    canvas.width = faceTexture.width;
                    canvas.height = faceTexture.height;
                    var ctx = canvas.getContext("2d");

                    // 在 canvas 上进行旋转操作
                    ctx.translate(canvas.width / 2, canvas.height / 2);
                    ctx.rotate(Math.PI); // 旋转 90 度
                    ctx.drawImage(faceTexture, -canvas.width / 2, -canvas.height / 2);

                    // 将修改后的 canvas 赋值给纹理对象的指定面
                    texture.image[faceIndex[i]] = canvas;
                    texture.needsUpdate = true;
                }
                // 将纹理赋给场景背景
                scene.background = texture;
            });
            // scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000); //雾
        }

new THREE.TextureLoader().load()与new THREE.CubeTextureLoader().load()的作用，区别

THREE.TextureLoader().load() 方法用于加载普通的二维纹理图像，例如贴图、照片或其他平面图像。

THREE.CubeTextureLoader().load() 方法用于加载立方体贴图，也称为环境贴图。立方体贴图是由六个纹理图像组成的贴图，每个图像代表了立体空间的一个面。