ThreeJS 的效果样例流水管线(五)

一、流水管线

实现逻辑：
　　1）先自定义几个点，通过CatmullRomCurve3生成一条平滑曲线
　　2）根据生成的曲线在XY面扩展一个面，其中需要注意顶点索引、UV坐标添加的顺序，否则可能会导致绘制的图片混乱，不是完整的图片
　　3）添加纹理同时设置偏移量实现流动效果
　　4）为了保证显示的箭头图标不失真，根据管线的长度和图标的长度动态计算repeat的个数

1. function addFlowByGeometry() {
2.   // 自定义点
3.   const points = [
4.     new THREE.Vector3(-5, 5, 0),
5.     new THREE.Vector3(-5, 0, 0),
6.     new THREE.Vector3(0, 0, 0),
7.     new THREE.Vector3(5, 0, 0),
8.     new THREE.Vector3(5, -5, 3),
9.   ];
11.   // 生成一条平滑的曲线
12.   const curve = new THREE.CatmullRomCurve3(points);
14.   const srcGeometry = new THREE.TubeGeometry(curve, 64, 0.8, 32, false);
15.   const srcMaterial = new THREE.MeshBasicMaterial({
16.     color: 0x00ffff,
17.     transparent: true,
18.     opacity: 0.1,
19.     side: THREE.DoubleSide // 两面都显示
20.   });
21.   const srcMesh = new THREE.Mesh(srcGeometry, srcMaterial);
22.   scene.add(srcMesh);
24.   // 定义曲面的分辨率
25.   const widthSegments = 32;
26.   const heightSegments = 32;
28.   // 定义顶点位置和纹理坐标
29.   const vertices = [];
30.   const uvs = [];
32.   // 定义扩展宽度
33.   const width = 0.5;
35.   for (let y = 0; y <= heightSegments; y++) {
36.     for (let x = 0; x <= widthSegments; x++) {
37.         const u = x / widthSegments;
38.         const v = y / heightSegments;
40.         // 获取曲线上的点
41.         const point = curve.getPoint(u);
43.         // 获取曲线的切线向量
44.         const tangent = curve.getTangent(u);
46.         // 计算法线向量
47.         const normal = new THREE.Vector3(-tangent.y, tangent.x, 0).normalize();
49.         // 扩展成平面
50.         const px = point.x + normal.x * (v * 2 - 1) * width;
51.         const py = point.y + normal.y * (v * 2 - 1) * width;
52.         const pz = point.z;
54.         vertices.push(px, py, pz);
55.         uvs.push(u, v);
56.     }
57.   }
59.   // 定义顶点索引
60.   const indices = [];
62.   for (let y = 0; y < heightSegments; y++) {
63.     for (let x = 0; x < widthSegments; x++) {
64.         const a = x + y * (widthSegments + 1);
65.         const b = x + 1 + y * (widthSegments + 1);
66.         const c = x + 1 + (y + 1) * (widthSegments + 1);
67.         const d = x + (y + 1) * (widthSegments + 1);
69.         indices.push(a, b, d);
70.         indices.push(b, c, d);
71.     }
72.   }
74.   // 创建一个自定义的 BufferGeometry
75.   const geometry = new THREE.BufferGeometry();
77.   // 将顶点位置添加到几何体
78.   geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
80.   // 将顶点索引添加到几何体
81.   geometry.setIndex(new THREE.BufferAttribute(new Uint16Array(indices), 1));
83.   // 将纹理坐标添加到几何体
84.   geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2));
86.   // 创建纹理加载器
87.   const textureLoader = new THREE.TextureLoader();
89.   // 加载纹理
90.   const texture = textureLoader.load('Objects/imgs/arrow.png', () => {
91.     texture.wrapS = THREE.RepeatWrapping;
92.     texture.wrapT = THREE.RepeatWrapping;
93.    
94.     const originalWidth = texture.image.width;
95.     const originalHeight = texture.image.height;
97.     // 创建平面几何体
98.     const [allWidth, allHeight] = [curve.getLength(), 1];
99.     // 更新几何体的尺寸
100.     texture.repeat.set(allWidth / (originalWidth * allHeight / 2 / originalHeight), 1);
102.     // 创建材质
103.     const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, color: 0x00ffff, wireframe: false });
105.     // 创建网格
106.     const mesh = new THREE.Mesh(geometry, material);
108.     // 将网格添加到场景中
109.     scene.add(mesh);
110.   });
111.   setInterval(() => {
112.     texture.offset.x -= 0.04;
113.   }, 30)
114. }

复制代码

流动管线
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

过来提前占个楼