threejs water 模拟水动画

最新推荐文章于 2024-06-22 09:33:10 发布
最新推荐文章于 2024-06-22 09:33:10 发布
阅读量1.4w 收藏 24
点赞数 5
分类专栏： threejs-效果和后处理通道 文章标签： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41741576/article/details/89474835
版权

在这里插入图片描述在three.js中已经为我们封装好了这一效果，我们只需要引入特定的包就可以使用；

引入三个js包，它们相互关联，缺一不可，否则会报错，可在工程文件夹下example文件夹找到

    <script type="text/javascript" src="js/objects/Water2.js" ></script>//水的主要模型包
    <script type="text/javascript" src="js/objects/Reflector.js" ></script>//实现水的反射效果
    <script type="text/javascript" src="js/objects/Refractor.js" ></script>//实现水的折射效果

构造函数：
new THREE.Water(geometry,options)
-geometry:object,图形（一般使用平面PlaneGeometry图形）
-options:objects,
可选参数（颜色color，水波大小scale，流动方向flowDirection，画布宽度textureWidth，画布高度 textureHeight，流线图贴图flowMap等）
{

  • color:new THREE.Color(),

  • scale:number,

  • flowDirection:new THREE.Vector2(x,y),//二维方向向量

  • textureWidth:2的次方倍,

  • textureHeight:2的次方倍,

  • flowMap:map//流线贴图,

    …
    }

注意，flowDiretion和flowMap两个属性不能连用，会起冲突;

有些朋友问shapeGeometry可以不？我的回答是可以，但是更推荐使用threejs内置的geometry，使用自定义形状是有效果的，但是不太明显，因为shapeGeomtry本身顶点过于复杂，Water包·运算较慢，水流效果较缓，尤其是浅色的，几乎看不到效果

效果例子查看地址

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试water的属性</title>
		<script type="text/javascript" src="js/three.js" ></script>
		<script type="text/javascript" src="js/libs/stats.min.js" ></script>
		<script type="text/javascript" src="js/WebGL.js" ></script>
		<script type="text/javascript" src="js/libs/dat.gui.min.js" ></script>
		<script type="text/javascript" src="js/controls/OrbitControls.js" ></script>
		<script type="text/javascript" src="js/objects/Water2.js" ></script>
		<script type="text/javascript" src="js/objects/Reflector.js" ></script>
		<script type="text/javascript" src="js/objects/Refractor.js" ></script>
		<style>
			body{
				padding:0;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script>
			if(WEBGL.isWebGLAvailable()===false){alert("该浏览器不支持WebGL!");document.body.appendChild(WEBGL.getWebGLErrorMessage());}
		
			var scene,renderer,camera,controls,stats;
			var cubeTexture=new THREE.CubeTextureLoader().setPath("img/skybox1/").load([
				'px.jpg','nx.jpg',
				'py.jpg','ny.jpg',
				'pz.jpg','nz.jpg'
			]);//天空盒子
			function init(){
				scene=new THREE.Scene();
				scene.background=cubeTexture;
				
				renderer=new THREE.WebGLRenderer({
					antialias:true
				});
				renderer.setSize(window.innerWidth,window.innerHeight);
				renderer.setPixelRatio(window.devicePixelRatio);
				document.body.appendChild(renderer.domElement);
				
				camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
				camera.position.set(0,30,0);
				camera.lookAt(scene.position);
				
				controls=new THREE.OrbitControls(camera,renderer.domElement);
				controls.enableDamping=true;
				controls.minDistance=0.1;
				controls.maxDistance=1000;
				
				stats=new Stats();
				document.body.appendChild(stats.dom);
				
				scene.add(new THREE.AmbientLight(0x404040));	
				var dLight=new THREE.DirectionalLight(0xffffff,0.8);
				dLight.position.set(-1,1,1);
				scene.add(dLight);
			}
			
			var axes;var torusKnot;
			var water1;var water2;var helper;
			function initModel(){
				axes=new THREE.AxesHelper(10);
				scene.add(axes);
				axes.visible=false;
				
				var geometry=new THREE.PlaneBufferGeometry(20,20,1);
				
				//平面1
				var plane=new THREE.Mesh(geometry,new THREE.MeshStandardMaterial({
					side:THREE.DoubleSide,
					roughness:0.8,
					metalness:0.4
				}));
				plane.position.set(-12,0,0);
				plane.rotation.x=-0.5*Math.PI;
				scene.add(plane);
				
				new THREE.TextureLoader().load("textures/hardwood2_diffuse.jpg",function(map){
					map.wrapS=map.wrapT=THREE.RepeatWrapping;
					map.anisotropy=16;
					map.repeat.set(4,4);
					plane.material.map=map;
					plane.material.needsUpdate=true;
				});
				
				torusKnot=new THREE.Mesh(new THREE.TorusKnotBufferGeometry(3,1,256,32),new THREE.MeshNormalMaterial());
				torusKnot.scale.set(0.5,0.5,0.5);
				torusKnot.position.set(-12,4,0);
				scene.add(torusKnot);
				
				//水1
				water1=new THREE.Water(geometry,{
					color:'#ffffff',
					scale:2,
					flowDirection:new THREE.Vector2(1,1),
					textureWidth:1024,
					textureHeight:1024,
				});
				water1.rotation.x=-0.5*Math.PI;
				water1.position.set(-12,1,0);
				scene.add(water1);
				
				//平面二
				var texture=new THREE.TextureLoader().load('textures/FloorsCheckerboard_S_Diffuse.jpg',function(map){
					map.wrapS=map.wrapT=THREE.RepeatWrapping;
					map.anisotropy=16;
					map.repeat.set(4,4);
				});						
				var ground=new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({
					color:0xcccccc,
					map:texture
				}));
				ground.position.set(12,0,0);
				ground.rotation.x=-Math.PI/2;
				scene.add(ground);
				
				//水2
				var flowMap=new THREE.TextureLoader().load('textures/water/Water_1_M_Flow.jpg');
				water2=new THREE.Water(geometry,{
					scale:2,
					textureWidth:1024,
					textureHeiht:1024,
					flowMap:flowMap
				});
				water2.rotation.x=-Math.PI/2;
				water2.position.set(12,1,0);
				scene.add(water2);
				
				//贴图原图显示
				helper=new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({
					map:flowMap
				}));
				helper.position.set(12,1.05,0);
				helper.rotation.x=-Math.PI/2;
				scene.add(helper);
				helper.visible=false;
			}
			
			var setting;
			function initGui(){
				setting={
					axesVisible:false,
					
					color:"#ffffff",
					scale:2,
					flowX:1,
					flowY:1,
					
					helper:false,
				}
				var gui=new dat.GUI();
				gui.add(setting,"axesVisible").onChange(function(e){
					axes.visible=e;
				});
				
				//水的属性设置
				var waterProperty=gui.addFolder("water1");
				waterProperty.addColor(setting,"color").onChange(function(e){
					water1.material.uniforms['color'].value.set(e);
				});
				waterProperty.add(setting,"scale",1,10).onChange(function(e){
					water1.material.uniforms['config'].value.w=e;
				});
				waterProperty.add(setting,"flowX",-1,1).onChange(function(e){
					water1.material.uniforms['flowDirection'].value.x=e;
					water1.material.uniforms['flowDirection'].value.normalize();//归一化
				});
				waterProperty.add(setting,"flowY",-1,1).onChange(function(e){
					water1.material.uniforms['flowDirection'].value.y=e;
					water1.material.uniforms['flowDirection'].value.normalize();
				});
								
				waterProperty.open();
				
				var waterPro2=gui.addFolder("water2");
				waterPro2.add(setting,"helper").name("show flowMap").onChange(function(e){
					helper.visible=e;
				});
				waterPro2.addColor(setting,"color").onChange(function(e){
					water2.material.uniforms['color'].value.set(e);
				});
				waterPro2.add(setting,"scale",1,10).onChange(function(e){
					water2.material.uniforms['config'].value.w=e;
				});
				waterPro2.open();
				
			}
			
			function onWindowResize(){
				camera.aspect=window.innerWidth/window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth,window.innerHeight);
			}
			
			var clock=new THREE.Clock();
			function render(){
				var delta=clock.getDelta();
				torusKnot.rotation.x+=delta;
				torusKnot.rotation.y+=delta*0.5;
				
				renderer.render(scene,camera);
			}
			
			function animate(){
				render();
				controls.update();
				stats.update();
				window.onresize=onWindowResize();
				requestAnimationFrame(animate);				
			}
			
			function threeStart(){
				init();
				initModel();
				initGui();
				animate();
			}
			threeStart();
		</script>
	</body>
</html>
凌风子夜
关注
  • 5
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
使用JS实现简单喷泉效果
qfchenjunbo的博客
07-04 1425
最近，在教学生使用JS的基本操作，为了练习JS的基本作用，特地写了一个喷泉效果，代码如下： 页面代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/particle.js" type...
TransparentWater：这是针对Three.js的轻量级Water模块
03-03
透明水 这是用于three.js的轻量级Water模块。
Threejs透明管道及流动液体效果
05-10
使用相同的路径创建两条管道，一条用于透明管道，一条作为管道内流动的液体。 需要注意的是，透明管道材质需要设置depthWrite=false;否则内部流动的液体会被遮挡无法显示。  
探索神奇的三维水模拟：ThreeJS-water
最新发布
gitblog_00003的博客
06-22 511
探索神奇的三维水模拟：ThreeJS-water 项目地址:https://gitcode.com/martinRenou/threejs-water 项目介绍 ThreeJS-water 是一个基于流行JavaScript库Three.js实现的三维水波模拟项目。它借鉴了Evan Wallace的webgl-water演示，并进行了优化和改进，为开发者提供了一个实时交互的3D水面效果。你可以通过...
three.js water水
X01动力装甲的专栏
11-02 6589
three.js water-水 three.js中库中有 js/objects/Water.js 和 js/objects/Water2.js的插件。 有几个案例：webgl_shaders_ocean。使用water.js插件制作的海洋，效果不错。 插件的使用也非常方便，geometry采用的是plane，设置了纹理，以及光源的位置向量。 var waterGeometry =...
Threejs实现模拟河流，水面水流，水管水流，海面
左本Web3D
06-28 9448
Threejs实现模拟河流，水面水流，水管水流，海面
three.js模拟波动水面Water.js
u014291990的博客
01-29 1153
有些数字孪生场景周围的环境，需要模拟一个波动水面效果，自己写shader相对比较麻烦，采用threejs的扩展库更简单方便。(货轮物流)
unity模拟水Unity Water Simulation
06-11
在Unity引擎中，水模拟是一项复杂且有趣的技术，它能够为游戏或应用带来生动逼真的水面效果。"Unity Water Simulation"项目就是专为此目的而设计的，它利用Unity的高级图形功能来创建交互式和视觉上吸引人的水体。...
使用THREE.JS开发的下雨效果
07-05
对于雨滴，我们可能希望使用具有透明感的材质，比如THREE.MeshBasicMaterial或THREE.MeshLambertMaterial，并调整其透明度和颜色以模拟水的特性。 数据驱动是这个项目的关键部分。每个雨滴的位置需要随着时间不断...
HTML5+three.js水面倒影太阳动画特效
06-11
在这个特定的项目中，“HTML5+three.js水面倒影太阳动画特效”是利用HTML5的Canvas元素和three.js库来创建一个动态的、逼真的水面效果，其中包含太阳的倒影和波动的水面。 首先，Canvas是HTML5的一个核心特性，它...
swift-WaterDrops模拟水滴下落的动画效果
08-15
WaterDrops模拟水滴下落的动画效果
HTML5 three.js水面倒影太阳动画特效.zip
07-11
部分js代码 [removed][removed] [removed] void main() { gl_Position = vec4( position, 1.0 ); } [removed]
html5+three.js彩色液态流动背景动画特效
06-11
html5+three.js制作一款漂亮的彩色液态流动背景动画特效，流动的液体动画效果，看上去很有潮流时尚感。
基于canvas使用three.js制作的立体水波纹效果
04-08
使用three.js绘制的具有立体感的水波面效果，里面涉及很多算法，没有思路的同学可以借鉴一下。
3D模拟水流的demo
03-06
这是一个使用GPGPU的技术实现的实施模拟3D水流的效果的demo。算法是我自己想出来的。
【threejs教程11】threejs添加水面效果
c_wengy的博客
04-25 2109
本文将指导你如何使用Three.js添加一个逼真的水面效果到你的场景中。
three.js学习笔记(十六)——汹涌的海洋
hongsir的博客
05-25 2475
介绍 现在我们知道了如何使用着色器并绘制一些图案，那么这次就要用它来创建一个汹涌的海洋。 我们将使用调试面板来设置波浪的动画并保持对各项参数的控制。 初始场景 现在，我们只有一个使用MeshBasicMaterial的平面，该几何体具有128x128的细分。我们将为顶点设置动画以获得波浪效果，为此我们需要非常多顶点。128x128可能不够多，但如果需要，我们将增加该值。 基础 现在将材质替换为着色器材质ShaderMaterial const waterMaterial = new THREE.Shade
使用Three.js绘制快速而逼真的水
05-11 1527
GPGPU代表通用图形处理单元（General-Purpose Graphic Processing Unit），意思是用GPU计算图形以外的计算任务。在 Three.js 里，指的是我们使用片段着色器来计算其他内容（例如粒子的位置或速度）的技术。通过使用 GPU（GLSL 着色器）而不是 CPU（Javascript）来进行这些计算，我们可以从并行计算中获得巨大的性能提升。但是我们在 Three.js 中并不经常看到这个术语，更常见的是“帧缓冲区对象”或 FBO 一词。
threejs应用water来实现水波纹，专业术语怎么描述
05-12
Three.js 中的 Water 是基于 WebGL 实现的水面效果，其实现原理是通过纹理贴图、反射、折射和波动等技术来模拟水面的效果。在 Three.js 中，Water 是基于 ShaderMaterial 实现的，其顶点着色器和片元着色器均经过了优化，可以实现较好的性能。在这个过程中，我们可以使用一些专业术语来描述，例如纹理贴图、反射、折射、波动、ShaderMaterial、顶点着色器和片元着色器等。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值