three.js几何体之管道缓冲几何体

马黑黑 · 发表于 2025-5-20 07:17

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

管道缓冲几何体（TubeGeometry）用于创建一个沿着三维曲线延伸的管道。构造器：

TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)

其中：

path — Curve - 一个由基类Curve继承而来的3D路径。缺省时默认为二次贝塞尔路径
tubularSegments — 整数值，组成这一管道的分段数，默认值为 64
radius — 浮点数值，管道的半径，默认值为 1
radialSegments — 整数值，管道横截面的分段数目，默认值为 8
closed — 布尔值，管道的两端是否闭合，默认值为false

如下代码，演示了如何定义二次贝塞尔曲线路径并用于创建管道几何体 TubeGeometry，所构建的曲线路径是参数缺省时 three.js 使用的默认值，管道分段数、管道半径、管道横截面分段数等均使用默认值，TubeGeometry() 参数实际上可以留空。运行代码将看到一个线框立体管道：

<div style="position: absolute; color: #eee; margin: 10px;">点击页面可暂停/继续动画</div>
<script type="module">
	import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';

	const scene = new THREE.Scene;
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 0, 5);
	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	// 创建二次贝塞尔路径（路径其实是默认的，这里只是为了演示）
	const path = new THREE.QuadraticBezierCurve3(
		new THREE.Vector3(-1, -1, 0),
		new THREE.Vector3(-1, 1, 0),
		new THREE.Vector3(1, 1, 0)
	);

	const geometry = new THREE.TubeGeometry(path, 64, 1, 8, false); // 参数都是默认值，可以空
	const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 'tan' }); // 线框化基础材质
	const mesh = new THREE.Mesh(geometry, material); // 构图
	scene.add(mesh); // 图形加入场景

	const clock = new THREE.Clock();

	const animate = () => {
		requestAnimationFrame(animate);
		const delta = clock.getDelta();
		mesh.rotation.y -= delta / 5;
		renderer.render(scene, camera);
	};

	window.onresize = () => {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	}

	document.onclick = () => clock.running ? clock.stop() : clock.start();

	animate();
</script>