Three.js 入门：场景、相机、渲染器，以及一个 30 行旋转盒子
Three.js 是一个开源的 JavaScript 图形库，用于在浏览器中创建并展示 3D 图形和动画。
浏览器原生的 WebGL 是一个基于 OpenGL 的底层 JavaScript API，可以直接调用 GPU 渲染 2D/3D 图形。但原生 WebGL 需要手动处理着色器、缓冲区等底层细节，代码量大且难以维护。Three.js 将这一层复杂性封装起来，开发者不需要深入图形学知识也能直接构建 3D 应用。
源码托管在 GitHub（当前 108K Stars）：
https://github.com/mrdoob/three.js
核心对象
Three.js 的几个基本构建模块：
- 场景（Scene）：3D 世界的容器。所有要渲染的物体、灯光等都必须添加到场景中，场景定义了整个 3D 空间的存在范围。
- 相机（Camera）：观察者的视角，决定场景中哪些内容会出现在屏幕上。最常用的是透视相机（PerspectiveCamera），模拟人眼"近大远小"的效果。
- 渲染器（Renderer）：绘图引擎。把场景和相机结合起来，将最终画面绘制到页面的 Canvas 元素上。
- 网格（Mesh）：场景中的一个具体物体（立方体、角色模型等），由两部分组成：
- 几何体（Geometry）：定义物体的形状（顶点、面、尺寸）。例如 BoxGeometry（立方体）、SphereGeometry（球体）。
- 材质（Material）：定义物体的外观（颜色、纹理、光泽度、透明度）。例如 MeshBasicMaterial（基础材质）、MeshPhongMaterial（带高光的光泽材质）。
- 灯光（Light）：照亮场景中的物体，产生明暗、阴影和颜色效果。常用类型有环境光（AmbientLight）、平行光（DirectionalLight）、点光源（PointLight）等。
示例：一个旋转的 3D 盒子
下面这个完整 HTML 页面用 Three.js 创建了一个持续旋转的立方体：
Create a rotating 3D box
body {
margin: 0;
}
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js"
}
}
import * as THREE from 'three';
const width = window.innerWidth, height = window.innerHeight;
// init
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 );
// animation
function animate( time ) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render( scene, camera );
}
示例的在线版本：
https://jsfiddle.net/w43x5Lgh/
官方还提供了大量可参考的示例：
可用场景
Three.js 可以用于产品 360° 展示、数据可视化、游戏开发、建筑与设计，以及艺术和创意项目。