BIM管道流向主要是描述管道内液体流动方向的一个业务场景,
在BIM管道分析展示中一个比较常用的场景,这次基于threejs的纹理流动,实现一版效果,主要如下:
原理很简单就是借助TubeGeometry,配合MeshPhongMaterial材质,在设置texture 的时候,给一个循环函数,让纹理的offset(偏移)每次都递增,就可以达到感觉有一个流动的特效。
// 此部分为了展示为hardcode
const pathArr = [
4624.99, 2329.38, -5843.11,
4624.99, 4643.14, -5843.11,
1437.47, 4643.14, -5819.36,
1413.69, 4643.14, -1854.40,
-6983.28, 4643.14, -1854.04,
-7078.43, 4643.14, 2149.46
]
const radius = 500
核心代码函数createTube如下
// 动态创建一个管道
function createTube(pathArr, radius) {
let curveArr = []