基于Threejs火焰烟雾动画功能代码

利用Threejs进行三维可视化的应用项目开发，我们经常回遇到需要加入一些动画效果，粒子效果等。所以本片利用此详细的例子进行介绍在Threejs中如何使用。

1，首先需要对三维场景进行初始化

function init() {// 创建clockclock = 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);}

2，对场景中用到的模型进行初始化

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.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轴旋转π/4scene.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轴旋转π/4scene.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);}

3，动画创建

             /*** three.js动画准备*/function threeReady(){init();initModel();}/*** three.js动画开始*/function threeStart() {// 允许动画循环isStop = false;initTween();animate();}/*** 元素归位，动画循环停止*/var isStop = false; // 是否停止动画ndfunction threeEnd() {// 尾焰归位fire.position.set(0, firePosition, -10);// 烟雾归位for (var p = 0; p < smokeCount; p++) {smokeParticles[p].position.set(0, firePosition-8, -5);}// 箭体归位arrowBodyMesh.position.set(0, firePosition + 18.7, -10);// 动画循环停止isStop = true;}

完整源码下载地址：基于Threejs的火焰烟雾动画效果代码-互联网文档类资源-CSDN下载

基于Threejs火焰烟雾动画功能代码相关推荐

html年会抽奖代码实例,基于JavaScript实现简单抽奖功能代码实例
为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡先来看看页面效果吧: 点击抽取 ...
基于Opencv的自动美颜功能代码
原来程序的设想是先对照片进行人脸识别,然后对人脸进行美颜处理: 花了大时间进行了人脸分类器的训练,但是识别效果还是不理想,所先跳过人脸识别,实现美颜处理: 找到了一个PS美颜的教程http://www ...
html 产生烟雾效果,html5 canvas抽象模糊烟雾动画特效
特效描述:html5 canvas 抽象模糊烟雾动画特效.html5 canvas绘制彩色模糊的烟雾动画.抽象模糊的烟雾动画特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 vo ...
基于视觉的烟雾/火焰检测数据集整理（检测、识别、分割）
基于传感器的火灾预警系统,比较适用于较小空间. 随着视觉技术的发展,基于视觉的火灾预警系统,更适用于对森林等大范围场景进行远距离监控1. 当前的烟雾火焰检测系统中,采用机器学习的视觉技术暂未广泛替代 ...
java 手机声音提醒功能_Android基于广播事件机制实现简单定时提醒功能代码
本文实例讲述了Android基于广播事件机制实现简单定时提醒功能代码.分享给大家供大家参考,具体如下: 1.Android广播事件机制 Android的广播事件处理类似于普通的事件处理.不同之处在于, ...
阿里国际站详情页上装修轮播功能代码怎么做动画gif图片步骤教程方法技巧
阿里巴巴国际站店铺详情页如何制作轮播特效动效图片-国际站店铺如何制作轮播图片代码详情页添加轮播效果特效阿里巴巴国际站详情页添加轮播切换横幅banner图片装修工具:一秒美工助手工具如何装修详情页轮 ...
酷狗音乐的爬取，基于python，从无到有完整教程-下：功能代码讲解
酷狗音乐的爬取,从无到有完整教程-下:功能代码讲解是的我又回来了,这次是代码的讲解哦. 参数项生成上一章我们提到,在包含了歌曲url,歌曲信息的请求中,有几个参数项的值是随机数就可以,但是,你仔细 ...
js微信抢红包脚本代码_基于JavaScript实现微信抢红包功能
金额随机:额度在0.01和(剩余平均值*2)之间. 0){ let num = scramble(remainAmount,remainPeople); remainAmount = remainAm ...
threejs旋转模型动画教程
第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...

基于Threejs火焰烟雾动画功能代码

基于Threejs火焰烟雾动画功能代码相关推荐

最新文章

热门文章