Three.js 入门:30行代码画出你的第一条3D线条

核心概念：3个必备元素

在 Three.js 中，想要渲染任何东西，你需要理解3个核心概念：

1. 1. 场景 (Scene) - 就像一个舞台，所有物体都放在这里
2. 2. 相机 (Camera) - 就像你的眼睛，决定从哪个角度看舞台
3. 3. 渲染器 (Renderer) - 把场景和相机的内容画到屏幕上

完整代码

import * asTHREEfrom'three';// 1️⃣ 创建场景 - 所有物体的容器const scene = newTHREE.Scene();// 2️⃣ 创建相机 - 决定我们从哪里看const camera = newTHREE.PerspectiveCamera(75,                           // 视野角度  innerWidth / innerHeight,     // 宽高比0.1,                          // 近裁剪面1000// 远裁剪面);camera.position.z = 5;          // 把相机往后移，才能看到原点的物体// 3️⃣ 创建渲染器 - 把3D内容画到网页上const renderer = newTHREE.WebGLRenderer({ antialias: true });renderer.setSize(innerWidth, innerHeight);document.body.appendChild(renderer.domElement);// 4️⃣ 画线！// 定义线条经过的点const points = [newTHREE.Vector3(-2, 0, 0),   // 左边的点newTHREE.Vector3(0, 2, 0),    // 顶部的点newTHREE.Vector3(2, 0, 0)     // 右边的点];// 用这些点创建几何体const geometry = newTHREE.BufferGeometry().setFromPoints(points);// 创建线条材质（绿色）const material = newTHREE.LineBasicMaterial({ color: 0x00ff00 });// 组合几何体和材质，创建线条对象const line = newTHREE.Line(geometry, material);// 把线条添加到场景中scene.add(line);// 5️⃣ 渲染！renderer.render(scene, camera);

代码解析

画线三步曲

📂 核心代码与完整示例：my-three-app^[1]

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货

引用链接

[1] my-three-app: https://github.com/qq790git/my-three-app.git