Threejs实现模拟河流，水面水流，水管水流，海面

最新推荐文章于 2025-03-03 16:18:32 发布

左本Web3D

最新推荐文章于 2025-03-03 16:18:32 发布

阅读量1w

点赞数 4

分类专栏： threejs 文章标签： three.js

本文链接：https://blog.csdn.net/baidu_29701003/article/details/125505876

版权

threejs 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了如何利用Three.js库和Water.js插件在WebGL环境中实现3D河流水面的模拟及水管流水的视觉效果。通过创建不规则几何体并结合CatmullRomCurve3来构建水管，使用Water对象赋予表面波动，并调整材质参数以实现逼真的水流动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，介绍

使用Three.js引入Water.js，实现模拟河流水面，水管流水。

效果图如下：

参考案例：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，实现说明

1，河流实现需要创建一个不规则几何体，然后创建Water对象传入几何体

2，模拟水管水流需要创建两个管子，一根管子模拟水流，一根管子包在外面

// 创建一个平滑的二维样条曲线
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),
]);
// 返回曲线上给定位置的点集合
const points = curve.getPoints(1000);

// 点创建一条平滑的三维样条曲线
const curves = new THREE.CatmullRomCurve3([
	new THREE.Vector3(100, 0, 100),
	new THREE.Vector3(0, 0, 100),
	new THREE.Vector3(0, -100, 100),
]);
// 创建管子几何体
const geometryTube1 = new THREE.TubeGeometry(curves, 200, 10, 50);
const geometryTube = new THREE.TubeGeometry(curves, 200, 9, 50);
// 创建材质
const materialTube = new THREE.MeshBasicMaterial({
	color: "#00aa00", // 管子颜色
	transparent: true, // 管子是否透明
	side: THREE.DoubleSide,
	opacity: 0.5, // 管子透明度
});
// 创建管子物体对象
const meshTube = new THREE.Mesh(geometryTube1, materialTube);
meshTube.position.x = -300;
meshTube.rotation.y = Math.PI;
// 添加到场景
scene.add(meshTube);

water = new Water(geometryTube, {
	textureWidth: 112, // 水浑浊程度，密度
	textureHeight: 112, // 水浑浊程度，密度
	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, // 水浑浊程度，密度
	textureHeight: 1512, // 水浑浊程度，密度
	waterNormals: new THREE.TextureLoader().load('assets/textures/waternormals.jpg', function(texture) {
		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
	}),
	waterColor: "#ffffff", // 水颜色
});
water1.position.y = -90;
water1.position.x = -200;
water1.rotation.x = Math.PI * -0.5;
scene.add(water1);

最后注意水面是否可以有波动效果，在 render添加如下代码

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