ThreeJs制作管道中水流效果

baker_zhuang

已于 2024-11-18 09:29:23 修改

阅读量1.6k

点赞数 3

分类专栏： ThreeJs 文章标签： Threejs

于 2024-05-08 11:22:18 首次发布

本文链接：https://blog.csdn.net/qq_26881073/article/details/139966072

版权

之前有讲过如何制作管道效果，使用了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(directionalLig