你将学到什么

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)

代码要点


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

完整源码：GitHub

小结

最小 Three.js 程序 = Scene + Camera + Renderer + 至少一个 Mesh
本案例只渲染一帧；要动起来需要动画中的 requestAnimationFrame 循环