导入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, //两面可见
});