共计 3683 个字符，预计需要花费 10 分钟才能阅读完成。
导入 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, // 两面可见
});