当前位置：首页 > news >正文

Threejs绘制方形管道

news 来源：原创 2024/9/20 13:32:05

之前有用Threejs的TubeGeometry绘制管道效果，但是TubeGeometry的管道效果默认是圆形的截面，这节实现方形截面的管道绘制。

因为Threejs不提供方形截面的管道，所以使用的是绘制截面，然后拉伸的方式，所以需要先绘制一个方形，当然在此之前还是要先创建一个场景，包括灯光，相机，渲染器等，之前章节已有过就不再贴代码了，下面先通过Shape创建一个截面

const shape = new THREE.Shape();// 创建形状
shape.moveTo(0, 0);
shape.lineTo(2, 0);
shape.lineTo(2, 2);
shape.lineTo(0, 2);
shape.lineTo(0, 0);

然后用CatmullRomCurve3绘制出曲线，也是后面轨道的轨迹，

 const curve = new THREE.CatmullRomCurve3([new THREE.Vector3( -10, -50, -50 ),new THREE.Vector3( 10, 0, 0 ),new THREE.Vector3( 8, 50, 50 ),new THREE.Vector3( -5, 0, 100)]);

通过ExtrudeGeometry拉伸的方法，将shape截面和曲线curve传入后，进行拉伸，并设置路径的精度，就可以得到一个几何体geometry，再添加一个材质，创建网格模型，添加到场景中。就可以得到下面的3D模型，

const geometry = new THREE.ExtrudeGeometry(shape,  { // 创建挤出几何体extrudePath:curve,//扫描轨迹steps:100 //沿着路径细分精度，越大越光滑});const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建材质const mesh = new THREE.Mesh(geometry, material); // 创建网格
this.scene.add(mesh);// 将网格添加到场景中

但是这个管道为纯色，下面给这个管道添加贴图，让他更真实，我就随便找了张图片作为贴图，代替原有的材质，完整代码如下：

initExtrudeGeometry(){  // 创建挤出几何体const shape = new THREE.Shape();// 创建形状shape.moveTo(0, 0);shape.lineTo(4, 0);shape.lineTo(4, 4);shape.lineTo(0, 4);shape.lineTo(0, 0);// 扫描轨迹：创建轮廓的扫描轨迹(3D样条曲线)const curve = new THREE.CatmullRomCurve3([new THREE.Vector3( -10, -50, -50 ),new THREE.Vector3( 10, 0, 0 ),new THREE.Vector3( 8, 50, 50 ),new THREE.Vector3( -5, 0, 100)]);const geometry = new THREE.ExtrudeGeometry(shape,  { // 创建挤出几何体extrudePath:curve,//扫描轨迹steps:100 //沿着路径细分精度，越大越光滑});const texLoader = new THREE.TextureLoader();//纹理贴图加载器TextureLoaderconst texture = texLoader.load('/static/images/cold1.png');// .load()方法加载图像，返回一个纹理对象Textureconst material = new THREE.MeshBasicMaterial({ // 设置纹理贴图：Texture对象作为材质map属性的属性值map: texture,//map表示材质的颜色贴图属性});// 设置阵列模式texture.wrapS = THREE.RepeatWrapping;texture.wrapT = THREE.RepeatWrapping;// uv两个方向纹理重复数量texture.repeat.set(0.5,0.5);//注意选择合适的阵列数量// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建材质const mesh = new THREE.Mesh(geometry, material); // 创建网格this.scene.add(mesh);// 将网格添加到场景中},

最终的效果如下，不过贴图还是根据实际场景选择，效果会更好