三维线条渲染：Three.js 中的线模型对象
建议先阅读完文章，再查看 实例代码
在 Three.js 中，渲染线条是一种常见的需求，无论是为了可视化路径、边界还是其他几何结构。Three.js 提供了几种不同的线模型对象来满足这些需求。
建议先阅读完文章，再查看 实例代码
线模型 Line
Line 对象用于渲染一系列顶点，从第一个顶点到最后一个顶点依次连线。
- 具体实例代码:javascript
// 创建几何体 const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.Float32BufferAttribute([ 0, 0, 0, 10, 0, 0, 10, 10, 0, 0, 10, 0 ], 3)); // 线材质对象 const material = new THREE.LineBasicMaterial({ color: 0xff0000 // 线条颜色 }); // 创建线模型对象 const line = new THREE.Line(geometry, material); scene.add(line);
线模型 LineLoop
LineLoop 对象与 Line 类似，但它会在绘制完所有顶点后自动连接回到起始顶点，形成一个闭合的环路。
- 具体实例代码:javascript
// 使用相同的 geometry 和 material 定义 const lineLoop = new THREE.LineLoop(geometry, material); scene.add(lineLoop);
线模型 LineSegments
LineSegments 对象用于渲染非连续的线段。与 Line 和 LineLoop 不同，LineSegments 允许你定义每段线段的起点和终点。
- 具体实例代码:javascript
// 创建 LineSegments 材质 const lineSegmentsMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 // 线条颜色 }); // 创建 LineSegments 对象 const lineSegments = new THREE.LineSegments(geometry, lineSegmentsMaterial); scene.add(lineSegments);
完整实例
以下是一个完整的示例，它演示了如何在 Three.js 场景中创建和渲染 Line、LineLoop 和 LineSegments 对象。
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<link
type="text/css"
rel="stylesheet"
href="https://threejs.org/examples/main.css"
/>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
// 创建几何体
const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(
[0, 0, 0, 10, 0, 0, 10, 10, 0, 0, 10, 0],
3
)
);
// 创建材质
const material = new THREE.LineBasicMaterial({
color: 0xff0000,
});
// 创建 Line, LineLoop, LineSegments 对象
const line = new THREE.Line(geometry, material);
const lineLoop = new THREE.LineLoop(geometry, material.clone());
const lineSegments = new THREE.LineSegments(geometry, material.clone());
// scene.add(line);
// scene.add(lineLoop);
scene.add(lineSegments);
// 设置相机位置
camera.position.z = 5;
// 渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>在这个示例中，我们首先创建了一个场景、一个透视相机和一个 WebGL 渲染器。然后，我们定义了一个 BufferGeometry 对象，其中包含了四个顶点。我们使用相同的几何体和材质来创建 Line、LineLoop 和 LineSegments 对象，并将它们添加到场景中。最后，我们设置相机的位置并启动渲染循环。