用Three.js打造Web 3D世界：从入门到实战进阶指南-CFANZ编程社区

在WebGL的复杂与Canvas的简单之间，Three.js架起了一座神奇的桥梁。作为一名曾从2D跨越到3D的前端开发者，我将带你开启这段立体化的视觉革命之旅。

一、认知重构：Web 3D开发思维

传统前端开发：

<div class="card">...</div> <!-- 平面矩形 -->

Three.js世界观：

new THREE.Mesh(              // 三维物体
  new THREE.BoxGeometry(),   // 几何形状
  new THREE.MeshStandardMaterial() // PBR材质
)

核心概念转变：

坐标系：从XY平面到XYZ立体空间
渲染方式：从DOM操作到场景图(Scene Graph)管理
交互维度：从点击事件到射线碰撞检测(Raycaster)

二、Three.js核心架构精要

graph TD
    A[Renderer] --> B[Scene]
    B --> C[Camera]
    B --> D[3D Objects]
    D --> E[Geometry]
    D --> F[Material]
    D --> G[Light]

1. 几何体(Geometry)的数学之美

// 参数化几何体创建
const geometry = new THREE.TorusKnotGeometry(
  1,    // 半径
  0.4,  // 管径
  100,  // 径向段数
  16,   //  tubular段数
  Math.PI * 2 // 弧度
);

2. 材质(Material)的物理表现

材质类型	特性	性能消耗
MeshBasicMaterial	基础单色，无光照	★☆☆
MeshLambertMaterial	漫反射光照模型	★★☆
MeshStandardMaterial	基于物理渲染(PBR)	★★★

3. 光照(Light)的戏剧性效果

// 剧场式布光方案
const ambient = new THREE.AmbientLight(0x404040); // 环境光
const keyLight = new THREE.DirectionalLight(0xffffff, 1); // 主光
keyLight.position.set(10, 10, 10);

const fillLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 0.5); // 补光

三、性能优化实战手册

场景复杂度：当模型面数超过50万时的解决方案

1. LOD(细节层级)技术

const lod = new THREE.LOD();
for (let i = 0; i < 5; i++) {
  const level = new THREE.Mesh(createDetailModel(i));
  lod.addLevel(level, i * 50); // 根据距离切换模型
}

2. InstancedMesh高效渲染

const instancedMesh = new THREE.InstancedMesh(
  geometry,
  material,
  1000 // 实例数量
);

for (let i = 0; i < 1000; i++) {
  const matrix = new THREE.Matrix4();
  matrix.setPosition(randomPosition());
  instancedMesh.setMatrixAt(i, matrix);
}

3. GLTF压缩流水线

# 使用glTF-transform工具链
npx @gltf-transform/cli optimize input.glb --texture-compress webp

四、惊艳案例实现解析

1. 粒子星系（性能与美学的平衡）

const particles = 100000;
const positions = new Float32Array(particles * 3);
const colors = new Float32Array(particles * 3);

// 使用球坐标生成星系分布
for (let i = 0; i < particles; i++) {
  const r = Math.pow(Math.random(), 2) * 50;
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);
  
  positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
  // ...填充其他坐标
}

const particleSystem = new THREE.Points(
  new THREE.BufferGeometry(),
  new THREE.PointsMaterial({ size: 0.1, vertexColors: true })
);

2. 交互式拆解动画

gsap.to(model.children, {
  position: {
    x: (i) => (Math.random() - 0.5) * 10,
    y: (i) => i * 0.3,
    z: (i) => (Math.random() - 0.5) * 4
  },
  duration: 2,
  stagger: 0.1
});

五、现代开发工具链

调试神器：

Three.js Inspector（Chrome插件）
stats.js性能监控面板
dat.gui参数调节器

构建方案：

// vite.config.js
import { defineConfig } from 'vite'
import glsl from 'vite-plugin-glsl';

export default defineConfig({
  plugins: [
    glsl() // 支持GLSL着色器热更新
  ]
})

六、避坑指南（血泪经验）

内存泄漏：

// 销毁处理清单
scene.traverse(obj => {
  if (obj.dispose) obj.dispose();
  if (obj.geometry) obj.geometry.dispose();
  if (obj.material) {
    Object.values(obj.material).forEach(tex => tex?.dispose?.());
    obj.material.dispose();
  }
});

Z-fighting问题：

renderer.setPixelRatio(window.devicePixelRatio);
renderer.depthTest = true;

响应式设计原则：

function resizeRenderer() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', resizeRenderer);