导入js包
场景对象-scene
几何对象-Geometry
材质-material
网格对象-mesh（对象，材质）
光源-Light
摄像机-camera
camera.lookAt相机看的方向
渲染器-renderer
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
//执行渲染操作 指定场景、相机作为参数

renderer.render(scene, camera);

requestAnimationFrame()渲染函数
requestAnimationFrame(render);//申请再次执行渲染函数render

鼠标的管制
导入的包three.js-master\examples\js\controls\OrbitControls.js

var controls = new THREE.OrbitControls(camera,renderer.domElement);//创立控件对象
controls.addEventListener('change', render);//监听鼠标、键盘事件
和requestAnimationFrame()不能同时应用

辅助三维坐标系AxisHelper
为了不便调试预览threejs提供了一个辅助三维坐标系AxisHelper，能够间接调用THREE.AxisHelper创立一个三维坐标系，而后通过.add()办法插入到场景中即可。
threejs三维坐标系老版本名称是AxisHelper，新版本名称AxesHelper。

材质成果

半透明成果
更改场景中的球体材质对象构造函数THREE.MeshLambertMaterial()的参数，增加opacity和transparent属性，opacity的值是0~1之间，transparent示意是否开启透明度成果， 默认是false示意透明度设置不起作用，值设置为true，网格模型就会出现通明的成果，应用上面的代码替换原来的球体网格模型的材质， 刷新浏览器,通过鼠标旋转操作场景,能够看到半透明的球体和立方体色彩叠加交融的成果。

材质常见属性
wireframe-线框
opacity-透明度
transparent-是否开启通明

增加高光成果
漫反射-MeshLambertMaterial()
镜面反射-
MeshPhongMaterial()
高光成果-属性
属性specular示意球体网格模型的高光色彩改色彩的RGB值会与光照色彩的RGB重量相乘
shininess属性能够了解为光照强度的系数

光源的类型
AmbientLight-环境光
PointLight-点光源
DirectionalLight-平行光，比方太阳光
SpotLight-聚光源

光源创立-scene.add()
平面的成果
仅仅应用环境光的状况下，你会发现整个立方体没有任何棱角感，这是因为环境光常识设置整个空间的明暗成果。如果须要立方体渲染要想有平面成果，须要应用具备方向性的点光源、平行光源等。

通过光源构造函数的参数能够设置光源的色彩，个别设置明暗水平不同的白光RGB三个重量值是一样的。如果把THREE.AmbientLight(0x444444);的光照参数0x444444改为0xffffff,你会发现场景中的立方体渲染成果更亮堂。-环境光的强度

光源地位
point.position.set(0, 0, 0);
点模型Points
// 点渲染模式
var material = new THREE.PointsMaterial({
color: 0xff0000,
size: 10.0 //点对象像素尺寸
}); //材质对象
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象增加到场景中

线模型Line
// 线条渲染模式
var material=new THREE.LineBasicMaterial({

color:0xff0000 //线条色彩

});//材质对象
var line=new THREE.Line(geometry,material);//线条模型对象
scene.add(line);//线条对象增加到场景中

材质属性.vertexColors
vertexColors: THREE.VertexColors, //以顶点色彩为准
对于材质的属性.vertexColors能够查看Material文档介绍，属性.vertexColors的默认值是THREE.NoColors，这也就是说模型的色彩渲染成果取决于材质属性.color，如果把材质属性.vertexColors的值设置为THREE.VertexColors,threejs渲染模型的时候就会应用几何体的顶点色彩数据geometry.attributes.color。

属性缓冲区对象BufferAttribute
Threejs提供的接口BufferAttribute目标是为了创立各种各样顶点数据，比方顶点色彩数据，顶点地位数据，而后作为几何体BufferGeometry的顶点地位坐标属性BufferGeometry.attributes.position、顶点色彩属性BufferGeometry.attributes.color的值。

缓冲类型几何体BufferGeometry除了顶点地位、顶点色彩属性之外还有其余顶点属性，前面课程都会解说到。对于BufferGeometry更多属性和办法能够查看文档BufferGeometry。

色彩插值
如果你把几何体作为网格模型Mesh或者线模型Line构造函数的参数，你会发现渲染出突变的黑白成果。

顶点法向量
在下面顶点地位数据根底上定义顶点法向量数据，这时候除了环境光以外，点光源也会参加光照计算，三角形整个外表比拟亮堂，同时两个三角形外表法线不同，即便光线方向雷同，明暗天然不同，在分界地位有棱角感。

// 设置几何体attributes属性的地位normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,示意一个顶点的法向量数据

API应用总结
// 拜访几何体顶点地位数据
BufferGeometry.attributes.position
// 拜访几何体顶点色彩数据
BufferGeometry.attributes.color
// 拜访几何体顶点法向量数据
BufferGeometry.attributes.normal

顶点索引.index
BufferGeometry.index定义了一个矩形。通过顶点索引组织网格模型三角形的绘制，因为矩形的两个三角形有两个顶点地位反复，所以顶点地位数据、顶点法向量数据都只须要定义4个就能够。

通过顶点索引组织顶点数据，顶点索引数组indexes通过索引值指向顶点地位geometry.attributes.position、顶点法向量geometry.attributes.normal中顶面数组。

Vector3定义顶点地位坐标数据
Vector3是threejs的三维向量对象,能够通过Vector3对象示意一个顶点的xyz坐标，顶点的法线向量。

几何体Geometry和缓冲类型几何体BufferGeometry表白的含意雷同，只是对象的构造不同，Threejs渲染的时候会先把Geometry转化为BufferGeometry再解析几何体顶点数据进行渲染。

几何体Geometry的顶点地位属性geometry.vertices和缓冲类型几何体BufferGeometry顶点地位属性BufferGeometry.attributes.position是对应的。

Color定义顶点色彩数据
通过threejs顶点色彩对象Color能够定义几何体顶点色彩数据，而后顶点色彩数据形成的数组作为几何体Geometry顶点色彩属性geometry.colors的值。

几何体Geometry的顶点色彩属性geometry.colors和缓冲类型几何体BufferGeometry顶点色彩属性BufferGeometry.attributes.color是对应的。

留神设置几何体Geometry顶点色彩属性geometry.colors，对网格模型Mesh是有效的，对于点模型Points、线模型Line是有成果。

留神应用顶点色彩数据定义模型色彩的时候，要把材质的属性vertexColors设置为THREE.VertexColors,这样顶点的色彩数据能力取代材质色彩属性.color起作用。
//材质对象
var material = new THREE.MeshLambertMaterial({
// color: 0xffff00,
vertexColors: THREE.VertexColors, //以顶点色彩为准
side: THREE.DoubleSide, //两面可见
});