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
}