【Three.js】Three.js进修纪录

2023年4月5日 126次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞