Three.js 入门教程：从零开始构建你的第一个3D应用

作者约翰_麦卡岩

2026年1月1日 21:50

前言

在Web开发领域，3D图形渲染一直是一个充满挑战的技术领域。Three.js作为最受欢迎的JavaScript 3D库，让开发者能够轻松地在浏览器中创建令人惊叹的3D效果和交互式体验。本教程将带你从零开始，使用Three.js构建你的第一个3D应用。

什么是Three.js？

Three.js是一个轻量级的JavaScript 3D库，它基于WebGL技术构建，为Web开发者提供了简单而强大的3D图形渲染能力。无论是创建游戏、3D数据可视化、交互式产品展示，还是艺术创作，Three.js都能满足你的需求。

项目初始化

首先，确保你的项目已经安装了Three.js。在本教程中，我们将使用ES模块的方式导入Three.js：

import * as THREE from "three";

这个导入语句会将整个Three.js库导入为我们可以在代码中使用的THREE对象。

创建3D场景的核心组件

在Three.js中，任何3D场景都需要三个核心组件：场景（Scene）、相机（Camera）和渲染器（Renderer）。让我们逐一了解它们。

1. 创建场景

const scene = new THREE.Scene();

场景（Scene）是3D世界的容器，所有的3D对象、光源、材质等都会被添加到这个场景中。你可以把它想象成一个虚拟的3D空间，我们将在其中放置各种3D元素。

2. 创建相机

const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近平面
  1000 // 远平面
);

相机（Camera）决定了我们观察3D世界的角度。PerspectiveCamera（透视相机）模拟了人眼的视觉效果：

视角（Field of View）：设置为45度，这是人眼的自然视角
宽高比（Aspect Ratio）：根据窗口尺寸动态计算，确保3D内容不会出现变形
近平面（Near Clipping Plane）：设置为0.1，定义了相机能看到的最近距离
远平面（Far Clipping Plane）：设置为1000，定义了相机能看到的最远距离

3. 创建渲染器

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

渲染器（Renderer）是Three.js的核心组件，它负责将3D场景渲染到2D画布上：

WebGLRenderer：使用WebGL技术进行硬件加速渲染
setSize()：设置渲染器的尺寸，通常与窗口大小保持一致
appendChild()：将渲染器的DOM元素添加到HTML页面中

创建3D对象

现在让我们在场景中创建一个简单的3D立方体。

1. 创建几何体

const geometry = new THREE.BoxGeometry(1, 1, 1);

几何体（Geometry）定义了3D对象的形状。这里我们创建了一个1×1×1的立方体。

2. 创建材质

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

材质（Material）定义了3D对象的外观。我们使用了MeshBasicMaterial，这是最简单的材质类型，只定义颜色。这里设置了绿色（0x00ff00）。

3. 创建网格

const cube = new THREE.Mesh(geometry, material);

网格（Mesh）是几何体和材质的组合，代表一个完整的3D对象。

4. 添加到场景

scene.add(cube);

将创建的立方体添加到场景中，这样它就会在渲染时显示出来。

相机定位和观察

camera.position.z = 5;
camera.lookAt(0, 0, 0);

这两行代码设置相机的位置和朝向：

相机位置：将相机沿Z轴向后移动5个单位，确保我们能看到立方体
相机朝向：让相机朝向场景的中心点（0, 0, 0）

动画循环

Three.js中最激动人心的部分就是创建动画。通过requestAnimationFrame函数，我们可以创建流畅的3D动画：

function animate() {
  requestAnimationFrame(animate);
  
  // 旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  
  // 渲染
  renderer.render(scene, camera);
}

animate();

动画原理

requestAnimationFrame：这是浏览器提供的API，它会告诉浏览器我们需要执行动画，让浏览器在下一次重绘之前调用我们的函数
旋转动画：每帧都将立方体绕X轴和Y轴旋转0.01弧度
渲染：调用渲染器将当前场景渲染到屏幕上

扩展功能

响应式设计

为了让我们的3D应用适应不同屏幕尺寸，我们可以添加窗口resize事件监听：

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

添加光照

为了让3D对象看起来更加真实，我们可以添加光照：

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

创建多个对象

我们可以创建更多的3D对象来丰富场景：

// 创建多个立方体
for (let i = 0; i < 10; i++) {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({
    color: Math.random() * 0xffffff
  });
  const cube = new THREE.Mesh(geometry, material);
  
  cube.position.x = (Math.random() - 0.5) * 20;
  cube.position.y = (Math.random() - 0.5) * 20;
  cube.position.z = (Math.random() - 0.5) * 20;
  
  scene.add(cube);
}

总结

通过这个简单的Three.js应用，我们了解了3D图形编程的基本概念：

场景管理：使用Scene容器管理所有3D对象
视角控制：通过Camera控制观察3D世界的角度
渲染输出：使用Renderer将3D场景渲染到2D画布
几何体和材质：创建和配置3D对象的外观
动画实现：使用requestAnimationFrame创建流畅的动画效果

Three.js的强大之处在于它提供了丰富的功能集，包括各种几何体、材质、光照模型、纹理、阴影、粒子系统等。随着学习的深入，你可以创建越来越复杂的3D应用。

下一步学习建议

探索更多几何体：学习球体、圆柱体、平面等基本几何体
材质进阶：研究Lambert材质、Phong材质等更真实的光照模型
纹理映射：学习如何为3D对象添加纹理图片
交互控制：使用Three.js的控制器添加鼠标交互功能
性能优化：学习如何优化3D场景的性能

Three.js的世界是广阔的，通过不断实践和探索，你将能够创造出令人惊叹的3D Web体验。希望这个入门教程能够帮助你迈出3D Web开发的第一步！

普通视图

前言