从“无”到“有”：手动实现一个 3D 渲染循环全过程

烛阴2026-01-12 22:40

一、 Three.js 的基本构成

Scene ：场景。
Camera ：摄像机。
Renderer ：渲染器，。

二、具体实现

1. 初始化场景 (The Scene)

场景是一切物体的容器。

JavaScript 复制代码

const scene = new THREE.Scene();
// 💡 INTP 视角：把它想象成一个坐标系原点为 (0,0,0) 的无限空腔。

2. 配置相机 (The Camera)

最常用的是 透视相机（PerspectiveCamera） ，它模拟了人眼的"近大远小"效果。

JavaScript 复制代码

const camera = new THREE.PerspectiveCamera(
    75, // 视角 (Field of View)
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近剪裁面
    1000 // 远剪裁面
);
camera.position.z = 5; // 将相机后退 5 个单位，否则会在物体中心

3. 加入材质 (The Mesh)

一个物体由两部分组成：

几何体(Geometry)
材质(Material)

JavaScript 复制代码

const geometry = new THREE.BoxGeometry(1, 1, 1); // 形状：立方体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质：基础绿色
const cube = new THREE.Mesh(geometry, material); // 组合成网格
scene.add(cube); // 必须添加到场景中

4. 渲染与循环 (The Render Loop)

这是最关键的一步。我们需要每一秒刷新 60 次屏幕，才能看到动画。

JavaScript 复制代码

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
    requestAnimationFrame(animate); // 核心：请求下一帧
    
    // 让物体动起来，增加一点生命力
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera); // 真正绘制的一行
}
animate();

📂 核心代码与完整示例： my-three-app

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货