vlambda博客
学习文章列表

Threejs—BIM管道流向动态效果

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 = []
// 三个一组取出curve数据
for(let i=0; i < pathArr.length; i+=3) {
curveArr.push(new THREE.Vector3(pathArr[i], pathArr[i+1], pathArr[i+2]))
}
var curve = new THREE.CatmullRomCurve3(curveArr);
/**
* TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
*/

var tubeGeometry = new THREE.TubeGeometry(curve, 100, radius, 50, false);
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load(`${process.env.BASE_URL}imgLib/arrow.png`);

// 设置阵列模式 RepeatWrapping
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping
// 设置x方向的重复数(沿着管道路径方向)
// 设置y方向的重复数(环绕管道方向)
texture.repeat.x = 10;
texture.repeat.y = 4;
// 设置管道纹理偏移数,便于对中
texture.offset.y = 0.5;
var tubeMaterial = new THREE.MeshPhongMaterial({
map: texture,
transparent: true,
});
var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
// 使用加减法可以设置不同的运动方向
setInterval(() => {
texture.offset.x -= 0.0076
})
return tube
}

具体业务中需要定位组织数据管道路径curve,可以从boundingbox中求出一个外接圆,进而套用这个方法生成流动特效,注意组件销毁时候的setInterval函数的清除避免内存泄漏。






BIM树洞

Yenseaon

做一个静谧的树洞君

用建筑的语言描述IT事物;

用IT的思维解决建筑问题;

共建BIM桥梁,聚合团队。

本学习分享资料不得用于商业用途,仅做学习交流!!如有侵权立即删除!!