Three.js技术实战：从零构建三维交互场景

2026年1月20日 互联网

一、Three.js技术定位与开发环境

Three.js作为基于WebGL的JavaScript 3D库，通过抽象底层图形API，为开发者提供高效的3D场景构建能力。其核心优势在于简化三维开发流程，支持跨平台渲染，并集成物理引擎、音频系统等扩展功能。

开发环境配置需包含现代浏览器（Chrome/Firefox）与代码编辑器（VS Code），建议通过CDN引入基础库文件：

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

对于复杂项目，推荐使用npm安装完整包并配合Webpack构建工具，实现模块化开发与资源优化。

二、核心对象体系与场景构建

1. 三大基础组件

  • 场景(Scene)：作为3D对象的容器，通过THREE.Scene()实例化，支持添加网格、光源、相机等元素。
  • 相机(Camera)：决定观察视角，常用透视相机（PerspectiveCamera）模拟人眼，正交相机（OrthographicCamera）用于2.5D效果。
  • 渲染器(Renderer)：将场景绘制到画布，WebGLRenderer支持硬件加速，可通过setPixelRatio()适配高DPI设备。

2. 几何体建模流程

几何体创建包含参数化生成与自定义模型导入两种方式：

  1. // 参数化立方体
  2. const geometry = new THREE.BoxGeometry(2, 2, 2);
  3. const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
  4. const cube = new THREE.Mesh(geometry, material);
  5. scene.add(cube);
  7. // GLTF模型导入（需引入GLTFLoader）
  8. const loader = new THREE.GLTFLoader();
  9. loader.load('model.gltf', (gltf) => {
  10.   scene.add(gltf.scene);
  11. });

UV贴图应用需通过TextureLoader加载图片，并配置材质的map属性实现纹理映射。

三、材质与光照系统

1. 材质类型选择

  • 基础材质(MeshBasicMaterial)：不受光照影响，适用于简单着色。
  • Phong材质(MeshPhongMaterial)：支持高光反射，通过specular属性控制光泽度。
  • 标准材质(MeshStandardMaterial)：基于物理渲染(PBR)，更真实的金属/粗糙度表现。

2. 光照配置方案

  • 环境光(AmbientLight)：提供基础照明，消除纯黑区域。
  • 方向光(DirectionalLight)：模拟太阳光，配合castShadow属性生成硬阴影。
  • 点光源(PointLight)：适用于局部照明，需设置distance衰减范围。

阴影生成需配置渲染器参数并启用相机阴影：

  1. renderer.shadowMap.enabled = true;
  2. const light = new THREE.DirectionalLight(0xffffff, 1);
  3. light.castShadow = true;
  4. light.position.set(5, 10, 7);

四、动画与交互开发

1. 动画循环机制

通过requestAnimationFrame实现帧动画，结合THREE.Clock进行时间控制：

  1. const clock = new THREE.Clock();
  2. function animate() {
  3.   const delta = clock.getDelta();
  4.   cube.rotation.y += 0.5 * delta; // 匀速旋转
  5.   requestAnimationFrame(animate);
  6.   renderer.render(scene, camera);
  7. }
  8. animate();

补间动画推荐使用GSAP库，实现属性平滑过渡：

  1. gsap.to(cube.position, { x: 5, duration: 2 });

2. 交互事件处理

轨道控制器(OrbitControls)支持鼠标旋转/平移/缩放：

  1. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
  2. const controls = new OrbitControls(camera, renderer.domElement);
  3. controls.enableDamping = true; // 启用阻尼效果

自定义事件需监听DOM元素：

  1. renderer.domElement.addEventListener('click', (event) => {
  2.   const mouse = new THREE.Vector2(
  3.     (event.clientX / window.innerWidth) * 2 - 1,
  4.     -(event.clientY / window.innerHeight) * 2 + 1
  5.   );
  6.   // 射线检测逻辑...
  7. });

五、高阶功能实现

1. 着色器编程

顶点着色器处理几何变换，片元着色器控制像素颜色。通过ShaderMaterial自定义效果：

  1. // 顶点着色器示例
  2. varying vec2 vUv;
  3. void main() {
  4.   vUv = uv;
  5.   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  6. }
  8. // 片元着色器示例
  9. uniform float time;
  10. varying vec2 vUv;
  11. void main() {
  12.   float wave = sin(vUv.x * 10.0 + time) * 0.1;
  13.   gl_FragColor = vec4(vec3(0.5 + wave), 1.0);
  14. }

2. 物理引擎集成

Physijs扩展提供刚体模拟，需配置Worker线程：

  1. Physijs.scripts.worker = 'physijs_worker.js';
  2. const sphere = new Physijs.SphereMesh(
  3.   new THREE.SphereGeometry(1),
  4.   new THREE.MeshPhongMaterial({ color: 0xff0000 })
  5. );
  6. sphere.position.y = 10;
  7. sphere.__dirtyPosition = true; // 强制更新物理状态
  8. scene.add(sphere);

六、性能优化策略

  1. 几何体合并：使用BufferGeometryUtils.mergeBufferGeometries()减少Draw Call。
  2. LOD分级：根据距离切换不同精度模型。
  3. 纹理压缩：采用KTX2或BASIS格式减小内存占用。
  4. Web Worker：将复杂计算移至后台线程。

七、实战案例：3D房间建模

  1. 场景搭建：创建地面、墙壁、门窗等基础元素。
  2. 模型导入：加载家具GLTF模型并调整位置。
  3. 光照优化：组合使用环境光与区域光。
  4. 交互增强：添加物体点击高亮与信息弹窗。
  5. 性能调优：合并静态网格，启用阴影贴图缓存。

通过系统掌握上述技术模块，开发者可快速构建出具备专业级视觉效果与交互体验的三维应用。建议结合官方示例库（threejs.org/examples）进行实践，逐步深入着色器编程与物理模拟等高阶领域。

最新文章