【three.js】场景搭建

three.js由场景、相机、渲染器、灯光、控制器等几个要素组成。每个要素都有不同的类型，例如光照有太阳光、环境光、半球光等等。每种光照都有不同的属性可以进行配置。

场景

场景（scene）：场景是所有物体的容器，如果要显示一个物体，就需要将物体对象加入场景中。

场景是一个三维空间，是存放所有物品的容器，可以把场景想象成一个空房间，房间里面可以防止要呈现的物体、相机、光源等。

let scene = new THREE.Scene();

相机

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

let camera = new THREE.PerspectiveCamera(75, 
window.innerWidth/window.innerHeight, 0.1, 1000)

three.js中有两种常用的相机：【透视投影相机（perspectiveCamera）和正交投影相机（OrthographicCamera ）】

透视投影相机**（perspectiveCamera）！**

**特点：**透视相机的效果是模拟人眼看到的效果，跟人眼看到的世界是一样的，近大远小

用途：大部分场景都适合使用透视投影相机，因为跟真实世界的观测效果一样；

创建透视投影相机：let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

|--------|---------------------------------------------------------------------------------------------------------|
| 参数 | 介绍 |
| fov | 视野：表示摄像机能看到的视野。推荐默认值50 |
| aspect | 指定渲染结果水平方向和竖直方向长度的比值，推荐默认值为窗口的宽高比，即window.innerWidth/window.innerHeight，如果比例设置的不对，会发现渲染出来的画面有拉伸或者压缩的感觉。 |
| near | 近端渲染距离：指定从距离摄像机多近的位置开始渲染，推荐默认值0.1 |
| far | 远端距离：指定摄像机从它所在的位置最远能看到多远，太小场景中的远处不会被渲染，太大会浪费资源影响性能，推荐默认值1000。 |

近端渲染距离和远端距离：这两个是设置相机可以看到的场景内容的范围，只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到。

let camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);// 创建透视投影相机

// 设置相机位置
camera.position.x = 5;
camera.position.y = 10;
camera.position.z = 10;
// 以上设置相机位置可以简写为：
camera.position.set(5, 10, 10);

正交投影相机（OrthographicCamera）

特点：正交投影则远近都是一样的大小，三维空间中平行的线，投影到二维空间也一定是平行的。

用途：一般是用在制图、建模等方面，方便观察模型之间的大小比例。

创建正交投影相机：let camera = new THREE.OrthographicCamera( left,right, top,bottom, near, far )

|--------|---------------------|
| 参数 | 介绍 |
| left | 可被渲染空间的左端面 |
| right | 可被渲染空间的右端面 |
| top | 可被渲染空间的上端面 |
| bottom | 可被渲染空间的下端面 |
| near | 基于相机所在位置，可被渲染空间的近端面 |
| far | 基于相机所在位置，可被渲染空间的远端面 |

以上6个参数规定了相机视景体的左、右、上、下、前、后六个面的位置，这六个投影面围成的区域就是相机投影的可见区域。在三维空间内，只有在这个区域内的物体才会被相机看到。

let camera = new THREE.OrthographicCamera(-2, 2, 1, -1, 1, 10); 
// 创建正交投影相机

// 设置相机位置
camera.position.x = 5;
camera.position.y = 10;
camera.position.z = 10;
// 以上设置相机位置可以简写为：
camera.position.set(5, 10, 10);

正交投影和透视投影对比

正交投影，物体反射的光平行投射到屏幕上，其大小始终不变，所以远近的物体大小一样。

透视投影，符合我们平时看东西的感觉，近大远小。

渲染器

渲染器（renderder) ：渲染器决定了渲染的结果应该花在页面的什么元素上面

Three.js中有很多种类的渲染器，例如webGLRenderer、canvasRenderer、SVGRenderer，通常使用的是WebGLRenderer渲染器。

创建WebGLRenderer渲染器：var renderer = new THERR.WebGLRenderer();

创建完渲染器后，需要调用render方法将之前创建好的场景和相机相结合从而渲染出来，即调用渲染器的render方法：renderer.render(scene,camera)

let renderer = new THREE.WebGLRenderer(); 
// 创建一个 WebGL 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); 
// 通过调用 setSize() 方法设置渲染的长宽（设置渲染器为全屏）
document.body.appendChild(renderer.domElement); 
// 将渲染结果展示到页面上
renderer.render(scene, camera); 
// 结合场景和相机进行渲染，即用摄像机拍下此刻的场景（最后一步）

说明：

setSize() 方法设置渲染的长宽。

renderer 的 domElement 元素，表示渲染器中的画布，所有的渲染都是画在 domElement 上，所以这里的 appendChild 表示将这个 domElement 挂接在 body 下面，这样渲染的结果就能够在页面中显示了。

render()方法中传递我们的场景和相机，相当于传递了一张由相机拍摄场景得到的一张底片，它将图像渲染到我们的画布中。

灯光

灯光（light）：模拟显示环境中的光照

let directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);

控制器

控制器（controls）：对3D场景进行旋转、放大缩小等操作

let controls = new OrbitControls(camera, renderer.domElement);

three.js基本要素：

物体（拍摄对象）：几何体模型、材质、网格

光源

码字不易，各位大佬点点赞呗。