【Three.js】Three.js学习记录

摘要：上帝觉得缺少了些生气，便用泥巴捏了一个小人儿，不叫亚当，她叫小芳。接下来预先恭喜你，你可以成为这网页世界的一个小上帝。使用可以向场景中发射光线。在下述案例中，从摄像机的位置向场景中鼠标的点击位置发射光线。

先得摆出几个关键词：场景、灯光、模型、材质、贴图与纹理、相机、渲染器。
然后我开始装模作样地解释：

上帝说，要有场景！于是就有了场景，场景去纳这万事万物。 上帝说，要有光！于是就有了光，灯光去现这大千世界，否则一片漆黑。
上帝觉得缺少了些生气，便用泥巴捏了一个小人儿，不叫亚当，她叫小芳。 上帝左看右看，上看下看，这小芳果然生得俊俏，五官精致加长腿，此曰模型;
虽然小芳不是水做的，却也在这晨光的照射下显得皮肤吹弹可破，此曰材质；
上帝莫名竟害羞了，挥手便给他穿上一件花格子长裙，配上了乌黑的长发，此曰贴图与纹理；
上帝嘴角不扬却满心欣喜，他默默注视着自己的作品，上帝视角仿佛定格在了这一瞬间，这上帝之眼就是相机；
上帝之所见如何，由世界入眼之后大脑冥想计算所得，这智慧高效的大脑就是渲染器。 接下来预先恭喜你，你可以成为这网页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)
}