threejs 用 ExtrudeGeometry 画管线

最新推荐文章于 2025-06-09 13:45:00 发布

原创最新推荐文章于 2025-06-09 13:45:00 发布 · 6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#管线 #three

threejs 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用Three.js的ExtrudeGeometry方法，通过指定路径和形状来创建3D管道模型。详细展示了设置管子半径、绘制圆形截面、定义材质、设置挤出路径等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说一下ExtrudeGeometry ,可以先看官网,这个方法的意思是沿着给定的路径拉伸一个平面图形，然后就成为3D图形了。

所以很明显这个方法要两个参数，路径和图形。

然后接下来说管线的问题。

var radius = data[i]['Diameter'] - 0; // 管子的半径
var shape = new THREE.Shape();
shape.absarc( 0, 0, radius, 0, Math.PI * 2, false );

var material = new THREE.MeshBasicMaterial({color:0xff0000});

var v1 = new THREE.Vector3( 0, 0, 0 );
var v2 = new THREE.Vector3( 100, 0, 0);

var path = new THREE.LineCurve3( v1, v2 )

var extrudeSettings = {
    bevelEnabled: false,
    steps: 1,
    extrudePath: path
};

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

用上面的方法就可以画出一条管子。