你是否曾在浏览网页时被那些炫酷的3D展示页深深吸引，心里痒痒的也想亲手Zuo一个？别被那些复杂的数学公式和晦涩的图形学名词吓跑了。今天我们要剥开Three.js这颗硬核糖果的外衣，用Zui接地气的方式，带你从一行代码dou没有的状态，一步步搭建出一个属于你自己的三维世界。这不仅仅是一篇教程，geng像是一场关于创造力的实验。

第一步：工欲善其事，必先利其器

在开始这场冒险之前，我们得先把“武器”准备好。别担心，不需要你安装什么庞大的3D建模软件，我们的战场就在浏览器里而核心武器就是Node.js包管理器。

打开你的终端，输入那句经典的咒语：

npm install three

这一行命令下去，Three.js的核心库就会乖乖地躺进你的项目文件夹里。这就像是在画油画前，你得先把颜料管挤出来一样。虽然只是简单的安装，但这却是通往新世界大门的钥匙。没有这一步，后面的一切dou是空谈。

接下来我们需要在HTML文件里搭好架子。这里有个小细节值得注意，我们在引入脚本时通常会这样写：

你可Neng会问，为什么要加个 type="module"？这可不是多此一举。这就像给浏览器发了一张通行证，告诉它：“嘿，这里面用了 import 这种高级语法，你得按模块的方式来处理，而且别急着执行，等HTML元素dou准备好了再说。” 这样一来我们就Neng在JavaScript文件里顺滑地引入Three.js了：

import * as THREE from 'three';
const canvas = document.querySelector;

第二步：解构3D世界的“金三角”

hen多新手刚入门时对着满屏的API文档发愁，其实Three.js的核心逻辑简单得令人发指。无论多么宏大的3D大作，拆解开来无非就是这三个老伙计在配合：场景相机和渲染器。我把它们称为3D世界的“金三角”。

1. Scene：无限可Neng的虚空舞台

我们需要一个容器。在Three.js里这就是 THREE.Scene。你Ke以把它想象成一个巨大的、空荡荡的舞台，或者是一个还没有放入任何家具的房间。你想放立方体？放球体？还是放一棵参天大树？统统dou得先扔进这个 Scene 里。没有它，你的物体就无处安放，就像没有剧本的演员，只Neng在后台干着急。

// 创建场景
const scene = new THREE.Scene;

2. Camera：你的眼睛，你的视角

舞台搭好了但谁来kan呢？这就需要 Camera。相机决定了你站在哪里、kan什么角度、视野有多宽。Ru果没有相机，Scene里堆满了东西也白搭，因为“没人kan”。

我们Zui常用的是透视相机，它的原理和人眼非常像：近大远小。创建它的时候，我们需要给它几个参数：

// 创建相机
const camera = new THREE.PerspectiveCamera;

这里面的学问可大了：

视野范围第一个参数 75。想象你坐在电影院里不转头、不斜眼，目光直视前方Nengkan到的范围。度数越大，视野越广，像广角镜头；度数越小，视野越窄，像长焦镜头。一般75度左右Zui接近人眼的自然感觉。

宽高比第二个参数。通常就是画布的宽度除以高度。Ru果不设好，画面就会被压扁或者拉长，那可就闹笑话了。

近裁剪面与远裁剪面Zui后两个参数 0.1 和 100。这就像是给相机设定了“视力范围”。太近的东西和太远的东西，相机是“kan”不见的。这不仅仅是为了模拟真实geng是为了性Neng——太远的东西没必要渲染，省下算力干点别的不好吗？

创建完相机，别忘了把它放到合适的位置，不然它可Neng就站在原点，被物体挡住视线了：

camera.position.z = 3; // 把相机往后挪3个单位，稍微离物体远点
scene.add; // 把相机也加到场景里

3. Renderer：把想象画成现实

有了舞台，有了眼睛，现在缺的是那个“画”出来的动作。这就是 WebGLRenderer 的工作。它就像是一个不知疲倦的画家，拿着Scene里的内容和Camera的视角，一帧一帧地画在 canvas 画布上。

// 配置渲染器
const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector
});
renderer.setSize;

这段代码其实就是在告诉渲染器：“嘿，去页面上找那个叫 webgl 的画布，然后把画布的尺寸设成这么大。” 这就好比春晚的导播室，把现场的画面信号传输到你家里的电视机上，尺寸还得对得上屏幕。

第三步：让世界拥有“血肉”——物体与材质

现在的场景里还是空空如也，太寂寞了。我们来点实在的东西。在Three.js里kan得见的物体叫 Mesh。网格是怎么来的？它是由两部分组成的：几何体 + 材质。

1. 几何体：物体的骨架

几何体决定了物体长什么样，是方的还是圆的，是高还是矮。比如我们要Zuo一个立方体：

// 创建物体
const geometry = new THREE.BoxGeometry;

2. 材质：物体的皮肤

只有骨架可不行，还得给它穿衣服。材质决定了物体表面的质感：是红色的还是蓝色的？是反光的金属还是粗糙的木头？

// 材质
const material = new THREE.MeshBasicMaterial;

3. 网格：完整的演员

把骨架和皮肤合二为一，就变成了一个真正的演员——网格：

// 网格
const mesh = new THREE.Mesh;
// 将网格添加到场景中
scene.add;

这时候，Ru果你运行代码，应该Nengkan到一个红色的方块静静地悬浮在黑暗中。虽然不动，但它Yi经是个完整的生命了。

第四步：注入灵魂——动画循环

静止的3D场景虽然也Nengkan，但总觉得少了点什么。对，是动感！我们要让这个方块转起来。这就涉及到动画的核心机制了。

动画的本质是什么？其实就是欺骗眼睛。每一帧dou稍微改变一点物体的位置或角度，然后快速连续播放，kan起来就像在动一样。在Web里我们通常用 requestAnimationFrame 来实现这个循环。

为了让旋转geng自然我们需要一个时钟来记录时间：

// 创建时钟对象，用于获取经过的时间
const clock = new THREE.Clock;

接下来定义我们的动画核心函数 tick

// 动画循环
const tick =  => {
    const elapsedTime = clock.getElapsedTime; // 获取过去的时间
    // 让物体随着时间旋转
    mesh.rotation.y = elapsedTime;
    // 让相机始终盯着物体
    camera.lookAt;
    // 渲染这一帧
    renderer.render;
    // 预约下一帧
    window.requestAnimationFrame;
}
tick; // 启动！

这段代码的逻辑非常清晰：造一个时钟 → 配好画笔 → 定义动画流程 → 启动循环。每一帧，我们dou会问时钟：“现在过去多久了？”然后根据这个时间改变方块的旋转角度，Zui后让渲染器把这一瞬间的画面画出来。每秒重复60次流畅的动画就诞生了。

第五步：细节决定成败——深入理解相机与渲染

虽然我们Yi经跑通了流程，但有些细节Ru果不搞懂，以后遇到问题真会抓狂。比如那个 camera.position.z，为什么要设成3？

想象一下你手里拿着一瓶矿泉水，把瓶口直接贴在你的眼球上，你还Nengkan清瓶子上的标签吗？肯定不Neng，一片模糊。只有把瓶子拿远一点，你才Nengkan清全貌。在Three.js的世界里Z轴通常代表深度。把相机往后挪，就是为了把物体“拉远”，让它完整地进入视野。

还有那个 camera.lookAt。这行代码就像给相机装了自动追踪系统，不管物体怎么动，相机的镜头始终死死地盯着它。Ru果不加这行，相机可Neng还在kan着别的地方，画面里就什么dou没有了。

这只是个开始

恭喜你！Ru果你跟着一步步敲下来现在屏幕上应该有一个正在欢快旋转的红色立方体了。这kan起来hen简单，对吧？但你Yi经掌握了Three.jsZui核心的“任督二脉”。

从安装环境、理解核心概念，到实现相机移动、物体渲染，甚至构建一个包含动画的场景，这种自己计算、自己绘制的方式，Neng让你透彻理解每一个顶点是如何从三维世界“降落”到你的屏幕上的。这种掌控感，是直接使用现成游戏引擎无法比拟的。

别停下脚步。接下来你Ke以试着添加灯光，让物体geng有立体感；Ke以试着加载纹理，给方块贴上真实的照片；甚至Ke以试着用鼠标控制它。3D世界的大门Yi经向你敞开，去创造属于你的奇迹吧！

---