一、引言
随着 Web 技术的发展，越来越多的应用程序开始引入 3D 图形以增强用户体验。然而，直接使用 WebGL 编写 3D 应用程序不仅难度较大，而且代码量繁多。为了解决这些问题，Three.js 应运而生。它是一个基于 WebGL 的 JavaScript 库，旨在简化 3D 图形的开发过程。本文将带领读者深入了解 Three.js 的使用方法，并通过实际案例展示其强大功能。
二、Three.js 简介
Three.js 是由 Ricardo Cabello 开发并维护的一个开源项目，自 2010 年发布以来，已经成为最受欢迎的 3D 图形库之一。它具有以下特点：
- 易于上手：提供了丰富的 API 和文档，即使是初学者也能快速入门。
- 跨平台支持：可以在浏览器端和 Node.js 环境中运行。
- 性能优越：利用 WebGL 实现高效的图形渲染。
- 社区活跃：拥有庞大的用户群体和丰富的插件生态。
三、安装与配置
1. 安装 Three.js
对于前端项目，可以通过 npm 或 yarn 安装 Three.js：
npm install three
或者
yarn add three
对于 HTML 页面，可以直接引用 CDN 文件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
2. 引入 Three.js
在 ES6 模块环境中，可以这样引入：
import * as THREE from 'three';
在 CommonJS 环境（如 Node.js）中，则使用 require 方法：
const THREE = require('three');
四、创建第一个 Three.js 场景
1. 初始化场景
每个 Three.js 应用程序都需要一个场景（Scene），它是所有对象的容器。我们首先创建一个空场景：
const scene = new THREE.Scene();
2. 添加相机
相机（Camera）决定了我们从哪个角度观察场景。Three.js 提供了多种类型的相机，最常用的是透视相机（PerspectiveCamera）：
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
3. 渲染器
渲染器（Renderer）负责将场景中的内容绘制到屏幕上。这里我们选择 WebGL 渲染器：
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
4. 基本几何体
为了使场景更加生动，我们可以添加一些几何体（Geometry）。例如，创建一个立方体：
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
5. 动画循环
为了让立方体旋转起来，我们需要设置一个动画循环（Animation Loop）。这可以通过 requestAnimationFrame 函数实现：
function animate() {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
五、进阶功能
1. 灯光效果
真实的 3D 场景离不开合适的照明。Three.js 支持多种类型的光源，如点光源（PointLight）、方向光源（DirectionalLight）等。下面的例子展示了如何添加一个方向光源：
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5).normalize();
scene.add(light);
2. 材质与纹理
除了基本材质外，Three.js 还允许我们使用带有纹理贴图的高级材质。例如，创建一个带有纹理的平面：
const loader = new THREE.TextureLoader();
const texture = loader.load('path/to/texture.jpg');
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
3. 动画与关键帧
Three.js 内置了对动画的支持，包括骨骼动画（Skeleton Animation）和关键帧动画（Keyframe Animation）。以下是使用关键帧动画的一个简单例子：
const mixer = new THREE.AnimationMixer(cube);
const clip = THREE.AnimationClip.createLinear(
'rotation',
[0, Math.PI * 2],
[0, 1]
);
const action = mixer.clipAction(clip);
action.play();
function animate() {
requestAnimationFrame(animate);
mixer.update(0.016); // 更新动画
renderer.render(scene, camera);
}
4. 用户交互
为了让用户能够与场景进行互动，我们可以监听鼠标或键盘事件。例如，实现点击立方体时改变其颜色：
document.addEventListener('click', (event) => {
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
intersects[0].object.material.color.set(Math.random() * 0xffffff);
}
});
5. 相机控制
为了让用户自由探索场景，我们可以使用 OrbitControls 插件来实现轨道相机控制。首先需要安装该插件：
npm install three/examples/jsm/controls/OrbitControls
然后在代码中引入并应用：
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
controls.enablePan = true;
controls.enableRotate = true;
六、总结
通过本文的介绍，相信您已经掌握了 Three.js 的基本用法及其一些高级特性。作为一个强大的 3D 图形库，Three.js 不仅能够满足日常开发中的大部分需求，还提供了诸如动画、交互等功能来提升用户体验。无论是在浏览器端还是 Node.js 环境下，Three.js 都是一个值得信赖的选择。未来，随着 Web 技术的发展，期待 Three.js 能够持续改进，为开发者带来更多惊喜！
