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

2024年2月18日 201次阅读 来源: super_me

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

上帝说，要有场景！于是就有了场景，场景去纳这万事万物。 上帝说，要有光！于是就有了光，灯光去现这大千世界，否则一片漆黑。

上帝觉得缺少了些生气，便用泥巴捏了一个小人儿，不叫亚当，她叫小芳。 上帝左看右看，上看下看，这小芳果然生得俊俏，五官精致加长腿，此曰模型;

虽然小芳不是水做的，却也在这晨光的照射下显得皮肤吹弹可破，此曰材质；

上帝莫名竟害羞了，挥手便给他穿上一件花格子长裙，配上了乌黑的长发，此曰贴图与纹理；

上帝嘴角不扬却满心欣喜，他默默注视着自己的作品，上帝视角仿佛定格在了这一瞬间，这上帝之眼就是相机；

上帝之所见如何，由世界入眼之后大脑冥想计算所得，这智慧高效的大脑就是渲染器。 接下来预先恭喜你，你可以成为这网页3D世界的一个小上帝。

【此段转自https://juejin.im/post/5b0ace… 】

  1. 相机和轨迹球（trackball）的绑定

    1. 导入obj 和mtl文件时 纹理问题，是否可以在3ds max 时预先进行处理
    2. obj文件导入 Three.js中旋转点的设定
    3. dat.GUI
    4. Three.js中有两种材质可以对光源产生反应：MeshLamberMaterial和 MeshPhoneMaterial
    5. 渲染阴影需要在渲染器、每一个物体以及每一个光源上打开。生成阴影：renderer.shadowMapEnabled=true;只修改此处不会有区别，还要明确那个物体需要阴影：plane.receiveShadow = true;cube.castShadow = true;sphere.castShadow = true;
    6. 一般来说不把环境光（AmbientLight）作为场景中的唯一光源
    7. 环境光光源可以附加到场景中的每一个物体上，没有位置的概念，主要用来优化硬生生的 颜色和阴影
    8. 点光源（PointLight）照所有方向发射光线且不会产生投影，类似于夜空中的照明弹
    9. 聚光灯光源（SpotLight），发射出的光线是一个锥形，可以配置随着距离远近光线强度的衰减且可设置阴影
    10. 方向光/平行光（DirectinaLight）：模拟太阳光源，所有光线相互平行，不会像聚光灯那样离目标越远越暗淡，和聚光灯光源有很多相同属性。
    11. 两种特殊光源：半球光光源（HemisphereLight），为室外场景创建更加自然的光照效果；平面光光源（AreaLight），从一个很大的平面发射光线，而不是一个点。对性能要求略高，可以使用WebGL延迟渲染器
    12. 对光照有影响的材质：MeshPhongMaterial和MeshLambertMaterial

    13. 鼠标作为 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

  1. 首先要知道动画的实现原理，其实就是一个循环绘制．你要实现一个鼠标移到绘图区物体停止转动，添加一个鼠标事件监控鼠标位置,然后停止动画操作即可．

    1. THREE.Line几何体不可以用普通材质覆盖，只能用THREE》LineBasicMaterial或THREE.LineDashedMaterial
    2. OpenGL、WebGL、JS、H5联系：https://blog.csdn.net/vanessa…
    3. WebGL：https://webglfundamentals.org…
    4. 中文手册：http://techbrood.com/threejs/…
    5. 入门详解：https://segmentfault.com/a/11…
    6. 捕获点击对象（Raycaster类）：https://blog.csdn.net/darkpro…://www.cnblogs.com/w-wanglei/p/6821036.html
    7. WebGL绝佳案例：https://segmentfault.com/a/11…
    8. 加载模型选中案例：http://127.0.0.1:8080/examples/#webgl_postprocessing_outline
    9. three.js 性能优化：https://chenjy1225.github.io/…
    10. OBJ文件格式详解：https://blog.csdn.net/szchtx/…
    11. Blender基本操作：https://blog.csdn.net/superli…://blog.csdn.net/bulademian/article/details/78623900
    12. 自适应窗体大小
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)
}
    原文作者：super_me
    原文地址: https://segmentfault.com/a/1190000017923673
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞