Threejs realizes the simulation of river, surface flow, pipe flow and sea surface

1, Introduce

         Use Three.js introduce Water.js, Realize the simulation of river surface , Piped water .

The renderings are as follows ：

Reference cases ：three.js webgl - shaders - ocean (threejs.org)https://threejs.org/examples/webgl_shaders_ocean.html

three.js - water (threejs.org)https://threejs.org/examples/webgl_water.html

2, Implementation notes

1, The river implementation needs to create an irregular geometry , Then create Water Object incoming Geometry

2, Simulating pipe flow requires creating two pipes , A pipe simulates the flow of water , A pipe is wrapped outside

//  Create a smooth 2D spline 
const curve = new THREE.SplineCurve([
	new THREE.Vector2(1520, 2850),
	new THREE.Vector2(420, 180),
	new THREE.Vector2(220, 280),
	new THREE.Vector2(100, -380),
	new THREE.Vector2(-500, 780),
]);
//  Returns the set of points at a given position on a curve 
const points = curve.getPoints(1000);

//  Points to create a smooth 3D spline 
const curves = new THREE.CatmullRomCurve3([
	new THREE.Vector3(100, 0, 100),
	new THREE.Vector3(0, 0, 100),
	new THREE.Vector3(0, -100, 100),
]);
//  Create pipe Geometry 
const geometryTube1 = new THREE.TubeGeometry(curves, 200, 10, 50);
const geometryTube = new THREE.TubeGeometry(curves, 200, 9, 50);
//  Create materials 
const materialTube = new THREE.MeshBasicMaterial({
	color: "#00aa00", //  Tube color 
	transparent: true, //  Whether the pipe is transparent 
	side: THREE.DoubleSide,
	opacity: 0.5, //  Tube transparency 
});
//  Create a tube object 
const meshTube = new THREE.Mesh(geometryTube1, materialTube);
meshTube.position.x = -300;
meshTube.rotation.y = Math.PI;
//  Add to scene 
scene.add(meshTube);

water = new Water(geometryTube, {
	textureWidth: 112, //  Water turbidity , density 
	textureHeight: 112, //  Water turbidity , density 
	waterNormals: new THREE.TextureLoader().load('assets/textures/waternormals.jpg', function(texture) {
		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
	}),
	waterColor: "#ffffff",
});
water.position.x = -300;
water.rotation.y = Math.PI;
scene.add(water);

let splineShape = new THREE.Shape(points);
let geometry = new THREE.ShapeGeometry(splineShape);
water1 = new Water(geometry, {
	textureWidth: 1512, //  Water turbidity , density 
	textureHeight: 1512, //  Water turbidity , density 
	waterNormals: new THREE.TextureLoader().load('assets/textures/waternormals.jpg', function(texture) {
		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
	}),
	waterColor: "#ffffff", //  Water color 
});
water1.position.y = -90;
water1.position.x = -200;
water1.rotation.x = Math.PI * -0.5;
scene.add(water1);

Finally, pay attention to whether the water surface can have wave effect , stay  render Add the following code

water.material.uniforms['time'].value += 2.0 / 60.0;