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

简介: Threejs实现模拟河流,水面水流,水管水流,海面

1,介绍


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


效果图如下:

image.png


参考案例:

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;
目录
相关文章
|
XML 安全 定位技术
无人船水下地形测量作业流程
无人船水下地形测量作业流程
295 0
Threejs实现下雨,下雪,阴天,晴天,火焰
Threejs实现下雨,下雪,阴天,晴天,火焰
1740 0
Threejs实现下雨,下雪,阴天,晴天,火焰
|
2月前
|
存储 前端开发 算法
太平洋大西洋水流问题如何解决?一文了解图在前端中的应用
该文章深入探讨了图数据结构的基本概念及其在前端领域的多种应用,包括图的不同表示方法(邻接矩阵与邻接表)和经典的图算法(如深度优先搜索与广度优先搜索),并通过具体实例讲解了如何使用JavaScript来解决图相关的编程问题,如太平洋大西洋水流问题。
太平洋大西洋水流问题如何解决?一文了解图在前端中的应用
|
机器学习/深度学习 人工智能 算法
将有色液体图像转换成透明液体,CMU教机器人准确掌控向杯中倒多少水
将有色液体图像转换成透明液体,CMU教机器人准确掌控向杯中倒多少水
110 0
Threejs实现宇宙中地球动态展示和卫星绕地运动
Threejs实现宇宙中地球动态展示和卫星绕地运动
1016 0
Threejs实现宇宙中地球动态展示和卫星绕地运动
|
机器学习/深度学习 传感器 算法
【湍流】基于Matlab模拟高斯光束在湍流大气中传输仿真,得到大气湍流相位屏、以及光斑强度变化
【湍流】基于Matlab模拟高斯光束在湍流大气中传输仿真,得到大气湍流相位屏、以及光斑强度变化
|
前端开发 JavaScript
【中秋】模拟太阳系行星的公转
【中秋】模拟太阳系行星的公转
202 0
【中秋】模拟太阳系行星的公转
|
数据采集 人工智能 数据挖掘
解读明略数据的“猎鹰重型”——2018“行星计划”
解读明略数据的“猎鹰重型”——2018“行星计划”
162 0
解读明略数据的“猎鹰重型”——2018“行星计划”
|
机器人 atlas 传感器
逐!帧!揭!秘!终于能看清波士顿动力机器人的细节了
波士顿动力,逆天机器人的代名词。 每一次新的视频放出,机器人做出各种充满视觉冲击力动作,都会引起疯狂传播。 凭借敏捷的身姿和动物般的反应能力,它们做出了各种各样对于人来来说都非常高难度的动作。 这样的机器人到底是如何设计的呢?波士顿动力并没有对外披露太多。
869 0
逐!帧!揭!秘!终于能看清波士顿动力机器人的细节了