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 — 基于相机所在的位置，一直渲染到场景中的这一点

这六个参数分别代表正交相机拍摄到的空间的六个面的位置，这六个面围成一个长方体，我们称为视景体 (Frustum)。只有在视景体内部的物体才可能显示在屏幕上，而视景体外的物体会在显示之前被裁减掉。

属性：

.zoom — 获取和设置相机缩放因子。

.left, .right, .top, .bottom, .near, .far — 相机视椎体左面,右面,上面,下面,前面,后面。

方法：

.setViewOffset( fullWidth, fullHeight, x, y, width, height )

     fullWidth — 多视图设置的全宽

     fullHeight — 多视图设置的全高

     x — 副摄像头的水平偏移

     y — 副摄像头的垂直偏移

     width — 副摄像头的宽度

     height — 副摄像头的高度

 该方法用于在一个较大的视椎体中设置视图偏移。这对于多窗口或多监视器/多机设置是有用的。

 比如，有一组3x2显示屏，每个屏幕分辨率为 1920x1080，显示屏位于一个网格中，如下：

  

 然后对于每个显示屏，可以如下调用：

var w = 1920;
var h = 1080;
var fullWidth = w * 3;
var fullHeight = h * 2;

// A
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
// B
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
// C
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
// D
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
// E
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
// F
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );

 注意，没有任何理由在一个网格中的显示屏必须具备同样的尺寸。

.clearViewOffset( ) — 清除视图偏移。

.updateProjectionMatrix( ) — 更新相机投影矩阵，必须在参数发生变化后调用。

.clone( ) — 返回一个 OrthographicCamera 对象的克隆。

.toJSON( ) — 把相机数据转换成JSON格式。

透视相机 PerspectiveCamera

透视相机更接近人眼的观看效果，有“近大远小”的效果。应用比较广泛，只要不是正交的应用，基本上使用透视相机就可以了。

构造函数：

var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

参数：

fov 视角 — 人差不多有180度的视角，但计算机显示器一般会选择一块儿较小的区域。对于游戏来说，大多数情况下会用60-90度左右的视角。推荐默认值：45。

aspect 长宽比 — 渲染区域的长宽比。一般会使用整个窗口作为输出界面。推荐默认值：window.innerWidth/window.innerHeight。

near 近面 — 相机开始渲染场景的地方，通常会设一个很小的值，从而可以看到所有物体。推荐默认值：0.1。

far 远面 — 相机结束渲染场景的地方，如果值太低，场景中的一部分可能不会被渲染；如果值太高，某些情况下会影响渲染效率。推荐默认值：1000。

属性：

.fov — 相机视椎体垂直视角，从下到上的观察角度。

.zoom — 获取或设置相机缩放因子。

.near, .far — 相机视椎体近裁剪面，远裁剪面。

.focus — 焦点，用于立体视觉和场深度效果的目标距离。

.aspect — 相机视椎体宽高比。

.view — 视椎体窗口规格或null。

.filmGauge — 用于较大坐标轴的胶片尺寸。默认为35毫米。

.filmOffset — 水平偏离中心偏移量。和 .filmGauge 同单位。

方法：

.getEffectiveFOV( )  — 返回考虑了缩放系数 .zoom 的当前视角，单位为角度。

.getFocalLength( ) — 返回当前和 .filmGauge 有关的 .fov 的焦距。

.getFilmWidth( ) — 返回胶片上图像的宽度。如果 .aspect >= 1(景观格式 landscape format)，结果等于 .filmGauge。

.getFilmHeight( ) — 返回胶片上图像的高度。如果 .aspect <=1(肖像格式 portrait format)，结果等于 .filmGauge。

.setFocalLength( focalLength ) — 设置当前和 .filmGauge 有关的 .fov 的焦距。默认为35mm。

.setViewOffset( fullWidth, fullHeight, x, y, width, height ) — 同 OrthographicCamera。

.clearViewOffset( ), .updateProjectionMatrix( ), .clone( ), .toJSON — 同 OrthographicCamera。

渲染器 renderer

渲染器决定了渲染的结果应该画在元素的什么元素上面，并且以怎样的方式来绘制。

Threejs中提供了很多的渲染方式，主要介绍 CanvasRenderer 、WebGLRenderer两种。

注：CanvasRenderer 和 WebGLRenderer 都是使用HTML5的 <canvas> 直接内嵌在网页中。Cavas渲染器中的“Canvas”表示使用Canvas 2d而不是WebGL。

WebGLRenderer

WebGL渲染器使用WebGL来绘制场景(如果设备支持)，使用WebGL能够利用GPU硬件加速从而提高渲染性能。

构造函数：

var renderer = new THREE.WebGLRenderer(parameters);

参数：

parameters — 是一个可选对象，包含用来定义渲染器行为的属性。没有设置该参数时，使用默认值。

parameters对象里可包含以下属性:

  antialias — Boolean，默认为false。是否开启反锯齿。

  precision — highp/mediump/lowp，默认为highp。着色器的精度。

  alpha — Boolean，默认为false。是否可以设置背景色透明。

  premultipliedAlpha — Boolean，默认为true。是否允许渲染器中的颜色具有alpha预乘的效果。

  preserveDrawingBuffer — Boolean，默认为false。是否保存绘图缓冲，直到手动清除或覆盖。

  stencil — Boolean，默认为true。绘图缓冲区是否具有至少8位的模板缓冲区。

  depth — Boolean，默认为true。绘图缓冲区是否具有至少16位的深度缓冲区。

  logarithmicDepthBuffer — Boolean，默认为false。是否使用对数深度缓冲区。

属性：

.domElement — 用来绘制输出的Canvas对象。通过构造函数中的渲染器自动创建，添加到网页中即可。

.context — 从HTML5 canvas 中获取的用来绘图的WebGL渲染上下文。

.autoClear — 定义渲染器是否应该在渲染之前自动清除其输出。

.autoClearColor — 如果autoClear为true，该属性用来定义渲染器是否需要清除颜色缓存，默认为true。

.autoClearDepth — 如果autoClear为true，该属性用来定义渲染器是否需要清除深度缓存，默认为true。

.autoClearStencil — 如果autoClear为true，该属性用来定义渲染器是否需要清除模板缓存，默认为true。

.sortObjects — 定义渲染器是否需要对象排序，默认为true。

    注：排序是用来试图正确的渲染具有一定程度透明度的对象。根据定义，排序对象可能在所有情况下都不工作。根据应用程序的需要，可能需要关闭该排序功能，使用其他方法处理透明渲染，比如手动确定物体的绘制顺序。  

.clippingPlanes — 用户定义的在世界空间中的裁剪平面对象。这些平面是全局范围可用的。空间中的点和该平面的点积为负的将被裁剪掉。默认为[]。

.localClippingEnabled — 定义渲染器是否考虑对象级别的裁剪平面。默认为false。

.gammaInput — 所有纹理和颜色是否使用预乘的gamma值来输入。默认为false。

.gammaOutput — 所有纹理和颜色是否使用预乘的gamma值来输出。默认为false。

.shadowMap — 实现阴影贴图(或阴影映射)的组件的引用。

.shadowMap.enabled — 是否启用在场景中的阴影贴图。默认为false。

.shadowMap.type — 阴影贴图类型定义(未经过滤,百分比接近过滤,带着色器双线性过滤的百分比接近过滤)。

   — 可选值：THREE.BasicShadowMap，THREE.PCFShadowMap，THREE.PCFSoftShadowMap。

   — 默认为THREE.PCFShadowMap。

.shadowMap.renderReverseSided — 默认为true。是否将材质所指定的反面渲染到阴影贴图中。如果禁用，必须在表面光源上设置适当的shadow.bias，可以同时投射和接收阴影以正确渲染。

.shadowMap.renderSingleSided — 默认为true。是否将指定的材料视为双面，而在渲染阴影贴图时使用正面(front-side)。如果禁用，必须在表面光源上设置适当的shadow.bias，可以同时投射和接受阴影以正确渲染。

.maxMorphTargets — 默认为8。着色器中允许的最大MorphTargets数量。标准材料只允许8个MorphTargets。

.maxMorphNormals — 默认为4。着色器中允许的最大MorphNormals数量。标准材料只允许8个MorphNormals。

.info — 关于显卡内存和渲染过程统计信息的对象。便于调试和分析。该对象包含以下字段：memory(geometries、textures)、render(calls、vertices、faces、points)、programs。

方法：

.getContext( ) — 返回WebGL渲染上下文。

.getContextAttributes — 返回描述WebGL上下文创建时所设置属性的对象。

.supportsVertexTextures( ) — 返回Boolean值，如果该上下文支持顶点纹理，则为true。

.getPixelRatio( ) — 返回当前设备的像素比。

.setPixelRatio( value ) — 设置设备像素比。通常用于HiDPI设备防止模糊输出canvas。

.getSize( ) — 返回包含渲染器输出canvas宽高的对象，以像素为单位。

.setSize( width,height,updateStyle ) — 调整输出canvas尺寸，要考虑设备像素比，并设置视口匹配该尺寸。如果设置updateStyle为true，则显示添加像素到输出canvas的样式中。

.setViewport( x,y,width,height ) — 设置视口，从(x,y)到(x+width,y+height)。

.setScissor( x,y,width,height) — 设置剪裁区域，从(x,y)到(x+width,y+height)。

注：setViewport 和 setScissor 方法中的(x,y)是该区域的左下角。该区域被定义从左到右的宽度，以及从底部到顶部的高度。该垂直方向的定义和HTML canvas元素的填充方向相反。

.setScissorTest( ) — Boolean，启用或禁用裁剪测试。被激活时，只有裁剪区域内的像素会被进一步的渲染行为所影响。

.setClearColor( color,alpha ) — 设置清除的颜色和透明度。

.getClearColor( ) — 返回使用当前清除颜色的THREE.Color实例。

.getClearAlpha( ) — 返回使用当前清除透明度的float。范围 0-1。

.clear( color,depth,stencil ) — 使渲染器来清除其颜色、深度和模板绘制缓冲。该方法初始化颜色缓冲区为当前清除颜色值。

.renderBufferImmediate( object,program,shading ) — 渲染一个即时缓冲区。被renderImmediateObject所调用。

object — 3D对象实例(Object3D)

program — 着色器程序实例(shaderProgram)

shading — 材料实例(Material)

.renderBufferDirect( camera,lights,fog,material,geometryGroup,object ) — 使用相机和正确的材料渲染缓冲模型组。

.renderBuffer(camera,lights,fog,material,geometryGroup,object) — 使用相机和正确的材料渲染模型组。

.render( scene,camera,renderTarget,forceClear ) — 使用相机渲染一个场景。

— 如果指定了renderTarget，则渲染到上面，否则渲染到通常的canvas上。

— 如果forceClear为true，颜色、深度和模板绘制缓冲将在渲染前被清除，即使渲染器的autoclear属性为false。

— 即使forceClear 设为true，仍然可以通过设置 .autoClearColor, .autoClearStencil, .autoClearDepth 属性为false来阻止特定的缓存被清除。

.readRenderTargetPixels( renderTarget,x,y,width,height,buffer ) — 从渲染目标中读取像素数据到给定的缓冲区中。缓存应该是一个js Uint8Array对象，通过new Uint8Array( renderTargetWidth * renderTargetWidth * 4 )来实例化，考虑大小和颜色信息。

.renderImmediateObject( camera,lights,fog,material,object ) — 使用相机渲染即时对象。

.setFaceCulling( cullFace,frontFace ) — 用于设定GPU中gl的fontFace和cullFace状态，从而启用或禁用渲染时的面剔除。

cullFace — back / front / front_and_back / false

frontFace — ccw / cw

.setTexture( texture,slot ) — 设置正确的纹理为webgl着色器的正确插槽。插槽可以作为一个值的均匀的采样。

texture — 需要设置的texture

slot — 纹理所要使用的槽slot编号。

.setRenderTarget( renderTarget ) — 设置当前渲染目标。如果参数被忽略，设置绘制的canvas为当前渲染目标。

.supportsCompressedTextureS3TC( ) — 如果WebGL支持S3TC格式的纹理压缩，返回true。

.getMaxAnisotropy( ) — 返回纹理的各向异性水平。

.getPrecision( ) — 获取着色器作用精度，返回 highp / mediump / lowp。

.clearTarget( renderTarget,color,depth,stencil ) — 清除渲染目标。

renderTarget — 需要被清除的renderTarget。

color — 如果设置，颜色被清除。

depth — 如果设置，深度被清除。

stencil —如果设置，模板被清除。

CanvasRenderer

Canvas渲染器不使用WebGL来绘制场景，使用相对较慢的Canvas 2D Context API。

构造函数：

var renderer = new THREE.CanvasRenderer();

在不确定浏览器是否支持WebGL渲染器的时候，可以通过以下代码来实现渲染器的选择：

function webglAvailable() {
    try {
	var canvas = document.createElement( 'canvas' );
	return !!( window.WebGLRenderingContext && (canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ));
    } catch ( e ) {
	return false;
    }
}
if ( webglAvailable() ) {
    renderer = new THREE.WebGLRenderer();
} else {
    renderer = new THREE.CanvasRenderer();
}

注：WebGLRenderer 和 CanvasRenderer 都是使用HTML5中的 <canvas>直接内嵌在网页中。Canvas渲染器中的“Canvas”表明其使用Canvas 2D 而不是 WebGL。

Okay，Threejs 必备的3个组件总结完毕。