threejs一些基础

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