基于Threejs的火焰烟雾动画效果代码_threejs烟雾资源-CSDN文库

共13个文件

js：9个

png：2个

html：1个

版权申诉

5星 · 超过95%的资源 77 浏览量 2021-09-12 17:48:05 上传评论 2 收藏 230KB ZIP 举报

**Three.js 概述** Three.js 是一个JavaScript库，它为WebGL提供了一种易于使用的接口，用于在浏览器中创建3D图形。WebGL是一种在网页上实现硬件加速的3D图形渲染技术，无需插件即可运行。Three.js通过简化复杂的WebGL API，让开发者能够轻松构建丰富的3D交互式应用。 **Three.js 动画** 在Three.js中，动画的实现主要是通过更新场景中的对象属性来完成的，例如位置、旋转和缩放。关键帧动画是一种常见的方法，它通过在时间轴上的不同时间点定义对象的状态，然后在这些点之间进行平滑过渡。Three.js 提供了`THREE.Animation`和`THREE.KeyframeAnimation`等类来支持这种动画形式。此外，还可以利用`requestAnimationFrame`函数来实现连续的帧更新，以达到流畅的动画效果。 **火焰和烟雾效果** 创建火焰和烟雾的3D动画效果通常涉及到粒子系统（Particle System）和纹理贴图（Texture Mapping）。粒子系统是模拟复杂视觉效果的一种有效方法，它通过大量小的几何体或“粒子”来表现大范围的动态现象，如火焰和烟雾。在Three.js中，可以使用`THREE.ParticleSystem`或者`THREE.Points`来创建粒子系统。 **火焰效果** 火焰效果通常需要使用到颜色渐变的纹理，以模拟从明亮的黄色到暗淡的蓝色的热量梯度。Three.js允许将图片纹理应用到粒子上，通过调整粒子的大小、颜色和透明度，以及它们随时间的变化，可以实现逼真的火焰动画。 **烟雾效果** 烟雾效果则可能需要更为复杂的行为模拟，例如粒子上升、扩散和消失的过程。这可以通过粒子的生命周期属性（如寿命、速度和重力）以及粒子间的交互来实现。烟雾的纹理通常会包含灰色调的渐变，以呈现烟雾的层次感。 **具体代码实现** 在提供的`index.html`文件中，可以看到HTML结构以及Three.js库的引入。`js`文件夹可能包含了主要的JavaScript代码，其中可能包括创建场景、相机、光源、粒子系统以及纹理加载的部分。代码可能会使用`THREE.ParticleSystem`或`THREE.Points`来创建火焰和烟雾粒子，并通过`THREE.TextureLoader`加载相关的纹理图片。同时，`requestAnimationFrame`会用来驱动动画循环。这个项目展示了如何使用Three.js库来创建复杂的3D火焰和烟雾动画效果，通过理解Three.js的核心概念和技术，我们可以进一步探索和创建更多的3D交互式内容。

资源推荐

资源详情

资源评论

收起资源包目录

基于Threejs的火焰烟雾动画效果代码.zip （13个子文件）

img

arrow.png 12KB

bg.jpg 13KB

cloud.png 20KB

index.html 9KB

Fire.js 26KB

physijs_worker.js 39KB

tween.min.js 5KB

OrbitControls.js 22KB

physi.js 43KB

customArrow.js 0B

Stats.js 2KB

three.min.js 582KB

dat.gui.min.js 44KB

<!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 src="https://s1.pstatp.com/cdn/expire-1-M/three.js/104/three.min.js"></script> <script type="text/javascript" src="js/OrbitControls.js" ></script> <script type="text/javascript" src="js/Stats.js" ></script> <script type="text/javascript" src="js/dat.gui.min.js" ></script> <script type="text/javascript" src="js/Fire.js" ></script> <script type="text/javascript" src="js/tween.min.js" ></script> <script type="text/javascript" src="js/physi.js" ></script> <style> body{ background: url(img/bg.jpg) no-repeat top center fixed; overflow: hidden; background-size: 100%; padding: 0; margin: 0; overflow: hidden; } </style> </head> <body> <script> // 实际代码 var scene, renderer, camera; // 三大件 var controls, stats, clock; // 辅助组件 var arrowBodyMesh, smokeParticles = []; // 箭体网格对象和烟雾数组 // 箭体图片路径 var arrowPath = "img/arrow.png"; // 烟雾图片路径 var smokePath = "img/cloud.png"; function init() { // 创建clock clock = new THREE.Clock(); // 创建场景 scene=new THREE.Scene(); // 创建渲染器 renderer=new THREE.WebGLRenderer({ antialias:true, alpha:true }); renderer.setClearColor(0x000000, 0.0); 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,0,30); // 辅助移动视角 // controls=new THREE.OrbitControls(camera,renderer.domElement); // controls.enableDamping=true; // controls.minDistance=1; // controls.maxDistance=500; scene.add(new THREE.AmbientLight(0XCCCCCC, 0.5)); var pointLight=new THREE.PointLight(0xffffff, 0.8); pointLight.position.set(0, 10, 40); scene.add(pointLight); } var fire, fire1; function initModel(){ // var helper = new THREE.GridHelper(1000, 50); // scene.add(helper); // 尾焰 var plane=new THREE.PlaneBufferGeometry(15,30,1); fire = new THREE.Fire(plane,{ textureWidth:1024, textureHeight:1024, debug:false, color1: new THREE.Color(0xffffff), color2: new THREE.Color(0xffc159), color3: new THREE.Color(0xe69bb1), windVector: new THREE.Vector2(0, -1.2), colorBias: 0.92, burnRate: 1.19, diffuse: 5, viscosity: 0.2, expansion: -3, swirl: 8, drag: 0.17, airSpeed: 23, speed: 390, massConservation: false }); // fire = new THREE.Fire(plane,{ // textureWidth:512, // textureHeight:512, // debug:false, // color1: new THREE.Color(0xffffff), // color2: new THREE.Color(0xffc159), // color3: new THREE.Color(0xe69bb1), // windVector: new THREE.Vector2(0, -2), // colorBias: 0.61, // burnRate: 1.73, // diffuse: 1.3, // viscosity: 0.25, // expansion: 0, // swirl: 50, // drag: 0.35, // airSpeed: 11, // speed: 531, // massConservation: false // }); fire.addSource(0.5, 0.6, 0.1, 1.0, 0.0, -2.0); fire.addSource(0.62, 0.6, 0.1, 1.0, 0.0, -2.0); fire.addSource(0.38, 0.6, 0.1, 1.0, 0.0, -2.0); fire.position.y = firePosition; fire.position.z = -10; // fire.rotateX(Math.PI);//绕x轴旋转π/4 scene.add(fire); // 烟雾 var smokeTexture = THREE.ImageUtils.loadTexture(smokePath); var smokeMaterial = new THREE.MeshLambertMaterial({ map: smokeTexture, transparent: true }); var smokeGeo = new THREE.PlaneGeometry(30, 30); for (p = 0; p < smokeCount; p++) { var particle = new THREE.Mesh(smokeGeo, smokeMaterial); // particle.position.set((p-10)*5, -28+Math.abs(p-10)*2, -5); particle.position.set(0, firePosition-8, -5); // particle.position.set((p-10)*5, -28+Math.abs(p-10)*3, -5); particle.rotation.z = Math.random() * 360; // particle.rotateX(Math.PI);//绕x轴旋转π/4 scene.add(particle); smokeParticles.push(particle); } // 箭体 var arrowPlane=new THREE.PlaneBufferGeometry(10,25,1); // var geometry = new THREE.CubeGeometry( 10, 10, 10); var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture(arrowPath), transparent: true }); arrowBodyMesh = new THREE.Mesh(arrowPlane, material); arrowBodyMesh.position.y = (firePosition + 18.7); arrowBodyMesh.position.z = -10; scene.add(arrowBodyMesh); } var smokeCount = 20; // 组成烟雾的对象数量 var firePosition = -30; // 尾焰y轴位置 /** * 飞行动画 */ var tweenFireFlySlow, tweenArrowFlySlow, tweenFireFlyFast, tweenArrowFlyFast; function initTween(distance) { // // 尾焰起飞-慢 // tweenFireFlySlow = new TWEEN.Tween(fire.position) // .to( { y: (firePosition + 28.7) }, 2500 ).repeat(0).start(); // tweenFireFlySlow.easing(TWEEN.Easing.Quadratic.In); // // 箭体起飞-慢 // tweenArrowFlySlow = new TWEEN.Tween(arrowBodyMesh.position) // .to( { y: (47.4 + firePosition) }, 2500 ).repeat(0).start(); // tweenArrowFlySlow.easing(TWEEN.Easing.Quadratic.In); // // 尾焰起飞-快 // tweenFireFlyFast = new TWEEN.Tween(fire.position) // .to( { y: (firePosition + 68.7) }, 1000 ).repeat(0); // tweenFireFlyFast.easing(TWEEN.Easing.Elastic.In); // // 箭体起飞-快 // tweenArrowFlyFast = new TWEEN.Tween(arrowBodyMesh.position) // .to( { y: (87.4 + firePosition) }, 1000 ).repeat(0); // tweenArrowFlyFast.easing(TWEEN.Easing.Elastic.In); // 尾焰起飞-慢 tweenFireFlySlow = new TWEEN.Tween(fire.position) .to( { y: (firePosition + 68.7) }, 5500 ).repeat(0).start(); tweenFireFlySlow.easing(TWEEN.Easing.Quadratic.In); // 箭体起飞-慢 tweenArrowFlySlow = new TWEEN.Tween(arrowBodyMesh.position) .to( { y: (87.4 + firePosition) }, 5500 ).repeat(0).start(); tweenArrowFlySlow.easing(TWEEN.Easing.Quadratic.In); // 烟雾运动 for (var p = 0; p < smokeCount; p++) { new TWEEN.Tween(smokeParticles[p].position) .to( { x: (p-10)*5 }, 3000 ).repeat(0).start() .easing(TWEEN.Easing.Quadratic.Out); new TWEEN.Tween(smokeParticles[p].position) .to( { y: -26+Math.abs(p-10)*3 }, 2000 ).repeat(0).start() .easing(TWEEN.Easing.Quadratic.Out); new TWEEN.Tween(smokeParticles[p].position) .to( { z: Math.abs(p-10)*3 }, 2000 ).repeat(0).start() .easing(TWEEN.Easing.Quadratic.Out); } // tweenFireFlySlow.chain(tweenFireFlyFast); // tweenArrowFlySlow.chain(tweenArrowFlyFast); } window.onresize = function (){ camera.aspect=window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth,window.innerHeight); } function render(){ renderer.render(scene,camera); } function animate(){ if (!isStop) { // controls.update(); TWEEN.update(); delta = clock.getDelta(); evolveSmoke(); requestAnimationFrame(animate); render(); } } // 烟雾旋转 function evolveSmoke() { var sp = smokeParticles.length; while (sp--) { if (sp%2==0) { // 偶数逆时针旋转 smokeParticles[sp].rotation.z += (delta * 0.1); } else { // 奇数顺

评论收藏

内容反馈

版权申诉