Three.js 零基础入门：手把手打造交互式 3D 几何体展示系统

一、搭建舞台------"三剑客"的诞生

在 3D 世界里，所有的表演都需要一个舞台。Three.js 遵循"三剑客"原则：场景、相机、渲染器。

在你的代码开头，我们看到了这样的设定：

javascript 复制代码

// 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 世界里，除了特殊的"基础材质"，大多数材质都需要光才能被看见。

代码里添加了两个光源：

javascript 复制代码

{
    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. 基础款：方块与球体

javascript 复制代码

'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 的爱心。
javascript 复制代码
```
'ExtrudeGeometry': () => {
    const shape = new THREE.Shape();
    // ... 画 2D 路径 ...
    const extrudeSettings = { depth: 2, bevelEnabled: true, ... };
    addSolidGeometry(new THREE.ExtrudeGeometry(shape, extrudeSettings));
},
```
想象一下，你用饼干模具在面团上按了一下，这就是 ExtrudeGeometry 做的事。
LatheGeometry（车削几何体）：这就像陶艺转盘。你定义好一个侧面的轮廓线，它旋转一圈就变成了一个罐子。
javascript 复制代码
```
'LatheGeometry': () => {
    const points = []; // 一系列二维点
    // ...
    addSolidGeometry(new THREE.LatheGeometry(points));
},
```

3. 数学之美：参数化几何体与克莱因瓶

代码里最"不明觉厉"的部分来了：

javascript 复制代码

function klein(v, u, target) {
    // ... 一堆复杂的数学公式 ...
}

'ParametricGeometry': () => {
    addSolidGeometry(new ParametricGeometry(klein, slices, stacks));
},

ParametricGeometry 允许你用数学公式来定义形状。这里的 klein 函数生成了一个著名的数学模型------克莱因瓶 。它是一个没有"内"和"外"之分的奇怪瓶子。对于初学者，你只需要知道：只要你能写出 x, y, z 的方程，Three.js 就能帮你画出模型。

4. 文字 3D 化

javascript 复制代码

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