threejs fire 火焰与烟雾效果

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

在threejs中有一个为我们提供了可以实现火焰和烟雾效果的包，我们可以直接引用这个包，通过设置某些参数实现需要的效果。
在这里插入图片描述
第一步引入fire包，可在工程文件夹下的example文件夹中找到

<script type="text/javascript" src="js/objects/Fire.js" ></script>

第二步，新建任意一个geometry对象作为fire的载体
构造器Fire（geometry,option）

				//var plane=new THREE.PlaneBufferGeometry(20,20,1);
				var cube=new THREE.BoxBufferGeometry(30,30,30);
				fire=new THREE.Fire(cube,{
					textureWidth:512,
					textureHeight:512,
					debug:false
				});
				fire.position.z=-2;
				scene.add(fire);

最后，添加资源就有了效果

fire.addSource(0.5,0.1,0.1,1.0,0.0,1.0);

在这里插入图片描述
也可以使用canvas贴图实现文字火焰效果,画好了canvas，注意需要声明更新材质

					Text:function(){//文字火焰效果
						var text="Three JS";
						var color='#ff0040';
						var canvas=document.createElement("canvas");
						canvas.width=1024;
						canvas.height=1024;
						var ctx=canvas.getContext('2d');
						ctx.strokeStyle="black";
						ctx.strokeRect(0,0,canvas.width,canvas.height);
						ctx.textAlign='center';
						ctx.textBaseline='middle';	
						ctx.font='180pt Arial';
						ctx.lineWidth=5;
						ctx.strokeStyle=color;
						ctx.strokeText(text,canvas.width/2,canvas.height*0.75);
						var texture=new THREE.Texture(canvas);
						texture.needsUpdate=true;
						fire.setSourceMap(texture);
					}

常用方法：

  1. clearSources()
    清除资源
  2. addSource(u, v, radius, density, windX, windY);
    添加资源
  3. setSourceMap(texture)
    设置贴图

可选属性参数：

				var params={
					//基本火焰参数设置
					color1:'#ffffff',//内焰
					color2:'#ffa000',//外焰
					color3:'#000000',//烟雾
					colorBias:0.8,//颜色偏差
					burnRate:0.35,//燃烧率
					diffuse:1.33,//扩散
					viscosity:0.25,//粘度
					expansion:-0.25,//膨胀
					swirl:50.0,//旋转
					drag:0.35,//拖拽
					airSpeed:12.0,//空气速度
					windX:0.0,//风向X
					windY:0.75,//风向Y
					speed:500.0,//火焰速度
					massConservation:false,//质量守恒
					}

源码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>火焰和烟雾效果</title>
		<script type="text/javascript" src="js/WebGL.js" ></script>
		<script type="text/javascript" src="js/three.js" ></script>
		<script type="text/javascript" src="js/controls/OrbitControls.js" ></script>
		<script type="text/javascript" src="js/libs/stats.min.js" ></script>
		<script type="text/javascript" src="js/libs/dat.gui.min.js" ></script>
		<script type="text/javascript" src="js/objects/Fire.js" ></script>
		<style>
			body{
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script>
			if(WEBGL.isWebGLAvailable()===false)document.body.appendChild(WEBGL.getWebGLErrorMessage());
			
			var scene,renderer,camera,controls,stats;
			function init(){
				scene=new THREE.Scene();
				scene.background=new THREE.Color(0x000000);
				
				renderer=new THREE.WebGLRenderer({
					antialias:true,
					alpha: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,1,1000);
				camera.position.set(0,20,50);
				
				controls=new THREE.OrbitControls(camera,renderer.domElement);
				controls.enableDamping=true;
				controls.minDistance=1;
				controls.maxDistance=500;
				
				stats=new Stats();
				document.body.appendChild(stats.domElement);
				
				scene.add(new THREE.AmbientLight(0XCCCCCC,0.4));
				
				var pointLight=new THREE.PointLight(0xffffff,0.8);
				scene.add(pointLight);
			}
			
			var axes;
			var fire;
			function initModel(){
				axes=new THREE.AxesHelper(30);
				scene.add(axes);
				axes.visible=false;
				
				//var plane=new THREE.PlaneBufferGeometry(20,20,1);
				var cube=new THREE.BoxBufferGeometry(30,30,30);
				fire=new THREE.Fire(cube,{
					textureWidth:512,
					textureHeight:512,
					debug:false
				});
				fire.position.z=-2;
				scene.add(fire);
			}
			
			var mouse=new THREE.Vector2();
			var raycaster=new THREE.Raycaster();
			function rayEvent(event){
				if(event.touches){
					var touchE=event.touches[0];
					mouse.x=(touchE.pageX/window.innerWidth)*2-1;
					mouse.y=-(touchE.pageY/window.innerHeight)*2+1;
				}else{
					mouse.x=(event.clientX/window.innerWidth)*2-1;
					mouse.y=-(event.clientY/window.innerHeight)*2+1;
				}
				
				raycaster.setFromCamera(mouse,camera);
				
				var intersects=raycaster.intersectObjects(scene.children,true);
				if(intersects.length>0){
					intersects[0].object.material.color.set(0xff0000);
				}else{
					console.log("未检测到物体！");
				}
			}
			
			var settings;
			function initGui(){
/*				settings={
					axesVisible:false
				}*/
				
				var params={
					//基本火焰参数设置
					color1:'#ffffff',//内焰
					color2:'#ffa000',//外焰
					color3:'#000000',//烟雾
					colorBias:0.8,//颜色偏差
					burnRate:0.35,//燃烧率
					diffuse:1.33,//扩散
					viscosity:0.25,//粘度
					expansion:-0.25,//膨胀
					swirl:50.0,//旋转
					drag:0.35,//拖拽
					airSpeed:12.0,//空气速度
					windX:0.0,//风向X
					windY:0.75,//风向Y
					speed:500.0,//火焰速度
					massConservation:false,//质量守恒
					
					//基本效果
					Single:function(){//单焰效果
						fire.clearSources();
						fire.addSource(0.5,0.1,0.1,1.0,0.0,1.0);
					},
					Multiple:function(){//多焰效果
						fire.clearSources();
						fire.addSource(0.1,0.1,0.1,0.5,0.0,1.0);
						fire.addSource(0.4,0.1,0.1,0.5,0.0,1.0);
						fire.addSource(0.7,0.1,0.1,0.5,0.0,1.0);
					},
					Text:function(){//文字火焰效果
						var text="Three JS";
						var color='#ff0040';
						var canvas=document.createElement("canvas");
						canvas.width=1024;
						canvas.height=1024;
						var ctx=canvas.getContext('2d');
						ctx.strokeStyle="black";
						ctx.strokeRect(0,0,canvas.width,canvas.height);
						ctx.textAlign='center';
						ctx.textBaseline='middle';	
						ctx.font='180pt Arial';
						ctx.lineWidth=5;
						ctx.strokeStyle=color;
						ctx.strokeText(text,canvas.width/2,canvas.height*0.75);
						var texture=new THREE.Texture(canvas);
						texture.needsUpdate=true;
						fire.setSourceMap(texture);
					},
					
					//参数效果
					Candle:function(){//蜡烛
						var paraArr=[0xffffff,0xffa000,0x000000,0.0,0.5,0.3,1.6,1.33,1.33,0.0,0.0,0.0,8.0,500.0,false];
						updateAll(paraArr);
					},
					Torch:function(){//火炬
						var paraArr=[0xffdcaa,0xffa000,0x000000,0.0,0.75,0.9,1.0,1.33,0.25,0.0,50.0,0.35,10.0,500.0,false];
						updateAll(paraArr);
					},
					Campfire:function(){//篝火
						var paraArr=[0xffffff,0xffa000,0x000000,0.0,0.75,0.8,0.3,1.33,0.25,-0.25,50.0,0.35,12.0,500.0,false];
						updateAll(paraArr);
					},
					Fireball:function(){//火球
						var paraArr=[0xffffff,0xffa000,0x000000,0.0,0.75,0.8,1.2,3.0,0.0,0.0,6.0,0.0,20.0,500.0,false];
						updateAll(paraArr);
					},
					Iceball:function(){//冰球
						var paraArr=[0x00bdf7,0x1b3fb6,0x001869,0.0,-0.25,0.25,2.6,5.0,0.5,0.75,30.0,0.0,40.0,500.0,false];
						updateAll(paraArr);
					},
					Smoke:function(){//浓烟
						var paraArr=[0xd2d2d2,0xd7d7d7,0x000000,-0.05,0.15,0.95,0.0,1.5,0.25,0.2,3.75,0.4,18.0,500.0,false];
						updateAll(paraArr);
					},
					Cigar:function(){//香烟的烟
						var paraArr=[0xc5c5c5,0x787878,0x000000,0.0,0.3,0.55,0.0,1.3,0.05,-0.05,3.7,0.6,6.0,500.0,false];
						updateAll(paraArr);
					}
				}
				
				function updateAll(arr){
					fire.color1.set(arr[0]);
					fire.color2.set(arr[1]);
					fire.color3.set(arr[2]);
					fire.windVector.x=arr[3];
					fire.windVector.y=arr[4];
					fire.colorBias=arr[5];
					fire.burnRate=arr[6];
					fire.diffuse=arr[7];
					fire.viscosity=arr[8];
					fire.expansion=arr[9];
					fire.swirl=arr[10];
					fire.drag=arr[11];
					fire.airSpeed=arr[12];
					fire.speed=arr[13];
					fire.massConservation=arr[14];
					
					var i=0;
					for(var index in gui.__controllers){
						gui.__controllers[index].setValue(arr[i]);
						i++;
					}
				}
				
				var gui=new dat.GUI();
/*				gui.add(settings,"axesVisible").onChange(function(e){
					axes.visible=e;
				});*/
				
				var g1=gui.addFolder("基本效果");
				g1.add(params,"Single").name("单焰效果");
				g1.add(params,"Multiple").name('多焰效果');
				g1.add(params,"Text").name("文本火焰");
				g1.open();
				
				var g2=gui.addFolder("参数效果");
				g2.add(params,'Candle').name("蜡烛火焰");
				g2.add(params,'Torch').name("火炬火焰");
				g2.add(params,'Campfire').name("篝火火焰");
				g2.add(params,'Fireball').name("火球火焰");
				g2.add(params,'Iceball').name("冰球火焰");
				g2.add(params,'Smoke').name("浓烟");
				g2.add(params,'Cigar').name("香烟的烟");
				g2.open();
				
				gui.addColor(params,"color1").onChange(function(e){
					fire.color1.set(e);
				});
				gui.addColor(params,"color2").onChange(function(e){
					fire.color2.set(e);
				});
				gui.addColor(params,"color3").onChange(function(e){
					fire.color3.set(e);
				});
				gui.add(params,"windX",-5,5).step(0.1).onChange(function(e){
					fire.windVector.x=e;
				});
				gui.add(params,"windY",-5,5).step(0.1).onChange(function(e){
					fire.windVector.y=e;
				});
				gui.add(params,"colorBias",0.0,1.0).onChange(function(e){
					fire.colorBias=e;
				});
				gui.add(params,"burnRate",0.0,10.0).onChange(function(e){
					fire.burnRate=e;
				});
				gui.add(params,"diffuse",0.0,5.0).step(0.1).onChange(function(e){
					fire.diffuse=e;
				});
				gui.add(params,"viscosity",0.0,5.0).step(0.1).onChange(function(e){
					fire.viscosity=e;
				});
				gui.add(params,"expansion",-1.0,1.0).step(0.01).onChange(function(e){
					fire.expansion=e;
				});
				gui.add(params,"swirl",0.0,50.0).onChange(function(e){
					fire.swirl=e;
				});
				gui.add(params,"drag",0.0,1.0).step(0.01).onChange(function(e){
					fire.drag=e;
				});
				gui.add(params,"airSpeed",0.0,50.0).onChange(function(e){
					fire.airSpeed=e;
				});
				gui.add(params,"speed",0,1000).onChange(function(e){
					fire.speed=e;
				});
				gui.add(params,"massConservation").onChange(function(e){
					fire.massConservation=e;
				});
				
				params.Single();
			}
			
			function onWindowResize(){
				camera.aspect=window.innerWidth/window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth,window.innerHeight);
			}
			
			function render(){
				renderer.render(scene,camera);
			}
			
			function animate(){
				render();
				stats.update();
				controls.update();
				window.onresize=onWindowResize();
				requestAnimationFrame(animate);
			}
			
			(function threeStart(){
				init();
				initModel();
				initGui();
				animate();
				//window.addEventListener("click",rayEvent,false);
				//window.addEventListener("touchstart",rayEvent,false);
			}());
		</script>
	</body>
</html>
凌风子夜
关注
  • 5
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 22
    评论
专栏目录
html5 冒烟效果,HTML5 Three.js 3D洞穴中的火焰和烟雾以及热变形动画特效
weixin_35193131的博客
06-09 709
JavaScript语言：JaveScriptBabelCoffeeScript确定var fireVertexShader = `attribute vec4 orientation;attribute vec3 offset;attribute vec2 scale;attribute float life;attribute float random;varying vec2 vUv;var...
three.js跳动的火焰 流动的河
07-14
标题 "three.js跳动的火焰 流动的河" 暗示了这是一个使用three.js库创建的3D动画项目，其中包含动态的火焰和流动的水效果。three.js是JavaScript的一个流行库，用于在Web浏览器中进行3D图形渲染。这个项目可能是为了...
基于Threejs的火焰烟雾动画效果代码
09-12
基于Threejs的火焰烟雾动画效果代码
threejs 形状几何体_Three.js模型几何体面积、体积计算
weixin_39821035的博客
12-20 610
在工作中通过Three.js开发项目的时候，一些特定的情况下你可能需要计算一个三维模型的表面积或者体积，比如在3D打印的Web项目中，你需要计算一个三维模型的体积，然后通过体积计算打印一个三维模型所需要的3D打印材料费；比如开发的一个程序中，需要自动计算一个地面、墙面或某个零件的表面需要多少涂料，肯定需要先计算它的外表面面积是多少。思路——模型几何体表面积计算如果是一个立方体、球体等规则几何体，计...
【threejs】火焰特效制作
最新发布
qq_61834461的博客
06-26 237
使用shader创建threejs火焰效果
ThreeJS 中体渲染，利用噪声模拟烟，云
yue1241630499的博客
12-11 6263
ThreeJS 中体渲染，利用噪声模拟烟，云 体渲染的东西也看了一段时间了，这里结合Three.js中体积云的例子，实现shdertoy中的一个效果，先放效果图。 Fire2 (shadertoy.com), 这里是参考的效果，可以自行参看源码。 体渲染，Volume Rendering 传统建模方式，可以理解为表面建模，通过构建物体外表面，在三维中展示实际物体。相对的，体渲染是从三维数据中生成图像，典型的例子就是医疗上的CT。本文中不涉及体渲染中的光学模型，仅是对数据进行采样，上色。同时简化计算，使
使用three.js创建粒子火焰效果
凡事有果必有因
05-23 8395
在线地址
基于Threejs火焰烟雾动画功能代码
珞珈鸡丝
09-12 2241
利用Threejs进行三维可视化的应用项目开发，我们经常回遇到需要加入一些动画效果，粒子效果等。所以本片利用此详细的例子进行介绍在Threejs中如何使用。 1，首先需要对三维场景进行初始化 function init() { // 创建clock clock = new THREE.Clock(); // 创建场景 scene=new THREE.Scene(); // 创建渲染器 renderer=new THREE.WebGLRenderer.
Web 3D烟雾火焰喷水粒子效果-WebGL/Threejs技术倾心打造
ALLENJIAO的专栏
07-31 8122
Threejs实现粒子效果 ThreeJS是一个3D的JS库，封装了WebGL的功能。就是在浏览器端开发3D图形相关的程序的一个库或者说一个标准。实现烟雾、火焰、喷水粒子效果典型“5毛特效”。 烟雾、火焰、喷水功能介绍 更多细节和功能改进后续赘述，感兴趣的可以留言或发邮件1985692469@qq.com，欢迎一起探讨！时间有限请大家包涵。 ...
three.js创建火焰
weixin_35757531的博客
01-04 668
要在 three.js 中创建火焰，可以使用粒子系统来模拟火焰的效果。 首先，需要准备一张火焰的贴图。然后，可以使用 THREE.TextureLoader 加载该贴图，并将它赋值给粒子的材质的 map 属性。 接着，可以创建一个粒子系统，设置粒子的数量、发射速度、发射角度、漂浮时间等参数。最后，将粒子系统添加到场景中即可。 具体代码实现细节可以参考 three.js 官方文档或者搜索相关的教程。...
基于three.js的火焰demo
05-21
基于three.js开发的火焰demo，通过更改粒子颜色，可以做烟效果 具体效果参见我的CSDN博客，地址：https://blog.csdn.net/u014529917/article/details/90456707
CamelotVFX: Fire & Smoke 火焰与烟雾特效
05-01
This package contains realistic fire and smoke FX rendered from 3D software by an FX Artist professional in the Animation/Film industry. Included are the sprite sheets and prefabs for 12 effects, in ...
three.js实现3D视野缩放效果
10-19
在3D图形编程中，创建逼真的视觉效果是至关重要的，而three.js作为一个流行的JavaScript库，使得在Web浏览器中创建3D场景变得简单易行。本篇文章将详细讲解如何使用three.js实现3D视野的缩放效果。 首先，我们要...
基于ThreeJS的火焰围栏
weixin_47893737的博客
02-21 726
通过Web Shader的实现的火焰围栏
threejs water 模拟水动画
热门推荐
凌风子夜
04-23 1万+
引入三个js包，缺一不可 //构造函数，本质是canvas画布贴图 var geometry=new THREE.PlaneBufferGeometry(20,20,1); water=new THREE.Water(geometry,{ color:'#ffffff', scale:4, flowDirection:new THREE.Vector2(1,1),/...
threejs postprocessing-后处理通道效果使用详解
凌风子夜
10-08 7542
threejs的后期处理通道包提供了各种强大的效果，有了这些效果可以大大降低代码难度，避免了复杂的着色器编写。 效果示例： 实现方式： 初始化效果组合器 composer=new THREE.EffectComposer(renderer); //该参数是WebGLRenderer对象 为了保证组合器的正常使用，必要的引用包，在工程文件下可找到，这四个都是必须的，并且注意引用的顺序...
threejs -内置着色器包的使用详解
凌风子夜
10-11 3650
threejs提供了丰富的着色器包，搭配后处理通道使用，可以实现非常强大的效果。（） 效果示例： 1.AfterimageShader.js实现效果 2.DotScreenShader.js实现效果 常用着色器包： CopyShader.js： 该着色器会将效果输出，普通的通道一般都是不能输出的，要靠CopyShader进行输出。 引用：js/shaders/CopyShader.js 用法示...
threejs 火焰 烟雾
12-17
three.js是一种用于在网页上创建3D图形的JavaScript库。它为开发人员提供了丰富的工具和功能，使他们能够创建逼真的3D场景和效果。而火焰和烟雾是three.js中常见的特效之一。 在three.js中，我们可以使用ShaderMaterial来创建火焰和烟雾效果。ShaderMaterial是一种自定义材质，可以根据需求编写着色器代码来控制物体的外观和动画。 对于火焰效果，我们可以使用顶点和片元着色器来模拟火焰的动态效果。通过在顶点着色器中根据时间和噪声生成火焰的形状，并在片元着色器中根据距离摄像机的远近和透明度来控制火焰的渲染效果，可以创建出逼真的火焰效果。 而对于烟雾效果，我们可以使用类似的方法。通过在顶点着色器和片元着色器中对顶点位置和颜色进行变换和计算，以及使用一些纹理贴图来模拟烟雾的形状和颜色，可以实现逼真的烟雾效果。 不仅如此，three.js还提供了一些内置的功能和库来帮助我们创建更加复杂的火焰和烟雾效果。例如，我们可以使用THREE.Fire类来创建火焰，并通过调整其参数来控制火焰的大小、颜色和动画效果。同样地，我们可以使用THREE.Smoke类来创建烟雾，并通过调整其参数来控制烟雾的密度、展示范围和透明度等。 总之，通过使用three.js的功能和工具，我们可以轻松地创建出逼真的火焰和烟雾效果，为网页中的3D场景增添动态和真实感。
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值