ThreeJS 直管道

马黑黑 · 发表于 2025-6-17 11:55

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

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

x

在 ThreeJS 中使用默认参数绘制一根管道是超简单的。下面我们演示一下如何在 basic3 创建的 ThreeJS 环境下实现绘制工作：

<script type="module">
	import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
	basic3(); // 启动ThreeJS工作环境

	const geometry = new THREE.TubeGeometry(); // 管道几何体
	const material = new THREE.MeshNormalMaterial(); // 法线网格材质
	const mesh = new THREE.Mesh(geometry, material); // 几何体+材质 => 管道图像
	scene.add(mesh); // 图像添加到场景
	renderer.render(scene, camera); // 渲染效果
</script>

运行代码应该会看到一个相当于二通水管转接头的图像，其弯曲的形状是由二次贝塞尔路径创建而成。本文的任务是绘制一个直的管道，这需要复习一下 TubeGeometry() 的构造器即构成管道几何体所需的各个参数，总共五个：

① path : 路径，一个由基类Curve继承而来的3D路径，字符型，默认是二次贝塞尔路径曲线；
② tubularSegments : 组成这一管道的分段数，整数型，默认值为64；
③ radius : 管道的半径，浮点型，默认值为1；
④ radialSegments : 管道横截面的分段数目，整数型，默认值为8
⑤ closed : 管道的两端是否闭合，布尔值，默认值为false

可以看出，参数一 path 参数决定管道的形状、参数二 tubularSegments 影响管道的平滑度、参数三 radius 定义管道的大小、参数四 radialSegments 参与决定形状，即管道口呈现出来的结果是多边形还是圆形，参数五设置管道两个端口是开放的还是闭合的。借助第一个参数 path 路径参数，可以为管道几何体准备一个直线路径：

// 使用三维线段曲线 LineCurve3 将两个三维向量点连接成三维直线路径
const path = new THREE.LineCurve3(
	new THREE.Vector3(-1, 0, 0), // 三维向量点 1
	new THREE.Vector3(1, 0, 0) // 三维向量点 2
);

Vector3 创建一个三维向量点 (x,y,z)，表示三维空间上的一个点的三维坐标位置。直线需要两个点，所以，给 LineCurve3 三维线段曲线两个点，它能整出来的曲线就是直线。接下来将 path 变量作为参数用来构建管道，管道几何体所需的其它参数也做好相应的设计：

<script type="module">
	import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';

	basic3();

	// 绘制直的管道
	const path = new THREE.LineCurve3(new THREE.Vector3(-2, 0, 0), new THREE.Vector3(2, 0, 0));
	const geometry = new THREE.TubeGeometry(path, 32, 0.2, 8, false);
	const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }); // 双面渲染材质
	const mesh = new THREE.Mesh(geometry, material);
	mesh.rotateY(Math.PI / 3); // 在X轴上定位
	scene.add(mesh);
	renderer.render(scene, camera);
</script>

这就完成了直管道的绘制工作。可以设计其它任意形状的管道，核心是 path 参数的设计。