1. 引入字体加载器 由于 TextGeometry 不是核心库的一部分，我们需要单独引入： 2. 加载 JSON 字体并创建 Three.js 不直接读取 .ttf，它读取的是专用的 JSON 字体

一、 Three.js 的基本构成

1. Scene ：场景。
2. Camera ：摄像机。
3. Renderer ：渲染器，。

二、具体实现

1. 初始化场景 (The Scene)

场景是一切物体的容器。

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

2. 配置相机 (The Camera)

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

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)

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 次屏幕，才能看到动画。

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开发干货