<!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 { // 奇数顺
基于Threejs的火焰烟雾动画效果代码.zip （13个子文件） 
img 
arrow.png 12KB
bg.jpg 13KB cloud.png 20KB
index.html 9KB js 
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
珞珈鸡丝
- 粉丝: 87
- 资源: 36
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
最新资源
- 三菱FX系列上位机源码 C#上位机FX系列源码， 串口485.232通讯， 可读X Y M S D,可写Y M S D，FX系列，有备注 本上位机使用用pchmi库
- azkaban执行job相关文件
- 基于ssm的高校校园招聘服务系统源码（java毕业设计完整源码+LW）.zip
- 飞剪程序、追剪程序plc程序伺服程序 几年前的飞剪追剪程序，用的都是汇川系列 包含详细的注释、触摸屏程序、plc程序、伺服参数设置和图纸，实际当中的应用
- 不同颜色机器护垫检测14-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- 西门子S7-1200控制5轴伺服程序加维纶触摸屏画面案例 1.PTO伺服轴脉冲定位控制功能应用+速度模式应用+扭矩模式应用 2.程序为结构化编程,每一功能为模块化设计,具有一个项目都有的功能:
- 深度学习，pytorch，四种天气图片数据集
- 潮乎盲盒小程序，盲盒全开源源码，潮玩盲盒功能，推广海报，多级分销，小程序源码
- 锅炉控制系统，西门子200smartPLC程序，昆仑触摸屏程序，带CAD电气图纸
- 大学计算机专业课程学习报告-深入探索编程与技术前沿
- MMC七电平整流器模型 MATLAB，2019及以下版本 带单相接地故障设置
- Dreamweaver CS6
- 冒泡排序算法详解与Python实现
- C++图书管理系统源代码+设计文档（高分项目）
- 书籍学习配套源码：TCPIP服务器客户端 和 UDP服务器客户端 程序
- 基于Python的网络流量分析控制台.py
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
- 4
- 5
- 6
前往页