threejs

Introduction

three.js是基于webGL的一种为HTML5 Canvas提供硬件3D加速渲染的js库。
webGL是3D绘图协议，协议的主要内容就是将JavaScript和OpenGL结合到一起，通过增加OpenGLES2.0的一个JavaScript绑定，webGL可以为html5和canvas提供硬件3D加速渲染。
OpenGL是一个用于渲染2D和3D矢量图形的API，OpenGL不做的是保留有关“对象”的信息，所以OpenGL每次都是绘制所需绘制的所有内容。OpenGL可以和一些存在仅用于更新屏幕的一部分的技术来结合，实现部分更新的功能。

webgl、three.js、canvas区别与联系

canvas是html5新定义的一个标签，用于做图形容器
webgl要依赖canvas运行。
three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。

更新机制

three.js中默认所有添加到场景中的对象，或者它们是已添加到场景中的另一个对象的子节点都会更新矩阵。如果不希望对象在加入场景时自动更新，则可以进行手动刷新。
object3D的matrixAutoUpdate属性对于所有它的子类都生效，不会因为它是否为某个对象的子节点而不同。object3D的updateMatrix()方法是自动更新scene中的添加的对象的整体，不是部分更新。
`
object.matrixAutoUpdate = false;
object.updateMatrix();

`

three.js中可以采用BufferGeometry将信息存在类数组中，提高读写的速度。这样想要动态更新则需要在第一次渲染后更改每个不同情况的对应的选项为true，来动态控制每次更改的刷新，否则设置bufferGeometry后，对应的标志位都会变更为false。

`
line.geometry.attributes.position.needsUpdate = true;

geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.morphTargetsNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
geometry.tangentsNeedUpdate = true;

material.needsUpdate = true

texture.needsUpdate = true;

// 相机的位置和目标都会自动更新，但是改变相机的视角广度、宽高比、近截面、远截面则需要手动调用下面方法去更新。
camera.updateProjectionMatrix()

`