ThreeJs制作管道中水流效果

之前有讲过如何制作管道效果，使用了TubeGeometry对象，先通过多个点绘制曲线，通过这个曲线使用TubeGeometry绘制管道，不过要在管道中绘制水流效果就需要有动态的效果，动态效果这里通过贴图的位移来实现；下面开始详细的绘制步骤：

首先新建场景，相机，灯光，渲染器等

登录后复制

initScene(){
      scene = new THREE.Scene();
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(200,200,200);
    },
    initLight(){
      //添加两个平行光
      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight1.position.set(-300,-300,600)
      scene.add(directionalLight1);
      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5);
      directionalLight2.position.set(600,200,600)
      scene.add(directionalLight2);
    },
 initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#FFFFFF', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      this.controls.maxPolarAngle = Math.PI / 2.2;      // // 最大角度
    },
    initAnimate() {
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(scene, this.camera);
    },

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.

此时得到一个空白的场景，因为没有添加模型所以此时里面什么都没有。首先开始创建一个管道，先在场景中随机取一些点，然后通过这些点连接为曲线，通过曲线创建将这些点连起来的管道TubeGeometry对象，这样一个管道就绘制好了，不过要添加水流效果的话这里要给管道添加贴图，大家可以根据需要选择适合的贴图，我这里用的是一个图片作为演示，图片是一半白色一半红色作为显示热水的流动效果，如果冷水可以用蓝色，

登录后复制

const path = new THREE.CatmullRomCurve3([
        new THREE.Vector3(60, 60, 0),
        new THREE.Vector3(-60, 60, 10),
        new THREE.Vector3(-60, -60, 0),
        new THREE.Vector3(60, -60, 10),
      ]);
      let geometry1 = new THREE.TubeGeometry(path, 100, 2, 25, false);

      let textureLoader = new THREE.TextureLoader();
      let texture = textureLoader.load('/static/images/qrcode.png')
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

      this.material = new THREE.MeshBasicMaterial({
        map:texture,
        transparent: false,
      }); //材质对象Material
      let mesh1 = new THREE.Mesh(geometry1, this.material); //网格模型对象Mesh
      scene.add(mesh1); //网格模型添加到场景

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.

使用的图片

这里显示出来管道效果如下：目前还是静止的，因为还未添加动态效果

但是此时贴图是紧贴管壁的，不像是在内部流动，所以要给这个管道外面再套一层透明的管道，比这个管道稍微粗一点，留出管壁的空隙，这样才更像是在管道内部流动。

登录后复制

let tubeGeometry2 = new THREE.TubeGeometry(path, 100, 4, 25, false);
      let tubeMaterial2 = new THREE.MeshPhongMaterial({
        color: 0xaaaaaa,
        transparent: true,
        opacity: 0.5,
      });
      let tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2);
      scene.add(tube2);

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

这里仔细看，可以发现，水流和管壁之间已经有了一些空隙，空隙的宽度由两个管道的半径差决定。

下面就可以做水流动的效果了，让贴图动起来就需要不断的让贴图位移，可以在requestAnimationFrame中加入贴图位移的方法，

登录后复制

this.offset ++;
this.material.map.offset.x =  0.005 * this.offset; 
this.material.map.repeat.set(1, 1);

• 1.
• 2.
• 3.

最终效果如下：这里不方便放视频，我就用图片来表示，

好了如果需要全部源码或者有其他问题可私信我