ThreeJs制作管道中水流效果

简介: 这篇文章详细介绍了如何在Three.js中创建具有动态水流效果的管道模型,通过纹理贴图的移动来模拟水流的视觉效果。

之前有讲过如何制作管道效果,使用了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);
    },

此时得到一个空白的场景,因为没有添加模型所以此时里面什么都没有。首先开始创建一个管道,先在场景中随机取一些点,然后通过这些点连接为曲线,通过曲线创建将这些点连起来的管道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); //网格模型添加到场景

使用的图片

ThreeJs制作管道中水流效果_ThreeJs

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

ThreeJs制作管道中水流效果_Math_02

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

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);

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

ThreeJs制作管道中水流效果_Math_03

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

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

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

ThreeJs制作管道中水流效果_Math_03

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

相关文章
Threejs实现模拟管道液体流动
Threejs实现模拟管道液体流动
3096 0
Threejs实现模拟管道液体流动
Threejs实现模拟河流,水面水流,水管水流,海面
Threejs实现模拟河流,水面水流,水管水流,海面
3205 0
Threejs实现模拟河流,水面水流,水管水流,海面
|
JavaScript
Threejs实现标签,自定义样式显示标签
Threejs实现标签,自定义样式显示标签
1795 0
Threejs实现标签,自定义样式显示标签
|
数据可视化 定位技术
three.js实现烟雾缭绕效果
前言 大家好!我是Fly哥,最近接广告的接的有点多, 感谢大家还是一如既往的支持我!respect, 前几天我在朋友圈分享了一个烟雾缭绕的效果。很多小伙伴都表示非常感兴趣,有的同学说用到了噪声, 有的同学说用到了着色器,还有更过分说用到了ps, 胖虎竟然无语凝噎。其实都是就是简单的贴图。配合一点想象力。我们先看下效果: 然后我就发了一条朋友圈,问这个像什么?? 有的说 云层, 有的说云墨,有的说雾霭, 其实都不是, 我想做的是烟雾。好的话不不多说!, 本篇文章阅读大概5分钟。不耽误大家太多时间,主要是介绍思路, 说太多也没啥意义。如果你对three.js 还没有一点了解都没有,
three.js实现烟雾缭绕效果
Threejs实现下雨,下雪,阴天,晴天,火焰
Threejs实现下雨,下雪,阴天,晴天,火焰
2387 0
Threejs实现下雨,下雪,阴天,晴天,火焰
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
2607 0
Threejs实现相机视角切换,平滑过渡,点击模型切换到查看模型视角
Threejs实现天空盒,全景场景,地面草地
Threejs实现天空盒,全景场景,地面草地
1726 0
Threejs实现天空盒,全景场景,地面草地
|
11月前
ThreeJs制作管道水流效果
这篇文章详细说明了如何在Three.js中创建具有流动水效果的管道模型,通过使用纹理贴图的动态偏移来模拟水流的视觉效果。
641 3
|
11月前
|
图形学
ThreeJs创建管道效果
这篇文章介绍了在Three.js中创建管道(Tube)效果的方法和技术细节。
341 3
ThreeJs创建管道效果
|
11月前
Threejs中导入GLTF模型克隆后合并
这篇文章详细说明了在Three.js中如何导入GLTF模型,对其进行克隆,并将多个克隆模型合并成一个整体模型的过程。
426 2
Threejs中导入GLTF模型克隆后合并