ThreeJS 直管道
在 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 参数的设计。
前一篇: ThreeJS后期处理
下一篇: ThreeJS ：给立方体各面加上文字
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2025-6-17 12:23 发布: 这个管道还挺漂亮的
