Three.js知识框架

一、Three.js 基础概念

1. Three.js 简介

• 是什么？

  • 基于 WebGL 的 3D JavaScript 库，用于在浏览器中渲染 3D 场景。

• 核心优势

  • 简化 WebGL 的复杂 API，提供高层封装。

  • 跨平台（支持桌面和移动端）。

• 适用场景

  • 3D 可视化、游戏开发、VR/AR、产品展示等。

2. 核心三要素

• 场景（Scene）

  • 3D 世界的容器，包含所有对象（模型、光源、相机等）。

• 相机（Camera）

  • 定义视图的观察角度（透视相机 PerspectiveCamera / 正交相机 OrthographicCamera）。

• 渲染器（Renderer）

  • 将场景和相机结合，输出到 HTML 画布（WebGLRenderer）。

3. 开发环境搭建

• CDN 引入

  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

• npm 安装

  npm install three

• 基础代码结构

  // 1. 创建场景、相机、渲染器
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);// 2. 添加物体（立方体）
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);// 3. 渲染循环
  function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
  }
  animate();

---

二、Three.js 核心模块

4. 几何体（Geometry）

• 内置几何体

  • BoxGeometry（立方体）、SphereGeometry（球体）、CylinderGeometry（圆柱体）。

• 自定义几何体

  • 使用 BufferGeometry 和顶点数据手动创建。

5. 材质（Material）

• 常用材质

  • MeshBasicMaterial（基础材质，不受光照影响）。

  • MeshPhongMaterial（高光材质，受光照影响）。

  • MeshStandardMaterial（PBR 材质，支持金属度和粗糙度）。

• 纹理贴图

  • TextureLoader 加载图片作为材质贴图：

    const texture = new THREE.TextureLoader().load('texture.jpg');
    const material = new THREE.MeshBasicMaterial({ map: texture });

6. 光源（Light）

• 光源类型

  • AmbientLight（环境光，均匀照亮所有物体）。

  • DirectionalLight（平行光，模拟太阳光）。

  • PointLight（点光源，模拟灯泡）。

  • SpotLight（聚光灯，带锥形照射范围）。

7. 动画与交互

• 动画循环

  • 使用 requestAnimationFrame 实现平滑动画。

• 用户交互

  • 通过 Raycaster 实现物体点击检测：

    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    window.addEventListener('click', (event) => {mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;raycaster.setFromCamera(mouse, camera);const intersects = raycaster.intersectObjects(scene.children);if (intersects.length > 0) console.log('点击了物体！');
    });

---

三、Three.js 进阶技术

8. 模型加载

• 加载外部模型

  • 使用 GLTFLoader 加载 GLTF 格式（推荐）：

    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
    const loader = new GLTFLoader();
    loader.load('model.gltf', (gltf) => scene.add(gltf.scene));

  • 支持格式：GLTF、OBJ、FBX、STL 等。

9. 着色器（Shaders）

• 自定义着色器

  • 通过 ShaderMaterial 编写 GLSL 代码：

    const material = new THREE.ShaderMaterial({vertexShader: `void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,fragmentShader: `void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }`
    });

10. 后期处理（Post-Processing）

• 特效添加

  • 使用 EffectComposer 实现模糊、辉光等效果：

    import { EffectComposer, RenderPass, BloomEffect } from 'postprocessing';
    const composer = new EffectComposer(renderer);
    composer.addPass(new RenderPass(scene, camera));
    composer.addPass(new BloomEffect());

11. 性能优化

• 减少绘制调用

  • 合并几何体（BufferGeometryUtils.mergeBufferGeometries）。

• 使用 InstancedMesh

  • 批量渲染相同几何体（适合大量重复物体）。

• LOD（Level of Detail）

  • 根据距离切换不同精度的模型。

---

四、Three.js 高级应用

12. VR/AR 支持

• WebXR

  • 通过 WebXRManager 实现 VR 渲染：

    import { VRButton } from 'three/examples/jsm/webxr/VRButton';
    renderer.xr.enabled = true;
    document.body.appendChild(VRButton.createButton(renderer));

13. 物理引擎集成

• Cannon.js / Ammo.js

  • 添加重力、碰撞检测：

    import * as CANNON from 'cannon-es';
    const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0) });

14. 与其他库结合

• dat.GUI

  • 快速创建调试控制面板：

    import * as dat from 'dat.gui';
    const gui = new dat.GUI();
    gui.add(cube.position, 'x', -5, 5).name('X 轴位置');

---

五、学习路线建议

1. 初级阶段（1-2 周）

• 掌握 Three.js 核心三要素（Scene、Camera、Renderer）。

• 熟悉基础几何体和材质。

• 实现简单动画（旋转、平移）。

2. 中级阶段（1-2 个月）

• 加载外部 3D 模型（GLTF）。

• 添加交互（点击、拖拽）。

• 学习光照和阴影。

3. 高级阶段（2-3 个月）

• 编写自定义着色器（GLSL）。

• 集成物理引擎（Cannon.js）。

• 优化性能（InstancedMesh、LOD）。

4. 实战项目

• 初级：3D 旋转立方体 + 交互。

• 中级：3D 产品展示页（模型加载 + 光照）。

• 高级：第一人称视角游戏（物理碰撞 + 动画）。

---

六、资源推荐

• 官方文档

  • Three.js Docs

• 学习平台

  • Three.js Journey（付费系统课程）

  • YouTube 免费教程（Bruno Simon、SimonDev）。

• 模型资源

  • Sketchfab、TurboSquid。

通过这个知识框架，你可以逐步掌握 Three.js 的核心技术，并进阶到复杂 3D 应用的开发！