ThreeJS 的效果样例流水管线(五)
一、流水管线https://img2024.cnblogs.com/blog/2310605/202409/2310605-20240925150446347-2078665047.gif
实现逻辑：
1）先自定义几个点，通过CatmullRomCurve3生成一条平滑曲线
2）根据生成的曲线在XY面扩展一个面，其中需要注意顶点索引、UV坐标添加的顺序，否则可能会导致绘制的图片混乱，不是完整的图片
3）添加纹理同时设置偏移量实现流动效果
4）为了保证显示的箭头图标不失真，根据管线的长度和图标的长度动态计算repeat的个数
https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gifhttps://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.giffunction addFlowByGeometry() {// 自定义点const points = [ new THREE.Vector3(-5, 5, 0), new THREE.Vector3(-5, 0, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(5, 0, 0), new THREE.Vector3(5, -5, 3),];// 生成一条平滑的曲线const curve = new THREE.CatmullRomCurve3(points);const srcGeometry = new THREE.TubeGeometry(curve, 64, 0.8, 32, false);const srcMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.1, side: THREE.DoubleSide // 两面都显示});const srcMesh = new THREE.Mesh(srcGeometry, srcMaterial);scene.add(srcMesh);// 定义曲面的分辨率const widthSegments = 32;const heightSegments = 32;// 定义顶点位置和纹理坐标const vertices = [];const uvs = [];// 定义扩展宽度const width = 0.5;for (let y = 0; y{ texture.offset.x -= 0.04;}, 30)}流动管线
来源:https://www.cnblogs.com/codeOnMar/p/18406450
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]