three.js总结

更多内容，见个人博客

一、three.js简介

three.js，即three + js 。three代表3D的意思，js代表
JavaScript的意思。也就说：three.js是使用JavaScript来写3D程序的意思。

二、项目需要

这个项目要实现的是在大屏上对人脸识别过程进行数据可视化展示，我们通过一些代码，更形象的展示，让人们能够直观的看到这一过程，更容易理解。

三、入门

创建一个场景：绿色正方体

1、三大组建

在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能使用相机将场景渲染到网页中去。
代码：

var scene = new THREE.Scene(); //场景
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); //相机

var renderer = new THREE.WebGLRenderer();//渲染器
renderer.setSize( window.innerWidth,  window.innerHeight );  // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
document.body.appendChild( renderer.domElement );

2、相机：

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

场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。
这里使用最常见的远景相机（PerspectiveCamera），也就是类似于人眼观察的方式。第一个属性75设置的是视角（field of view）。
第二个属性设置的是相机拍摄面的长宽比（aspect ratio）。我们几乎总是会使用元素的宽除以高，否则会出现挤压变形。
接下来的2个属性是近裁剪面（near clipping plane） 和 远裁剪面（far clipping plane）。下面这张图可以帮助你理解：

这几个参数所限定的绿色3D空间被称之为视椎体（View Frustum），用来裁剪视图，在该视锥体以外的物体将不会被渲染。

3、渲染器

渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。
除了创建renderer实例，我们还需要设置渲染空间的尺寸，一般就使用目标屏幕的宽高（window.innerWidth和window.innerHeight），也可以给定一个小尺寸。
如果你想保持渲染空间的尺寸，但使用一个较低的分辨率，你可以在调用setSize的时候设置参数updateStyle为false，比如 setSize(window.innerWidth/2, window.innerHeight/2, false) 将使用1/2分辨率来绘制你的应用程序，假定< canvas>为100%的宽高。
最后，我们把 renderer 元素添加到HTML文档中。这里是一个 < canvas> 元素，渲染器用来显示场景。

4、添加物体到场景中

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

为了创建一个立方体，我们需要使用盒子模型（BoxGeometry），这是一个包含立方体所有顶点和填充面的对象。
除了这个几何模型（geometry）外，我们还需要一个材料（material）来对其着色。Three.js支持多种材料，现在我们只使用 网孔基础材料（MeshBasicMaterial）。 所有材料都含有一个属性对象。这里简单起见，我们只提供了颜色值为0x00ff00，表示绿色。这和CSS和Photoshop中16进制颜色值一样。
第3件事是我们需要一个网孔(Mesh)。网孔是用来承载几何模型的一个对象，还可以把材料应用到它上面，然后添加到场景中完成旋转动画。
默认情况下，当我们调用 scene.add() 时，对象将被添加到原点处，即坐标点(0,0,0)，这将导致相机和立方体发生空间重叠。为了避免这样，我们把相机（camera）的位置移出来一些。

5、渲染

渲染应该使用渲染器，结合相机和场景来得到结果画面。实现这个功能的函数是
renderer.render(scene, camera);
渲染函数的原型如下：
render( scene, camera, renderTarget, forceClear )
各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。

6、渲染循环

渲染有两种方式：实时渲染和离线渲染 。
离线渲染
事先渲染好一帧一帧的图片，然后再把图片拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片，那么电影播放得会很卡。CPU和GPU根本没有能力在播放的时候渲染出这种高质量的图片。
实时渲染
就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。下面就是一个渲染循环：

function render() {
	requestAnimationFrame( render );
	cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
	renderer.render( scene, camera );
}
render();

requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，比如浏览器Tab切换后停止渲染以节约资源、和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。

四、场景，相机，渲染器之间的关系

Three.js中的场景是一个物体的容器，开发者可以将需要的角色放入场景中，例如苹果，葡萄。同时，角色自身也管理着其在场景中的位置。

相机的作用就是面对场景，在场景中取一个合适的景，把它拍下来。

渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。他们三者的关系如下图所示：