three.js快速指南

最近开始学习three.js来做一些3D效果，对于学习过程中的一些知识点做必要的记录，方便后续查阅参考。

three.js ：JavaScript 3D库，更简单、更轻量级。这个库提供了、

构建场景的基本组件

相机、光源、物体

场景相关函数/属性

add(object)
children
getChildByName(name)
remove(object)
traverse(function)
fog
overrideMaterial

使用几何体和网格

TODO

选择合适的相机

TODO

光源

AmbientLight:环境光，它的颜色会添加到整个场景和所有对象的当前颜色上
PointLight:点光源：空间中的一点，朝所有的方向发射光线
SpotLight:聚光灯光源，类似台灯、手电筒
DirectionLight:方向光，也称作无限光。从这种光源发出的光线可以认为是平行的。例如太阳光
HemisphereLight:半球光，用来创建更加自然的室外光线，模拟反光面和光线微弱的天空。
AreaLight:面光源
LensFlare:镜头炫光，这不是一种光源，但是通过它可以为场景中的光源增加炫光效果

材质

Three.js中有一个材质基类：THREE.Material，这个基类列出了材质的共有属性，主要分为三类：
基础属性：这些属性是最常用到的。用来控制物体的透明度、是否可见或如何引用物体
融合属性：每个物体都有一系列的融合属性，这些属性决定物体如何与背景融合
高级属性：有一些高级属性可以控制底层WebGL上下文渲染物体的方法。

基础属性

ID：用来标识材质，在创建时赋值
name:赋予材质名称
opacity：透明度，取值范围0~1
transparent：如果设置为true，Three.js根据opacity来渲染物体。如果false，这个物体就不透明。
overdraw:过渡描绘。如果用THREE.CanvasRenderer对象，多边形渲染会偏大。有缝隙时，将该值设置为true
visible:是否可见
side:侧面。通过这个属性，可以决定在几何体的哪一面应用这个材质。默认值是THREE.FrontSide。（BackSide,DoubleSide）
needsUpdate:是否刷新。如果设为true,Three.js就会使用新的材质属性刷新它的缓存

融合属性

blending:融合。一般是NormalBlending,在这种模式下，只显示材质的上层
blendsrc:融合源，除了使用标准融合模式之外，还可以创建自定义的融合模式。该属性指定物体如何跟背景相融合，默认值是SrcAlphaFactor,即使用alpha透明度通道进行融合
blenddst:默认值OneMinusSrcAlphaFactor。含义是：目标也使用源的alpha通道进行融合，只是用的值是1
blendingequation:融合公式，指定如何使用blendsrc和blenddst的值。默认是addEquation,即将两个颜色值相加。

MeshBasicMaterial:网格基础材质
不考虑光照的影响，使用这种材质的网格会被渲染成一些简单的平面多边形
MeshDepthMaterial:网格深度材质
使用这种材质的物体，其外观不是由光照或某个材质属性决定的；而是由物体到相机的距离决定的。
MethNormalMaterial:网格法向材质
MeshFaceMaterial:网格面材质
MeshLambertMaterial:网格郎伯材质
MeshPhongMaterial:网格Phong式材质
ShaderMaterial:着色器材质
LineBasicMaterial：直线基础材质
LineDashedMaterial:虚线材质
注：可以为一个几何体赋予多种材质。这样做会复制几何体，从而创建出多个网格。

几何体

二维

PlaneGeometry:平面
CircleGeometry:圆形
ShapeGeometry:塑形

三维

CubeGeometry:立方体
SphereGeometry:球体
CylinderGeometry:圆柱
TorusGeometry:圆环（甜甜圈）
TorusKnotGeometry:环面纠结（麻花）

PolyhedronGeometry:多面体,传入顶点、面、半径和detail参数
多面体可以使用几个开箱即用的：
IcosahedronGeometry:二十面体
OctahedronGeometry:八面体
TetrahedronGeometry:四面体

高级几何体

ConvexGeometry:凸面体
TODO