使用Threejs通过纹理位移实现管道液体流动动画-开发者社区-阿里云

Threejs实现模拟管道液体流动

2022-10-19 3650

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Threejs实现模拟管道液体流动

1，介绍

该示例使用的是 r95版本Three.js库。

主要实现功能：模拟管道液体流动。效果图如下：

2，主要说明

模拟管道液体流动实现步骤：创建管道，添加纹理，位移纹理实现流动效果。

如下函数：定义管道位置坐标，创建管道并赋予材质，并添加到场景中

function initTubeModel() {
  var pointsArr = [
    [42, 0, 10],
    [21, 0, 10],
    [21, 0, 1],
    [-3, 0, 1],
    [-3, 0, -18],
    [-10, 0, -18],
    [-10, 0, 5],
    [1, 0, 5],
    [1, 0, 24],
    [-27, 0, 24],
    [-27, 0, 18],
    [-46, 0, 19],
    [-46, 0, -4],
    [-25, 0, -6],
    [-25, 0, -19],
    [-35, 0, -20],
    [-35, 0, -26],
    [-30, 0, -30],
    [3, 0, -30]
  ];
  var curve = createPath(pointsArr)
  var tubeGeometry = new THREE.TubeGeometry(curve, 1000, 0.5, 100, false);
  var textureLoader = new THREE.TextureLoader();
  texture = textureLoader.load('assets/textures/arrow1.jpg'); //./ZS箭头.svg  ./arrow.jpg
  // 设置阵列模式为 RepeatWrapping
  texture.wrapS = THREE.RepeatWrapping
  texture.wrapT = THREE.RepeatWrapping
  texture.repeat.x = 50;
  texture.repeat.y = 2;
  texture.offset.y = 0.5;
  var tubeMaterial = new THREE.MeshPhongMaterial({
    map: texture,
    transparent: true,
    color: 0x47d8fa,
    side: THREE.DoubleSide,
    //opacity: 0.4,
  });
  // 设置数组材质对象作为网格模型材质参数
  var mesh = new THREE.Mesh(tubeGeometry, tubeMaterial); //网格模型对象Mesh
  mesh.position.y = 2;
  mesh.rotateZ(3.14);
  mesh.scale.set(2, 2, 2);
  scene.add(mesh); //网格模型添加到场景中
}

function createPath(pointsArr) {
  pointsArr = pointsArr.map((point) => new THREE.Vector3(...point)); // 将参数数组转换成点数组的形式
  // 方法一：自定义三维路径 curvePath
  const path = new THREE.CurvePath();
  for (let i = 0; i < pointsArr.length - 1; i++) {
    const lineCurve = new THREE.LineCurve3(pointsArr[i], pointsArr[i + 1]); // 每两个点之间形成一条三维直线
    path.curves.push(lineCurve); // curvePath有一个curves属性，里面存放组成该三维路径的各个子路径
  }
  return path;
}

流动效果关键一步，动态刷新调用，位移材质

function renderScene() {
  TWEEN.update();
  orbit.update();
  // 使用requestAnimationFrame函数进行渲染
  requestAnimationFrame(renderScene);
  renderer.render(scene, camera);
  texture.offset.x -= 0.04
}