threejs 重要的概念、术语

Three.js 是一个功能强大的 JavaScript 库，用于创建和展示基于 WebGL 的三维图形。以下是 Three.js 中一些重要的概念和术语的介绍：

---

1. 场景（Scene）

• 定义：场景是所有三维对象的容器，用于存储和管理几何体、光源、相机等元素。
• 作用：场景是渲染的基础，所有需要显示的对象都必须添加到场景中。
• 创建：

  const scene = new THREE.Scene();
  

---

2. 相机（Camera）

• 定义：相机定义了从哪个视角观察三维场景。
• 常见类型：
  • 透视相机（PerspectiveCamera）：模拟人眼透视效果，远处物体看起来更小。

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    

  • 正交相机（OrthographicCamera）：不考虑透视效果，所有物体大小一致。

    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);
    

---

3. 渲染器（Renderer）

• 定义：渲染器负责将场景和相机中的内容绘制到屏幕上。
• 常用渲染器：THREE.WebGLRenderer 是最常用的渲染器。
• 创建：

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  

---

4. 几何体（Geometry）

• 定义：几何体定义了物体的形状。
• 常见几何体：
  • BoxGeometry：立方体。
  • SphereGeometry：球体。
  • PlaneGeometry：平面。
  • BufferGeometry：更高效的自定义几何体。
• 创建：

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  

---

5. 材质（Material）

• 定义：材质定义了物体的外观属性，如颜色、纹理、反射等。
• 常见材质：
  • MeshBasicMaterial：基础材质，不考虑光照。
  • MeshLambertMaterial：漫反射材质，适合哑光表面。
  • MeshPhongMaterial：高光材质，适合光滑表面。
  • MeshStandardMaterial：基于物理的材质，适合现代渲染效果。
• 创建：

  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  

---

6. 网格（Mesh）

• 定义：网格是几何体和材质的组合，用于创建具体的三维物体。
• 创建：

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  

---

7. 光源（Light）

• 定义：光源用于照亮场景中的物体。
• 常见光源：
  • AmbientLight：环境光，均匀照亮整个场景。
  • DirectionalLight：方向光，模拟太阳光。
  • PointLight：点光源，从一点向四周发射光线。
  • SpotLight：聚光灯，模拟手电筒或舞台灯光。
• 创建：

  const light = new THREE.DirectionalLight(0xffffff, 1);
  scene.add(light);
  

---

8. 控制器（Controls）

• 定义：控制器用于控制相机的移动和旋转，实现用户交互。
• 常见控制器：
  • OrbitControls：允许用户通过鼠标或触摸屏旋转、平移和缩放视图。
  • TrackballControls：类似于轨道球的交互方式。
• 使用：

  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  

---

9. 加载器（Loader）

• 定义：加载器用于加载外部资源，如模型、纹理、字体等。
• 常见加载器：
  • GLTFLoader：加载 GLTF 格式的 3D 模型。
  • TextureLoader：加载图像作为纹理。
  • FontLoader：加载字体文件。
• 使用：

  const loader = new THREE.TextureLoader();
  const texture = loader.load('texture.jpg');
  

---

10. 动画（Animation）

• 定义：动画用于实现动态效果，如旋转、移动、缩放等。
• 实现方式：
  • 使用 requestAnimationFrame 实现循环更新。
  • 使用 THREE.AnimationMixer 播放模型动画。
• 示例：

  function animate() {
      requestAnimationFrame(animate);
      mesh.rotation.y += 0.01;
      renderer.render(scene, camera);
  }
  animate();
  

---

11. 坐标系（Coordinate System）

• 定义：Three.js 使用右手坐标系，X 轴指向右方，Y 轴指向上方，Z 轴指向屏幕外。
• 注意：默认情况下，原点位于场景中心。

---

12. 缓冲区几何体（BufferGeometry）

• 定义：BufferGeometry 是一种高效的数据结构，用于定义复杂的几何体。
• 优点：性能更高，适合大规模数据处理。
• 使用：

  const geometry = new THREE.BufferGeometry();
  const vertices = new Float32Array([
      0, 0, 0,   1, 0, 0,   0, 1, 0
  ]);
  geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
  

---

13. 辅助工具（Helpers）

• 定义：辅助工具用于可视化调试，如网格、轴、光源范围等。
• 常见工具：
  • GridHelper：显示网格。
  • AxesHelper：显示坐标轴。
  • DirectionalLightHelper：显示方向光的方向。

---

14. 雾效（Fog）

• 定义：雾效用于模拟远近物体的模糊效果。
• 使用：

  scene.fog = new THREE.Fog(0xffffff, 1, 10);
  

---

总结

以上是 Three.js 中一些核心的概念和术语。理解这些概念有助于快速上手 Three.js，并构建复杂的三维应用。