入门
Introduction
你将学到什么
- Three.js 最小可运行程序的 三件套：Scene、Camera、Renderer
- 可见物体 Mesh = Geometry + Material 的组合方式
- 一次性渲染 与后续「动画循环」的区别
效果说明
页面中央出现一个 红色立方体。这是 Three.js 里最经典的 Hello World：没有光照、没有动画，调用一次 renderer.render() 把场景画到 canvas 上。
核心概念
Three.js 是对 WebGL 的高层封装。WebGL 底层只做一件事：在 GPU 上绘制三角形。Three.js 帮你管理场景图、相机矩阵和渲染管线。
┌─────────────────────────────────────────┐
│ Scene（场景）— 所有 3D 对象的容器 │
│ └── Mesh（网格） │
│ ├── Geometry — 顶点，定义形状 │
│ └── Material — 外观，定义颜色 │
├─────────────────────────────────────────┤
│ Camera（相机）— 观察角度与视野 │
├─────────────────────────────────────────┤
│ Renderer（渲染器）— Scene+Camera → canvas│
└─────────────────────────────────────────┘| 对象 | 作用 | 本案例 |
|---|---|---|
Scene | 3D 世界容器 | 空场景 + 一个 mesh |
PerspectiveCamera | 透视相机，近大远小 | 默认参数，位置 (200,200,200) |
WebGLRenderer | 创建 WebGL 上下文并绘制 | 尺寸 = 容器 #box |
BoxGeometry | 长方体顶点数据 | 100×100×100 |
MeshBasicMaterial | 不受光照影响的基础材质 | 纯红 0xff0000 |
Mesh | Geometry + Material | 位置 y=10 |
为什么用 MeshBasicMaterial？ 本案例没有添加光源，若用 MeshLambertMaterial 等受光材质，物体会呈现黑色。Basic 材质直接显示设定颜色，适合入门演示。
实现步骤
- 获取 DOM 容器
#box，作为 canvas 挂载点 new THREE.Scene()创建场景BoxGeometry+MeshBasicMaterial→Mesh，设置position，scene.add(mesh)PerspectiveCamera设置position和lookAt对准物体WebGLRenderer.setSize()→render(scene, camera)→appendChild(domElement)
代码要点
js
// 场景 = 舞台；所有要画的东西都 add 进来
const scene = new THREE.Scene();
// Mesh = 形状 + 外观
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 10, 0); // 沿 Y 轴抬高 10，不在原点
scene.add(mesh);
// 相机：从 (200,200,200) 看向 (0,10,0)
const camera = new THREE.PerspectiveCamera();
camera.position.set(200, 200, 200);
camera.lookAt(0, 10, 0);
// 渲染器：画一帧就结束（静态画面）
const renderer = new THREE.WebGLRenderer();
renderer.setSize(box.clientWidth, box.clientHeight);
renderer.render(scene, camera);
box.appendChild(renderer.domElement);坐标系
Three.js 使用 右手坐标系：X 右、Y 上、Z 朝屏幕外。下一篇 辅助线 会用 AxesHelper 可视化。
源码
js
import * as THREE from 'three';
// 场景 + 相机 --> 渲染器 --> 成果
// 场景 = （网格模型(几何体 + 材质) + 位置） + ...
// 相机 = 相机位置 + 相机观察位置
const box = document.getElementById('box')
const scene = new THREE.Scene();// 创建场景
const geometry = new THREE.BoxGeometry(100, 100, 100); //几何体
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); //材质
const mesh = new THREE.Mesh(geometry, material); //网格模型
mesh.position.set(0, 10, 0); //网格模型位置
scene.add(mesh); //场景添加网格模型
const camera = new THREE.PerspectiveCamera(); //相机
camera.position.set(200, 200, 200); //相机位置
camera.lookAt(0, 10, 0); //相机观察位置
const renderer = new THREE.WebGLRenderer(); // 创建渲染器
renderer.setSize(box.clientWidth, box.clientHeight)
renderer.render(scene, camera); //执行渲染
box.appendChild(renderer.domElement);小结
- 最小 Three.js 程序 = Scene + Camera + Renderer + 至少一个 Mesh
- 本案例只渲染 一帧；要动起来需要 动画 中的
requestAnimationFrame循环 - 下一篇：辅助线 — 用 AxesHelper 理解坐标系
入门案例 · Three.js · 1/15