devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：从前慢现在也慢 | 2024-07-23 19:06:38

赞

踩

threejs 360全景看房

序幕：

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

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

  • 根据官方文档起步中编写如下代码：
  1. <html>
  2.  
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>My first three.js app</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  10.     </style>
  11. </head>
  12.  
  13. <body>
  14.     <script type="module">
  15.         // script标签中加入type="module" 浏览器将把该脚本作为 ES6 模块来处理
  16.         // 通过es6的方式导入THREE
  17.         import * as THREE from './three.module.js';
  18.  
  19.         // 创建场景
  20.         const scene = new THREE.Scene();
  21.  
  22.         // 创建相机
  23.         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  24.         // 相机的位置
  25.         camera.position.z = 5;
  26.  
  27.         // 渲染器
  28.         const renderer = new THREE.WebGLRenderer();
  29.         renderer.setSize(window.innerWidth, window.innerHeight);
  30.         document.body.appendChild(renderer.domElement);
  31.  
  32.         // 添加立方体
  33.         const geometry = new THREE.BoxGeometry(1, 1, 1);
  34.         // 创建材质
  35.         const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  36.         //  创建物体
  37.         const cube = new THREE.Mesh(geometry, material);
  38.         // 将物体添加到场景中
  39.         scene.add(cube);
  40.  
  41.  
  42.         // 动画循环又叫渲染循环
  43.         function animate() {
  44.             requestAnimationFrame(animate);
  45.  
  46.             // 使立方体动起来
  47.             cube.rotation.x += 0.01;
  48.             cube.rotation.y += 0.01;
  49.  
  50.             // 渲染场景和相机
  51.             renderer.render(scene, camera);
  52.         }
  53.  
  54.         animate();
  55.     </script>
  56. </body>
  57.  
  58. </html>

效果如下：

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

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

  • 首先下载Three资源库

  • 然后根据three/examples/jsm/controls/OrbitControls路径，获取到OrbitControls.js
  • 开始编码修改
  1. <html>
  2.  
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>My first three.js app</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  10.     </style>
  11. </head>
  12.  
  13. <body>
  14.     <!-- 在 HTML 中使用 JavaScript 模块的新特性，被称为 Import Maps（导入映射） -->
  15.     <!-- 当浏览器加载该 three 文件时，它会根据导入映射的规则来解析 JavaScript 中的模块导入语句 -->
  16.     <script type="importmap">
  17.         {
  18.             "imports": {
  19.                 "three": "./three.module.js"
  20.             }
  21.         }
  22.     </script>
  23.     <script type="module">
  24.         import * as THREE from 'three';
  25.         import { OrbitControls } from './OrbitControls.js'
  26.  
  27.         const scene = new THREE.Scene();
  28.  
  29.         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  30.         camera.position.z = 5;
  31.  
  32.         const renderer = new THREE.WebGLRenderer();
  33.         renderer.setSize(window.innerWidth, window.innerHeight);
  34.         document.body.appendChild(renderer.domElement);
  35.  
  36.         const geometry = new THREE.BoxGeometry(1, 1, 1);
  37.  
  38.         const colors = [
  39.             { color: 0xff0000 },
  40.             { color: 0x00ff00 },
  41.             { color: 0x0000ff },
  42.             { color: 0xff00ff },
  43.             { color: 0xffff00 },
  44.             { color: 0x00ffff }
  45.         ]
  46.         const material = []
  47.         // 将6个面涂上不同的颜色
  48.         for (let i = 0, len = colors.length; i < len; i++) {
  49.             material.push(new THREE.MeshBasicMaterial(colors[i]))
  50.         }
  51.  
  52.         const cube = new THREE.Mesh(geometry, material);
  53.         scene.add(cube);
  54.  
  55.  
  56.         // renderer.domElement 表示 Three.js 渲染器（renderer）所输出的 HTML 元素，通常是一个 <canvas> 元素
  57.         const container = renderer.domElement
  58.         // 创建了一个 OrbitControls 对象  OrbitControls 类会基于鼠标和触摸手势来控制相机在场景中的移动、旋转和缩放
  59.         const controls = new OrbitControls(camera, container)
  60.         // 启用了阻尼效果，使得相机在停止操作之后会自动减速停止
  61.         controls.enableDamping = true
  62.         // 设置了相机可以向外拉近或向内推离目标物体的最大距离。超过这个距离，相机将无法再拉近或推离
  63.         controls.maxDistance = 2
  64.  
  65.         // 渲染
  66.         const render = () => {
  67.             renderer.render(scene, camera)
  68.             requestAnimationFrame(render)
  69.         }
  70.         render()
  71.     </script>
  72. </body>
  73.  
  74. </html>
  • 效果如图：

全景查看房屋

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

天空盒

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

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

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

最终效果图：

全代码如下：

  1. <html>
  2.  
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>My first three.js app</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  10.     </style>
  11. </head>
  12.  
  13. <body>
  14.     <script type="importmap">
  15.         {
  16.             "imports": {
  17.                 "three": "./three.module.js"
  18.             }
  19.         }
  20.     </script>
  21.     <script type="module">
  22.         import * as THREE from 'three';
  23.         import { OrbitControls } from './OrbitControls.js'
  24.  
  25.         const scene = new THREE.Scene();
  26.  
  27.         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  28.         camera.position.z = 5;
  29.  
  30.         const renderer = new THREE.WebGLRenderer();
  31.         renderer.setSize(window.innerWidth, window.innerHeight);
  32.         document.body.appendChild(renderer.domElement);
  33.  
  34.  
  35.         // 添加立方体  参数分别是立方体的宽度、高度和深度
  36.         const geometry = new THREE.BoxGeometry(10, 10, 10)
  37.         // 左右、上下、后前
  38.         const urls = [
  39.             'https://cdn.huodao.hk/upload_img/20220620/3e532822bd445485d27677ca55a79b10.jpg?proportion=1',
  40.             'https://cdn.huodao.hk/upload_img/20220620/cebf6fbcafdf4f5c945e0881418e34ec.jpg?proportion=1',
  41.             'https://cdn.huodao.hk/upload_img/20220620/273081d1896fc66866842543090916d3.jpg?proportion=1',
  42.             'https://cdn.huodao.hk/upload_img/20220620/8747f61fd2215aa748dd2afb6dce3822.jpg?proportion=1',
  43.             'https://cdn.huodao.hk/upload_img/20220620/c34262935511d61b2e9f456b689f5c1c.jpg?proportion=1',
  44.             'https://cdn.huodao.hk/upload_img/20220620/722d2bf88f6087800ddf116511b51e73.jpg?proportion=1'
  45.         ]
  46.         const boxMaterial = []
  47.  
  48.         urls.forEach((item, index) => {
  49.             // 纹理加载
  50.             const texture = new THREE.TextureLoader().load(item)
  51.             // 通过旋转修复天花板和地板
  52.             if (index == 2 || index == 3) {
  53.                 texture.rotation = Math.PI
  54.                 texture.center = new THREE.Vector2(0.5, 0.5)
  55.             }
  56.             // 创建材质
  57.             boxMaterial.push(new THREE.MeshBasicMaterial({ map: texture }))
  58.         })
  59.         //  创建一个三维物体
  60.         const house = new THREE.Mesh(geometry, boxMaterial)
  61.  
  62.         house.geometry.scale(1, 1, -1)
  63.         scene.add(house)
  64.  
  65.  
  66.         const container = renderer.domElement
  67.         const controls = new OrbitControls(camera, container)
  68.         controls.enableDamping = true
  69.         controls.maxDistance = 2
  70.  
  71.         // 渲染
  72.         const render = () => {
  73.             renderer.render(scene, camera)
  74.             requestAnimationFrame(render)
  75.         }
  76.         render()
  77.     </script>
  78. </body>
  79.  
  80. </html>

全景图贴图

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

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

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

最终效果同上

全代码：

  1. <html>
  2.  
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>My first three.js app</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.         }
  10.     </style>
  11. </head>
  12.  
  13. <body>
  14.     <script type="importmap">
  15.         {
  16.             "imports": {
  17.                 "three": "./three.module.js"
  18.             }
  19.         }
  20.     </script>
  21.     <script type="module">
  22.         import * as THREE from 'three';
  23.         import { OrbitControls } from './OrbitControls.js'
  24.  
  25.         const scene = new THREE.Scene();
  26.  
  27.         const defaultMap = {
  28.             x: 20,
  29.             y: 20,
  30.             z: 20,
  31.         }
  32.         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  33.         const { x, y, z } = defaultMap
  34.         camera.position.set(x, y, z)
  35.  
  36.         const renderer = new THREE.WebGLRenderer();
  37.         renderer.setSize(window.innerWidth, window.innerHeight);
  38.         document.body.appendChild(renderer.domElement);
  39.  
  40.  
  41.         // 添加立方体  参数分别是立方体的宽度、高度和深度
  42.         let geometry = new THREE.SphereGeometry(16, 50, 50)
  43.         let texture = new THREE.TextureLoader().load("./assets/quanjing.webp");
  44.         let sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });
  45.         const house = new THREE.Mesh(geometry, sphereMaterial);
  46.         house.geometry.scale(16, 16, -16);
  47.         scene.add(house)
  48.  
  49.  
  50.         const container = renderer.domElement
  51.         const controls = new OrbitControls(camera, container)
  52.         controls.enableDamping = true
  53.         controls.maxDistance = 1000
  54.  
  55.         // 渲染
  56.         const render = () => {
  57.             renderer.render(scene, camera)
  58.             requestAnimationFrame(render)
  59.         }
  60.         render()
  61.     </script>
  62. </body>
  63.  
  64. </html>

扩展记录

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

  1.         function sceneBackground() {
  2.             scene = new THREE.Scene();
  3.             var urls = [
  4.                 'https://cdn.huodao.hk/upload_img/20220620/3e532822bd445485d27677ca55a79b10.jpg?proportion=1',
  5.                 'https://cdn.huodao.hk/upload_img/20220620/cebf6fbcafdf4f5c945e0881418e34ec.jpg?proportion=1',
  6.                 'https://cdn.huodao.hk/upload_img/20220620/273081d1896fc66866842543090916d3.jpg?proportion=1',
  7.                 'https://cdn.huodao.hk/upload_img/20220620/8747f61fd2215aa748dd2afb6dce3822.jpg?proportion=1',
  8.                 'https://cdn.huodao.hk/upload_img/20220620/c34262935511d61b2e9f456b689f5c1c.jpg?proportion=1',
  9.                 'https://cdn.huodao.hk/upload_img/20220620/722d2bf88f6087800ddf116511b51e73.jpg?proportion=1'
  10.             ];
  11.  
  12.             var cubeTextureLoader = new THREE.CubeTextureLoader();
  13.             var textureCube = cubeTextureLoader.load(urls, function (texture) {
  14.                 // 确定要旋转的面索引，例如右侧面为第 0 个面（索引从 0 开始）
  15.                 var faceIndex = [2, 3];
  16.                 for (let i = 0; i < faceIndex.length; i++) {
  17.                     // 获取指定面的纹理
  18.                     var faceTexture = texture.image[faceIndex[i]];
  19.  
  20.                     // 创建一个 canvas 元素用于绘制纹理
  21.                     var canvas = document.createElement("canvas");
  22.                     canvas.width = faceTexture.width;
  23.                     canvas.height = faceTexture.height;
  24.                     var ctx = canvas.getContext("2d");
  25.  
  26.                     // 在 canvas 上进行旋转操作
  27.                     ctx.translate(canvas.width / 2, canvas.height / 2);
  28.                     ctx.rotate(Math.PI); // 旋转 90 度
  29.                     ctx.drawImage(faceTexture, -canvas.width / 2, -canvas.height / 2);
  30.  
  31.                     // 将修改后的 canvas 赋值给纹理对象的指定面
  32.                     texture.image[faceIndex[i]] = canvas;
  33.                     texture.needsUpdate = true;
  34.                 }
  35.                 // 将纹理赋给场景背景
  36.                 scene.background = texture;
  37.             });
  38.             // scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000); //雾
  39.         }

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/871139
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号