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 }
