一、搭建舞台——“三剑客”的诞生
在 3D 世界里，所有的表演都需要一个舞台。Three.js 遵循“三剑客”原则：场景、相机、渲染器。
在你的代码开头，我们看到了这样的设定：
// 1. 场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);
// 2. 相机
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 40;
// 3. 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
const viewContainer = document.getElementById('view');
renderer.setSize(viewContainer.clientWidth, viewContainer.clientHeight);
viewContainer.appendChild(renderer.domElement);
解析：
- 场景：这就好比是一个空荡荡的剧院舞台。我们把它涂成了深灰色 (
0x222222)，方便看清演员。 - 相机：观众的眼睛。这里用的是
PerspectiveCamera（透视相机）。40是视野角度（FOV），就像你睁大眼睛还是眯着眼睛看。window.innerWidth / window.innerHeight是长宽比，保证画面不变形。camera.position.z = 40：这一步很关键！默认情况下，物体在坐标原点 (0,0,0)，相机也在原点。如果你不移开相机，你就跟物体“贴脸”了，什么也看不见。我们把相机往后拉 40 米，就能看清全貌了。
- 渲染器：剧院的灯光和特效组。它负责把脑海中的画面画到屏幕上。
{ antialias: true }：开启了抗锯齿，让边缘光滑，不再有毛刺。
二、点亮世界——没有光，一切都是黑的
如果你直接把物体放进去，可能会发现一片漆黑。为什么？因为在 3D 世界里，除了特殊的“基础材质”，大多数材质都需要光才能被看见。
代码里添加了两个光源：
{
const light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set(-1, 2, 4);
scene.add(light);
}
// ... 还有一个方向相反的光
这里用的是 平行光，模拟太阳光。
- 第一盏灯：位置在左上方
(-1, 2, 4)，负责照亮物体的正面。 - 第二盏灯：位置在右下方
(1, -2, -4)，负责照亮物体的背面或暗部。
为什么要两盏灯？ 这是一种低成本的“补光”技巧，防止物体背光面死黑一片，让立体感更强。
三、万物之源——几何体与材质
在 3D 世界里，一个物体 = 几何体 + 材质。
- 几何体：骨架，决定了形状（是方的、圆的，还是扭曲的）。
- 材质：皮肤，决定了外观（是金属的、塑料的，还是半透明的）。
代码中定义了一个 primitives 对象，里面藏着 20 多种不同的几何体生成函数。让我们挑几个常用模型进行分析：
1. 基础款：方块与球体
'BoxGeometry': () => {
const width = 8, height = 8, depth = 8;
addSolidGeometry(new THREE.BoxGeometry(width, height, depth));
},
'SphereGeometry': () => {
// ...
addSolidGeometry(new THREE.SphereGeometry(radius, widthSegments, heightSegments));
},
这是最基础的构建模块。BoxGeometry 就像捏泥人时的方块，SphereGeometry 则是球体。注意 widthSegments 参数，它决定了球体的精细度——段数越多，球越圆，但计算量也越大。
2. 进阶款：挤压与车削
这可是把 2D 变成 3D 的魔法！
-
ExtrudeGeometry（挤压几何体）： 代码里画了一个爱心形状的 2D 路径，然后给它一个厚度，它就变成了一个 3D 的爱心。
'ExtrudeGeometry': () => { const shape = new THREE.Shape(); // ... 画 2D 路径 ... const extrudeSettings = { depth: 2, bevelEnabled: true, ... }; addSolidGeometry(new THREE.ExtrudeGeometry(shape, extrudeSettings)); },想象一下，你用饼干模具在面团上按了一下，这就是 ExtrudeGeometry 做的事。
-
LatheGeometry（车削几何体）： 这就像陶艺转盘。你定义好一个侧面的轮廓线，它旋转一圈就变成了一个罐子。
'LatheGeometry': () => { const points = []; // 一系列二维点 // ... addSolidGeometry(new THREE.LatheGeometry(points)); },
3. 数学之美：参数化几何体与克莱因瓶
代码里最“不明觉厉”的部分来了：
function klein(v, u, target) {
// ... 一堆复杂的数学公式 ...
}
'ParametricGeometry': () => {
addSolidGeometry(new ParametricGeometry(klein, slices, stacks));
},
ParametricGeometry 允许你用数学公式来定义形状。这里的 klein 函数生成了一个著名的数学模型——克莱因瓶。它是一个没有“内”和“外”之分的奇怪瓶子。对于初学者，你只需要知道：只要你能写出 x, y, z 的方程，Three.js 就能帮你画出模型。
4. 文字 3D 化
'TextGeometry': () => {
const loader = new FontLoader();
const font = loader.parse(local_font);
const textGeometry = new TextGeometry('three.js', { font, size: 3, ... });
// ...
},
想让网页显示立体的 "Hello World"？你需要加载字体文件，然后 TextGeometry 会帮你把文字变成 3D 模型，甚至还能加倒角让文字更有质感。
每种基础元件的详细介绍会在后续文章介绍
核心代码与完整示例： my-three-app
总结
如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货
