Add files via upload

puxiao · web-flow · commit edb29deb2479 · 2022-09-15T09:06:53.000+08:00
diff --git a/Three.js实用知识点笔记.md b/Three.js实用知识点笔记.md
@@ -0,0 +1,174 @@
+# Three.js实用知识点笔记
+
+从今天开始，在本文中记录实际 Three.js 开发过程中所遇到的知识点。
+
+
+
+<br>
+
+**关于示例代码的一般约定说明：**
+
+1. 举例的时候，很多都是伪代码
+2. 为了保证代码简洁，所以在实用某些类时没有添加 `Three.` 前缀
+3. 绝大多数时候都使用箭头函数
+4. 使用 Xxx 泛指同一类型，例如 XxxCamer 泛指各类相机
+
+
+
+<br>
+
+#### 01、每一个Object3D对象都只能有一个父级
+
+这里说的 Object3D 实际上包括所有继承于 Object3D 的子类，例如 Mesh、Camera、Group 等
+
+举例说明：
+
+```
+const mesh = new Mesh(geometry,material)
+
+const sceneA = new Scene()
+const sceneB = new Scene()
+
+sceneA.add(mesh)
+sceneB.add(mesh)
+```
+
+由于 mesh 只能有一个父类，所以当 sceneB 也执行 .add(mesh) 后，sceneA.children 中会自动删除掉 mesh。
+
+
+
+<br>
+
+#### 02、克隆或复制 Mesh 不会在内存中真正复制出一份 顶点(geometry)和材质(material)，它们使用的是引用，而不是复制
+
+Object3D 拥有 .clone() 和 .copy() 两个方法，Mesh 继承于 Object3D，所以也拥有这两个方法。
+
+在 Mesh 类中扩展了 .copy() 方法，但是针对 Mesh 内部的属性 顶点和材质，实用的是引用而不是真正内存中的复制。
+
+```
+const meshB = meshA.clone()
+```
+
+上述代码中新复制得到的 meshB 仅仅复制了 meshA 的一些变换相关的属性，例如 matrix 等，但是对于占内存大头的 顶点和材质 这两项实用的是引用。
+
+也就是说此时 meshA 和 meshB 它们共用了一份 geometry 和 material。
+
+> 不用担心因为多复制了几份 mesh 而增加很多内存。
+
+
+
+<br>
+
+#### 03、添加场景(scene)或其他Object3D渲染之前和渲染之后的回调函数
+
+场景 scene 继承于 Object3D，而 Object3D 可以配置 2 个渲染之前或之后的回调函数：
+
+```
+scene.onBeforeRender = () => { ...}
+scnet.onAfterRende = () => { ... }
+```
+
+使用场景举例：假设我们希望不渲染场景上的某一类元素，那么我们可以在 renderer.render() 之前通过上面 2 个回调函数进行设置
+
+```
+scene.onBeforeRender = () => {
+    scene.children.forEach(item => {
+        if(item.type === 'Points'){
+            item.visible = false
+        }
+    })
+}
+
+scene.onAfterRender = () => {
+    scene.children.forEach(item => item.visible = true)
+}
+
+renderer.render(scene,camera)
+```
+
+
+
+<br>
+
+#### 04、通过 .layers 控制物体是否被渲染
+
+在 Three.js 中 .layers 对应的是 Layers 这个类，Three.js 规定 Layers 级别的值取值范围为 0 - 32。
+
+> 你可以把 layers 翻译成 “级别”，也可以称呼为 “层级”
+
+任何继承于 Object3D 的类，例如 相机、物体 等都具有 .layers 属性。
+
+它们的 .layers 默认级别都为 0。
+
+不能通过直接给 .layers 赋值的方式修改级别，而是应该通过 .set(value) 这种形式。
+
+```
+mymesh.layers.set(1)
+camera.layers.set(1)
+```
+
+
+
+<br>
+
+对于相机而言，它只能渲染出同一级别的物体元素。
+
+```
+const meshA = new Mesh(...)
+//meshA.layers.set(0) //默认就是 0
+
+const meshB = new Mesh(...)
+meshB.layers.set(1)
+
+const scene = new Scene()
+scene.add(meshA)
+scene.add(meshB)
+
+const cameraA = new XxxCamera()
+//cameraA.layers.set(0) //默认就是 0
+
+const cameraB = new XxxCamera()
+cameraB.layers.set(1)
+```
+
+在上面代码中：
+
+1. 我们按照默认的形式添加了 meshA、cameraA，它们默认层级为 0
+2. 手动修改了  meshB、cameraB 的 .layers 层级为 1
+
+<br>
+
+那么当执行下面的代码：
+
+```
+renderer.render(scene, cameraA)
+renderer.render(scene. cameraB)
+```
+
+1. cameraA 只会渲染出场景中同一级别的 meshA
+2. cameraB 只会渲染出场景中同一级别的 meshB
+
+
+
+<br>
+
+也可以选择随时修改 meshA 的 .layers 值，这样 cameraB 就可以渲染到它了。
+
+```
+meshA.layers.set(1)
+renderer.render(secen, cameraB)
+```
+
+
+
+<br>
+
+换句话说，假设我们希望控制是否渲染场景中某些元素，那么有 2 种途径：
+
+1. 设置其 .visible 的值来决定是否渲染
+2. 设置其 .layers 的值来决定只被同一层级的相机渲染
+
+
+
+<br>
+
