共计 2601 个字符，预计需要花费 7 分钟才能阅读完成。
先得摆出几个关键词：场景、灯光、模型、材质、贴图与纹理、相机、渲染器。然后我开始装模作样地解释：
上帝说，要有场景！于是就有了场景，场景去纳这万事万物。上帝说，要有光！于是就有了光，灯光去现这大千世界，否则一片漆黑。上帝觉得缺少了些生气，便用泥巴捏了一个小人儿，不叫亚当，她叫小芳。上帝左看右看，上看下看，这小芳果然生得俊俏，五官精致加长腿，此曰模型; 虽然小芳不是水做的，却也在这晨光的照射下显得皮肤吹弹可破，此曰材质；上帝莫名竟害羞了，挥手便给他穿上一件花格子长裙，配上了乌黑的长发，此曰贴图与纹理；上帝嘴角不扬却满心欣喜，他默默注视着自己的作品，上帝视角仿佛定格在了这一瞬间，这上帝之眼就是相机；上帝之所见如何，由世界入眼之后大脑冥想计算所得，这智慧高效的大脑就是渲染器。接下来预先恭喜你，你可以成为这网页 3D 世界的一个小上帝。
【此段转自 https://juejin.im/post/5b0ace…】
相机和轨迹球（trackball）的绑定
导入 obj 和 mtl 文件时 纹理问题，是否可以在 3ds max 时预先进行处理
obj 文件导入 Three.js 中旋转点的设定
dat.GUI
Three.js 中有两种材质可以对光源产生反应：MeshLamberMaterial 和 MeshPhoneMaterial
渲染阴影需要在渲染器、每一个物体以及每一个光源上打开。生成阴影：renderer.shadowMapEnabled=true; 只修改此处不会有区别，还要明确那个物体需要阴影：plane.receiveShadow = true;cube.castShadow = true;sphere.castShadow = true;
一般来说不把环境光（AmbientLight）作为场景中的唯一光源
环境光光源可以附加到场景中的每一个物体上，没有位置的概念，主要用来优化硬生生的 颜色和阴影
点光源（PointLight）照所有方向发射光线且不会产生投影，类似于夜空中的照明弹
聚光灯光源（SpotLight），发射出的光线是一个锥形，可以配置随着距离远近光线强度的衰减且可设置阴影
方向光 / 平行光（DirectinaLight）：模拟太阳光源，所有光线相互平行，不会像聚光灯那样离目标越远越暗淡，和聚光灯光源有很多相同属性。
两种特殊光源：半球光光源（HemisphereLight），为室外场景创建更加自然的光照效果；平面光光源（AreaLight），从一个很大的平面发射光线，而不是一个点。对性能要求略高，可以使用 WebGL 延迟渲染器
对光照有影响的材质：MeshPhongMaterial 和 MeshLambertMaterial
鼠标作为 PC 端（移动端中的触摸）的主要交互方式，我们经常会通过它来选择页面上的元素。而对于 Three.js，它没有类似 DOM 的层级关系，并且处于三维环境中，那么我们则需要通过以下方式来判断某对象是否被选中。
* 基于屏幕上的点击位置创建一个 THREE.Vector3 向量。
* 使用 vector.unproject 方法将屏幕上的点击位置转换成 Three.js 场景中的坐标。换句话说，就是将屏幕坐标转换成三维场景中的坐标。
* 创建 THREE.Raycaster。使用 THREE.Raycaster 可以向场景中发射光线。在下述案例中，从摄像机的位置（camera.position）向场景中鼠标的点击位置发射光线。
* 使用 raycaster.intersectObjects 方法来判断指定的对象中哪些被该光线照射到的，返回包含了所有被光线照射到的对象信息的数组（根据距离摄像机距离，由短到长排序）。数组的子项的信息包括有：
distance: 49.90470
face: THREE.Face3
faceIndex: 4
object: THREE.Mesh
point: THREE.Vector3
首先要知道动画的实现原理，其实就是一个循环绘制．你要实现一个鼠标移到绘图区物体停止转动，添加一个鼠标事件监控鼠标位置, 然后停止动画操作即可．
THREE.Line 几何体不可以用普通材质覆盖，只能用 THREE》LineBasicMaterial 或 THREE.LineDashedMaterial
OpenGL、WebGL、JS、H5 联系：https://blog.csdn.net/vanessa…
WebGL：https://webglfundamentals.org…
中文手册：http://techbrood.com/threejs/…
入门详解：https://segmentfault.com/a/11…
捕获点击对象（Raycaster 类）：https://blog.csdn.net/darkpro…://www.cnblogs.com/w-wanglei/p/6821036.html
WebGL 绝佳案例：https://segmentfault.com/a/11…
加载模型选中案例：http://127.0.0.1:8080/examples/#webgl_postprocessing_outline
three.js 性能优化：https://chenjy1225.github.io/…
OBJ 文件格式详解：https://blog.csdn.net/szchtx/…
Blender 基本操作：https://blog.csdn.net/superli…://blog.csdn.net/bulademian/article/details/78623900
自适应窗体大小
window.addEventListener(‘resize’, onResize, false)
function onResize () {
// 设置透视摄像机的长宽比
camera.aspect = window.innerWidth / window.innerHeight
// 摄像机的 position 和 target 是自动更新的，而 fov、aspect、near、far 的修改则需要重新计算投影矩阵（projection matrix）
camera.updateProjectionMatrix()
// 设置渲染器输出的 canvas 的大小
renderer.setSize(window.innerWidth, window.innerHeight)
}
