跳到主要内容

Three.js 简介

Three.js 是一个强大的 JavaScript 3D 图形库，它让 Web 3D 开发变得简单高效。通过 Three.js，你可以在浏览器中创建复杂的 3D 场景、动画和交互式应用，无需安装任何插件。

什么是 Three.js​

Three.js 是基于 WebGL 的 JavaScript 3D 库。WebGL 是一种在浏览器中渲染 3D 图形的底层 API，但它非常复杂，需要编写大量代码才能实现简单的效果。Three.js 封装了 WebGL 的复杂性，提供了更友好、更易用的接口。

Three.js 的核心价值在于：

简化开发流程。直接使用 WebGL 绘制一个简单的三角形可能需要上百行代码，而 Three.js 只需要几行就能实现。它处理了底层的着色器编译、缓冲区管理、矩阵运算等复杂工作。

跨浏览器兼容。Three.js 自动处理不同浏览器的 WebGL 实现差异，确保你的 3D 应用在各种环境中都能正常运行。

丰富的功能。Three.js 提供了场景图管理、各种几何体、材质系统、光照模型、动画系统、加载器等完整的功能集。

Three.js 能做什么​

Three.js 的应用场景非常广泛：

数据可视化。将复杂的数据以 3D 形式呈现，如 3D 图表、地图可视化、科学数据展示等。三维可视化能更直观地展示数据之间的关系和趋势。

产品展示。电商网站可以用 3D 模型展示产品，用户可以旋转、缩放查看产品细节。这在珠宝、家具、汽车等行业特别有价值。

游戏开发。Three.js 可以开发简单的 3D 网页游戏，配合物理引擎可以实现更复杂的游戏效果。

虚拟现实和增强现实。Three.js 支持 WebXR API，可以开发 VR 和 AR 应用，让用户在浏览器中体验沉浸式内容。

艺术创作。艺术家可以用 Three.js 创作交互式 3D 艺术作品，结合音频、视频等多媒体元素。

建筑和工程可视化。展示建筑设计、室内装修效果，让客户在项目完成前就能看到最终效果。

Three.js 的核心概念​

理解 Three.js 需要掌握几个核心概念：

场景（Scene） 是所有 3D 对象的容器。就像一个舞台，所有的演员、道具、灯光都放在舞台上。场景管理着所有要渲染的对象，包括几何体、灯光、相机等。

相机（Camera） 决定了我们能看到场景的哪些部分。就像人的眼睛或摄像机镜头，相机的位置、方向、视野范围决定了最终渲染的画面。Three.js 提供了透视相机和正交相机两种类型。

渲染器（Renderer） 负责将场景和相机结合，计算出最终的 2D 图像并显示在屏幕上。渲染器处理光照计算、阴影生成、材质渲染等复杂的图形学工作。

几何体（Geometry） 定义了 3D 物体的形状。Three.js 提供了丰富的内置几何体，如立方体、球体、圆柱体等，也支持自定义几何体和从外部加载 3D 模型。

材质（Material） 定义了物体的外观属性，如颜色、光泽度、透明度等。不同的材质类型产生不同的视觉效果，有些材质会对光照做出反应，有些则不会。

纹理（Texture） 是覆盖在物体表面的图像，可以增加物体的细节和真实感。纹理可以是照片、程序生成的图案，甚至是视频。

光照（Light） 让场景中的物体产生明暗变化和阴影效果。Three.js 提供了多种光源类型，模拟现实世界中的不同光照条件。

Three.js 与 WebGL 的关系​

WebGL 是一种底层图形 API，它直接操作 GPU 进行渲染。使用原生 WebGL 开发需要掌握：

  • GLSL 着色器语言
  • 顶点缓冲区和索引缓冲区
  • 投影矩阵和视图矩阵
  • 纹理采样和映射
  • 光照模型和法线计算

这些概念对于初学者来说门槛很高。Three.js 在 WebGL 之上建立了一层抽象，让开发者可以用更直观的方式创建 3D 内容。

// 使用 Three.js 创建一个旋转的立方体
import * as THREE from 'three';

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);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

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

animate();

这段代码创建了一个旋转的绿色立方体。如果用原生 WebGL 实现，代码量会增加十倍以上。

学习 Three.js 的前置知识​

学习 Three.js 之前，建议你具备以下基础：

JavaScript 基础。Three.js 是 JavaScript 库，需要熟悉 JavaScript 的语法、面向对象编程、异步编程等概念。

HTML 和 CSS 基础。Three.js 渲染的内容需要嵌入到网页中，了解 HTML 和 CSS 有助于整合 3D 内容。

基础的数学知识。3D 图形涉及向量、矩阵、三角函数等数学概念。Three.js 封装了这些计算，但理解原理有助于更好地使用。

WebGL 概念。虽然 Three.js 隐藏了 WebGL 的复杂性，但了解 WebGL 的基本工作原理有助于理解 Three.js 的设计。

Three.js 的版本和生态​

Three.js 是一个活跃的开源项目，持续更新迭代。官方推荐使用最新版本以获得最佳性能和最新功能。

Three.js 拥有丰富的生态系统：

官方示例。Three.js 官网提供了大量示例代码，涵盖各种功能和使用场景，是学习的重要资源。

社区扩展。社区开发了许多扩展库，如 OrbitControls（轨道控制器）、GLTFLoader（模型加载器）、EffectComposer（后期处理）等。

框架集成。Three.js 可以与 React、Vue、Angular 等前端框架配合使用，社区提供了相应的集成方案。

接下来的学习路径​

本教程将带你从零开始学习 Three.js：

  1. 环境搭建：配置开发环境，创建第一个 Three.js 应用
  2. 核心概念：深入理解场景、相机、渲染器的工作原理
  3. 几何体与材质：学习创建各种形状和外观的 3D 物体
  4. 光照系统：掌握不同光源的使用和阴影效果
  5. 动画系统：让 3D 场景动起来
  6. 交互控制：实现用户与 3D 场景的交互
  7. 高级特性：后期处理、着色器、性能优化等

让我们开始 Three.js 的学习之旅吧！