php 全景看房制作,一步步带你实现web全景看房——three.js

canvas画2d相信大家都很熟悉了，但3d世界更加炫酷。我们直接从three.js入手。下面我们从0开始来摸索一下3d世界

1. 基本概念

在THREEjs中，渲染一个3d世界的必要因素是场景(scene)、相机(camera)、渲染器(renderer)。渲染出一个3d世界后，可以往里面增加各种各样的物体、光源等，形成一个3d世界：

场景:右手坐标系,一切要素都在场景里面，相当于“世界”，包括各种物质和物理变化

// 创建场景

const scene = new THREE.Scene();

复制代码照相机:摄像机就相当于人眼，有摄像机才可以看见场景里面的一切物体和光源。常用的是正交摄像机和透视摄像机

正交摄像机是一个矩形可视区域，物体只有在这个区域内才是可见的物体无论距离摄像机是远或事近，物体都会被渲染成一个大小。一般应用场景是2.5d游戏如跳一跳、机械模型

// 创建正交相机

const camera = new THREE.OrthographicCamera(

-window.innerWidth / 200,

window.innerWidth /200 ,

window.innerHeight/ 200,

-window.innerHeight/ 200,

1,

1000

);

复制代码

我们可以看见上图的效果，有一个正方体已经走了很远但是大小不变。另外还可以看见角落有一个正方体已经被截断了一部分，那是因为正交摄像机仅仅展示一个空间内的场景，所以会有截断效果。

透视摄像机是最常用的摄像机类型，模拟人眼的视觉，近大远小(透视)。Fov表示的是视角，Fov越大，表示眼睛睁得越大，离得越远，看得更多。如果是需要模拟现实，基本都是用这个相机

// 创建透视相机

const camera = new THREE.PerspectiveCamera(

90,

window.innerWidth / window.innerHeight,

1,

10000

);

复制代码

近大远小的效果就出来了，比较符合现实

渲染器

最后需要把所有的内容渲染到页面上，需要一个渲染器：

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight); // canvas大小

document.body.appendChild(renderer.domElement);

复制代码

2. 给