vlambda博客
学习文章列表

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函数的清除避免内存泄漏。