threejs

Three.js — WebGL 3D 场景技能

何时使用

• 需要真实 3D 效果：产品旋转展示、交互式首屏场景、着色器／材质效果、3D 数据可视化
• 需要超越“背景效果”的全面控制
• 可以为资源管线和性能调优投入时间

核心概念

• 创建：
  • Scene（根节点图）
  • Camera（透视／正交）
  • Renderer（WebGLRenderer）
  • Mesh = Geometry + Material
  • 光源（若使用非无光照材质）
• 渲染循环：
  • requestAnimationFrame(animate)
  • 更新基于时间的动画、控件和混合器，然后执行 renderer.render(scene, camera)

关键 API／模式

• 设置：
  • const renderer = new THREE.WebGLRenderer({ canvas, antialias, alpha })
  • renderer.setSize(width, height, false)
  • renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
• 摄像机：
  • camera.aspect = width / height; camera.updateProjectionMatrix()
• 场景图：
  • scene.add(object) / object.position/rotation/scale
• 加载资源：
  • GLTFLoader（模型）、TextureLoader（图像）、DRACOLoader（压缩的 glTF）
• 控件（常用）：
  • OrbitControls（调试／产品展示）、PointerLockControls（第一人称射击游戏）、自定义指针处理程序
• 清理（在 SPA 中很重要）：
  • geometry.dispose()、material.dispose()、texture.dispose()、renderer.dispose()
  • 移除事件监听器；取消 RAF。

常见问题

• 未处理尺寸调整 → 渲染拉伸或裁切
• devicePixelRatio 过高 → 移动设备 GPU 不堪重负
• WebGL 资源泄漏（未释放） → 路由切换后崩溃
• 加载过大的纹理／模型 → 启动缓慢；使用压缩纹理、Draco／KTX2 和更小的贴图
• 使用过多光源／阴影 → 开销大；尽可能用烘焙纹理模拟光照

快速示例

1) 最简旋转立方体

import * as THREE from "three";

const canvas = document.querySelector("#c");
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0, 4);

const geom = new THREE.BoxGeometry(1, 1, 1);
const mat = new THREE.MeshStandardMaterial({ color: 0x7c3aed });
const mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);

scene.add(new THREE.AmbientLight(0xffffff, 0.8));
const dir = new THREE.DirectionalLight(0xffffff, 0.8);
dir.position.set(2, 2, 2);
scene.add(dir);

function resize() {
  const w = canvas.clientWidth;
  const h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}
window.addEventListener("resize", resize);
resize();

function animate(t) {
  mesh.rotation.y = t * 0.0006;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

2) 遵循减少动态效果的偏好设置

• 如果设置了 prefers-reduced-motion: reduce，则渲染静态帧（不使用 RAF）或降低更新频率。

需要询问用户的问题

• 这是装饰性内容（首屏）还是功能性 3D（产品查看器）？
• 目标设备有哪些：移动设备？较旧的 iPhone？
• 可用的资源格式（glTF、HDRI、纹理）及文件大小限制
• 无障碍／减少动态效果方面的要求