threejs实现3d全景看房

最新推荐文章于 2024-08-13 11:42:34 发布

AI画手小王

最新推荐文章于 2024-08-13 11:42:34 发布

阅读量3.9k

点赞数 3

文章标签： 3d javascript 前端

本文链接： https://blog.csdn.net/qq_53225741/article/details/126399823

版权

本文介绍了如何利用three.js实现3D全景看房功能，从认识three.js、安装使用到3D世界的三剑客——场景、相机和渲染器的详细解释，再到3D全景房的实现，包括天空盒贴图、全景图片贴图和房屋模型的创建，以及交互功能的实现，如轨道控制器、灯光和精灵模型。最后，文章提到了在实际应用中遇到的问题和学习总结。

摘要由CSDN通过智能技术生成

背景

随着电商时代的发展，网上购物的方式已经成为主流，良好的购物体验已经显得极为重要。展示给用户的视觉效果便不能仅仅局限于2D视觉效果，全方位的3D立体展示效果能让用户对商品进行 360度无死角的认识了解。丰富多彩的三维世界大门早已敞开，一起进去看看吧！

认识threejs

three.js就是使用 javascript 来写的，基于原生 WebGL 封装运行的三维引擎，运行在浏览器上的3D程序。WebGL 是在浏览器中实现三维效果的一套规范。与我们而言，three.js 相当于简化了 WebGL 的操作，让我们在不懂计算机图形学，只理解 three.js 的一些基本概念的条件下也能够轻松进行web 3D开发。在所有WebGL引擎中，Three.js 是国内文资料最多、使用最广泛的三维引擎。

通过 can i use 查询可知，现在的主流浏览器都已支持webGL

安装与使用

 // cod引用<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>// npm 安装使用npm install three// 引用import * as THREE from 'three'

3D世界的三剑客

在threejs中，渲染一个3d世界的必要因素是场景（scene）、相机（camera）、渲染器（renderer）, 我将他们称之为 threejs 3D世界的三剑客。有了这三样东西，才能将物体渲染到网页中去。

场景（scene）

场景是一个三维空间, 所有物品的容器。相当于世界, 我们所创造的所有物体光源等都必须添加到场景中才能生效或可见。

在threejs中,场景是右手坐标系, 把右手放在原点的位置，使大拇指，食指和中指互成直角，把大拇指指向x轴的正方向，食指指向y轴的正方向时，中指所指的方向就是z轴的正方向。

创建场景

 const scene = new THREE.Scene()

相机（camera）

相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。

值得注意的是场景只有一种，但是相机却有很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。

常用的是正交投影相机和透视相机。

透视相机

透视相机是模拟人眼的视觉，近大远小（透视）

创建透视相机

 const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

相机参数PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) fov — 摄像机视锥体垂直视野角度 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 far — 摄像机视锥体远端面只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到。