Three.js简化了WebGL开发，通过场景、相机、渲染器构建基础3D环境，支持模型加载、材质贴图、用户交互与动画实现，并需优化性能以适配多端设备。
要创建沉浸式的3D Web体验，WebGL 提供了底层图形渲染能力，而 Three.js 作为其高级封装库，极大简化了开发流程。直接操作 WebGL 编写着色器和管理缓冲区虽然灵活，但复杂度高。使用 Three.js 能快速搭建场景、灯光、相机和3D模型，把重点放在交互和用户体验上。
构建基础3D场景
Three.js 的核心是场景（Scene）、相机（Camera）和渲染器（Renderer）。这三者构成最基本的渲染结构。
以下是初始化一个简单场景的步骤：
- 创建场景：所有3D对象都添加到 Scene 中
- 设置相机：通常使用 PerspectiveCamera 模拟人眼视角
- 配置渲染器：将 WebGLRenderer 添加到页面 DOM 中
- 渲染循环：通过 requestAnimationFrame 持续更新画面
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);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
添加3D模型与材质
真实感来源于高质量的模型和贴图。Three.js 支持多种格式如 glTF、OBJ、FBX，推荐使用 glTF 格式，它被广泛支持且包含材质、动画等完整信息。
加载模型常用 GLTFLoader：
- 引入 THREE.GLTFLoader
- 使用 load 方法加载外部模型文件
- 将模型添加到场景中进行显示
材质方面可使用 MeshStandardMaterial 实现基于物理的渲染（PBR），配合环境光和金属度贴图提升真实感。
实现用户交互与动画
沉浸感离不开交互。可以通过以下方式增强体验：
- 轨道控制器（OrbitControls）：让用户拖拽旋转、缩放视角
- 鼠标拾取（Raycaster）：检测用户点击的3D对象
- 动画系统：使用 THREE.AnimationMixer 播放模型内置动画
- 自定义动画：在渲染循环中修改物体位置、旋转或缩放
例如让一个立方体持续旋转：
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
优化性能与适配设备
复杂的3D内容可能在低端设备上卡顿，需注意优化：
- 控制多边形数量，避免过多细节
- 合并几何体（Geometry Merging）减少绘制调用
- 使用纹理压缩（如 KTX2 格式）降低显存占用
- 开启抗锯齿（antialias: true）提升视觉质量
- 监听窗口 resize 事件，动态调整渲染器尺寸
移动端需考虑触摸事件支持，并限制帧率以节省电量。
基本上就这些。从基础场景搭建到模型加载、交互实现再到性能调优，Three.js 提供了一整套工具链。关键是理解其层级结构和渲染机制，逐步叠加功能。不复杂但容易忽略细节，比如光照方向或坐标单位一致性。保持模块化思维，便于后期扩展为VR或AR体验。
