Three.js

Three.js 是什么

Three.js 是一个面向浏览器的 JavaScript 3D 库，目标是在 Web 上提供易用、轻量、跨浏览器的通用 3D 能力。当前构建主要包含 WebGL 与 WebGPU 渲染器，同时也可以通过 addons 使用 SVG 与 CSS3D 渲染器。

它把底层的图形接口封装成「场景（Scene）—相机（Camera）—渲染器（Renderer）」这套直观模型，让前端开发者不必直接面对复杂的着色器与 GPU 细节，也能快速搭建 3D 场景。

核心概念

• Scene：场景容器，所有物体、灯光都挂载在这里
• Camera：决定观察视角，常用透视相机 PerspectiveCamera
• Renderer：负责把场景绘制到页面上，如 WebGLRenderer
• Mesh：几何体（Geometry）+ 材质（Material）组合成的可渲染对象

快速上手示例

下面这段代码创建场景、相机和一个立方体，并让它持续旋转：

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

获取代码

仓库历史完整克隆体积较大（约 2GB），如果不需要完整历史，可以使用浅克隆：

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

学习与社区资源

• 官方示例与文档：threejs.org 上的 Examples、Docs、Manual
• 提问与讨论：Stack Overflow 的 three.js 标签、官方论坛与 Discord
• 版本升级：参考仓库 Wiki 中的迁移指南，避免破坏性变更带来的困扰

适合谁用

如果你需要在网页中呈现 3D 内容——无论是产品展示、数据可视化、互动小游戏还是 WebXR 体验——Three.js 都是非常成熟的起点。入门门槛不高，但要做出高性能、高质量的复杂场景，仍需要补充图形学与性能优化方面的知识。