Threejs 三大组件 -- 场景、相机、渲染器

Three.js 中，要渲染物体到网页中，必备3个组件：场景 scene、相机 camera、渲染器 renderer。

场景 scene

场景是所有物体的容器。在Threejs中，场景只有一种，用 THREE.Scene 表示，构建场景如下：

var scene = new THREE.Scene();

场景组件包括：

相机 — 决定哪些东西要渲染到屏幕上

光源 — 对材质如何显示，及阴影生成产生影响

物体 — Mesh对象，在相机视图里主要的渲染对象，如方块、球体等

注：Mesh对象 是区分相机和光源对象的方法。–> if( lastObject instanceof THREE.Mesh )

场景的两个属性 – fog 雾化 和 overrideMaterial 材质覆盖

//雾化效果 
//1-线性雾，密度随着距离的增加呈线性增长。参数为：雾的颜色，开始的地方，浓度的加深程度。
scene.fog = new THREE.Fog(0xffffff, 0.015, 100); 
//2-指数雾，密度随距离呈指数级增长。参数为：雾的颜色，浓度
scene.fog = new THREE.Fog(0xffffff, 100); 
 
//材质覆盖：所有物体设置为同样的材质
scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

场景函数

变量
scene.children.length; //场景中物体的个数
 
函数
scene.add(obj);	//向场景中添加物体
scene.remove(obj); //删除场景中的物体
scene.children();	//获取场景中的所有子对象
scene.getChildByName(name);	//通过名称获取场景中的物体对象
scene.traverse(function (e){});	//遍历场景中的每个物体，对物体进行操作

相机 camera

相机决定了场景中哪个角度的景色会被渲染出来。

在Threejs中用 THREE.Camera( ) 表示相机，它是相机的抽象基类。

属性：

.matrixWorldInverse — matrixWorld的逆矩阵。matrixWorld包含相机的世界变换矩阵。

.projectionMatrix — 投影变换矩阵。

方法：

.getWorldDirection( vector ) — 参数可选，返回代表相机方向的一个在世界空间中的矢量。

.lookAt( vector ) — vector为观察点，设定相机在全局空间中的位置。

.clone( camera ) — 返回一个相机的克隆。

注：camera 的 position、up、lookAt的区别：position表示相机的位置，up表示相机以哪个方向为上方，lookAt表示相机看向哪个坐标。

Threejs提供的相机有正交相机 OrthographicCamera、透视相机 PerspectiveCamera、全景相机 CubeCamera 和 3D相机 StereoCamera。主要介绍正交相机和透视相机。

正交相机 OrthographicCamera

正交相机重在表现物体的实际尺寸，没有近大远小的效果；一般是用在制图、建模上面。

构造函数：

var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

参数：

left — 可被渲染空间的左平面，比这个左侧边界更远的对象不会被渲染

right — 可被渲染空间的右平面

top — 可被渲染空间的最上面

bottom — 可被渲染空间的最下面

near — 基于相机所在的位置，从这一点开始渲染场景

far — 基于相机所在的位置，一直渲染到场景中的这一点