three.js：Web 端 3D 图形开发的标准库

JavaScript 领域做 3D 图形，绑不开 three.js。

这个项目在 GitHub 上拿到了超过 11 万 Star，是 JavaScript 3D 库里用户量最大的一个。

three.js 的目标很明确：提供一个轻量、跨浏览器的通用 3D 库。当前内置了 WebGL 和 WebGPU 两种渲染器，SVG 和 CSS3D 渲染器作为插件提供。

核心能力

three.js 封装了 3D 开发中大部分常用功能：

• 几何体和材质：内置多种基础几何体，支持自定义顶点数据，材质系统覆盖基础、标准、物理等多种着色模型
• 光照系统：点光源、方向光、环境光、聚光灯等，支持阴影投射和接收
• 动画系统：骨骼动画、变形目标、关键帧动画
• 加载器：支持 glTF、OBJ、FBX、STL 等主流 3D 模型格式
• 后处理：景深、泛光、运动模糊等屏幕空间效果
• 物理和音效：通过插件集成物理引擎和空间音频

上手

一段最简单的代码就能在浏览器里画一个旋转的立方体：

import * as THREE from 'three';

const width = window.innerWidth, height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);

function animate(time) {
    mesh.rotation.x = time / 2000;
    mesh.rotation.y = time / 1000;
    renderer.render(scene, camera);
}

安装方式：

npm install three

如果只需要克隆源码学习，用 shallow clone 控制体积：

git clone --depth=1 https://github.com/mrdoob/three.js.git

全量克隆大约 2GB，加了 depth=1 之后小很多。

生态

three.js 的官方文档和示例都维护在 threejs.org 上，示例页面有上百个可交互的 demo，覆盖从基础几何到复杂场景的各种用法。社区活跃，Stack Overflow 和 Discord 都有大量讨论。

Ricardo Cabello（网名 mrdoob）从 2010 年开始维护这个项目，持续至今，更新频率很高。对于需要在浏览器中做 3D 渲染的场景，three.js 基本是绕不过去的选择。

doob）从 2010 年开始维护这个项目，持续至今，更新频率很高。对于需要在浏览器中做 3D 渲染的场景，three.js 基本是绕不过去的选择。