《Three.js 开发指南》示例说明以及在线demo（原书第二版）

《Three.js 开发指南》基于原书第二版
源码来自华章出版社官网随书源码，稍作修改。
源码以及示例说明下载： git下载地址
Three.js 官网文档

1. 用Three.js创建你的第一个三维场景

1.1 具有所有基本元素的hello world示例

2. 使用构建Three.js场景的基本组件

2.1 添加、删除、枚举、通过名字获取场景中的对象

2.2 雾化效果

2.3 材质效果覆盖

场景对象最重要的函数和属性的总结

2.4 three.js内建的几何体

2.5 自定义几何体，复制几何体

2.6 网格对象的函数和属性 position, rotation, scale, translate, visible

2.7 正投影相机和透视相机

          if (camera instanceof THREE.PerspectiveCamera) {
              camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;
              camera.lookAt(scene.position);

              trackballControls = initTrackballControls(camera, renderer);
              this.perspective = "Orthographic";
          } else {
              camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
              camera.position.x = 120;
              camera.position.y = 60;
              camera.position.z = 180;

              camera.lookAt(scene.position);
              trackballControls = initTrackballControls(camera, renderer);
              this.perspective = "Perspective";
          }

2.8 让相机在指定点上聚焦

camera.lookAt( new THREE.Vector3(x, y, z));

 
 

3 . 学习使用Three.js中的光源

新版本Three.js中PointLight已经可以创建阴影。
详细参数可以参考：
three.js光源使用详解
颜色对象方法可参考：
THREE.Color颜色对象详解

3.1 AmbientLight环境光

3.2 PointLight 点光源

3.3 SpotLight 聚光灯

3.4 DirectionalLight 方向光

3.5 HemisphereLight 半球环境光

3.6 AreaLight 区域光

3.7 LensflaresLight 光晕光

4. 使用Three.js的材质

参数配置看这里： Three.js - 材质的使用参数详解

4. 1 MeshBasicMaterial 网格基础材质

4. 2 MeshDepthMaterial 网格深度材质

4. 3 材质结合： 基础材质 + 深度材质

4. 4 MeshNormalMaterial 网格法向材质

4. 5 MeshFaceMaterial 网格面材质

4. 6 MeshLambertMaterial 网格lambert材质

4. 7 MeshPhongMaterial 网格phong材质

4. 8 ShaderMaterial 着色器材质

4. 9 LineBasicMaterial 直线基础材质

4. 10 LineDashMaterial 虚线材质

5. 学习使用几何体

简单的参数可以看这里

5. 1 二维几何体

5.1.1 PlaneGeometry 二维矩形

5.1.2 CircleGeometry 二维圆

5.1.3 RingGeometry 二维环

5.1.4 ShapeGeometry 自定义二维图形, 可以通过一些函数画出二维图形。自定义参数示例

5. 2 三维几何体

5.2.1 BoxGeometry 长方体

5.2.2 SphereGeometry 球体 可以通过设置参数获得特殊的多面体,半球，伞形

5.2.3 CylinderGeometry 圆柱体 可以通过参数获得多边形柱体

5.2.4 TorusGeometry 三维圆环

5.2.5 TorusKnotGeometry 环状扭结

5.2.6 各种多面体

其实几何体还有线性几何体，可以看上一章。