核心概念：3个必备元素
在 Three.js 中，想要渲染任何东西，你需要理解3个核心概念：
- 场景 (Scene) - 就像一个舞台，所有物体都放在这里
- 相机 (Camera) - 就像你的眼睛，决定从哪个角度看舞台
- 渲染器 (Renderer) - 把场景和相机的内容画到屏幕上
完整代码
import * as THREE from 'three';
// 1️⃣ 创建场景 - 所有物体的容器
const scene = new THREE.Scene();
// 2️⃣ 创建相机 - 决定我们从哪里看
const camera = new THREE.PerspectiveCamera(
75, // 视野角度
innerWidth / innerHeight, // 宽高比
0.1, // 近裁剪面
1000 // 远裁剪面
);
camera.position.z = 5; // 把相机往后移，才能看到原点的物体
// 3️⃣ 创建渲染器 - 把3D内容画到网页上
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
// 4️⃣ 画线！
// 定义线条经过的点
const points = [
new THREE.Vector3(-2, 0, 0), // 左边的点
new THREE.Vector3(0, 2, 0), // 顶部的点
new THREE.Vector3(2, 0, 0) // 右边的点
];
// 用这些点创建几何体
const geometry = new THREE.BufferGeometry().setFromPoints(points);
// 创建线条材质（绿色）
const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
// 组合几何体和材质，创建线条对象
const line = new THREE.Line(geometry, material);
// 把线条添加到场景中
scene.add(line);
// 5️⃣ 渲染！
renderer.render(scene, camera);
代码解析
画线三步曲
| 步骤 | 代码 | 说明 |
|---|---|---|
| 1 | BufferGeometry().setFromPoints(points) | 定义线条的形状（经过哪些点） |
| 2 | LineBasicMaterial({ color }) | 定义线条的外观（颜色） |
| 3 | new THREE.Line(geometry, material) | 把形状和外观组合成线条对象 |
📂 核心代码与完整示例： my-three-app
总结
如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货
