Particle fire
How do I make an particle fire?
What is a particle fire? How do you make a particle fire? This script and codes were developed by Khalkeus on 11 November 2022, Friday.
Particle fire - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>particle fire</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Particle fire - Script Codes CSS Codes
body, html{ width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden; font-family: courier; color: white; font-size: 12px; text-align: center;
}
canvas{ width: 100%; height: 100%;
}
Particle fire - Script Codes JS Codes
var camera, renderer, scene, particleSystem, baseParticle, mouse;
window.onload = function(){ mouse = [window.innerWidth/2, window.innerHeight/2]; renderer = new THREE.WebGLRenderer({antialias: true}); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 0.1, 1000); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera.position.z = 50; scene.background = new THREE.Color(0x333344); canvas = document.querySelector('#b canvas'); baseParticle = new THREE.PlaneGeometry(1, 1, 1); baseParticle.applyMatrix(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(0, 0, Math.PI/4))); for(var i = 0; i < baseParticle.vertices.length; i++){ if(Math.round(baseParticle.vertices[i].y) != 0){ baseParticle.vertices[i].x = 0; baseParticle.vertices[i].z = 0; } } baseParticle.mergeVertices(); baseParticle.verticesNeedUpdate = true; baseParticle = new THREE.Mesh(baseParticle, new THREE.MeshBasicMaterial({color: 0xffffff, emissive: 0x555555})); particleSystem = new ParticleSystem(99); render();
}
window.onresize = function(){ camera.aspect = window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight);
}
window.onmousemove = function(e){ mouse = [e.clientX, e.clientY];
}
function randomFloat(a, b){ var r = (Math.random() * (b - a) + a); return r;
}
function partToHex(part){ var h = part.toString(16); return h.length == 1 ? "0" + h : h;
}
console.log(partToHex(255))
var color;
function FireParticle(){ this.direction; this.scaleSpeed; this.curAge; this.parent; this.obj; this.colorRamp = [[255, 255, 0], [255, 136, 34], [255, 17, 68], [153, 136, 136]]; this.update = function(){ if(Math.abs(this.parent.pos.x - this.obj.position.x) > 10 || Math.abs(-this.parent.pos.y - this.obj.position.y) > 10){ this.obj.scale.x *= .8; this.obj.scale.y *= .8; this.obj.scale.z *= .8; } var point = (this.curAge/40); var pointRem = point % 1; if(Math.round(point) >= this.colorRamp.length - 1){ color = this.colorRamp[this.colorRamp.length - 1]; }else{ color = [Math.floor(this.colorRamp[Math.floor(point)][0] * (1 - pointRem) + this.colorRamp[Math.floor(point) + 1][0] * pointRem), Math.floor(this.colorRamp[Math.floor(point)][1] * (1 - pointRem) + this.colorRamp[Math.floor(point) + 1][1] * pointRem), Math.floor(this.colorRamp[Math.floor(point)][2] * (1 - pointRem) + this.colorRamp[Math.floor(point) + 1][2] * pointRem)]; } // console.log(color); color = partToHex(color[0]) + partToHex(color[1]) + partToHex(color[2]) // console.log(color) color = parseInt(color, 16); // console.log(color) this.obj.material.color.setHex(color); this.curAge++; if(this.obj.scale.x < .01){ this.init(); } this.obj.position.x += this.direction.x; this.obj.position.y += this.direction.y; this.obj.position.z += this.direction.z; this.obj.scale.x *= this.scaleSpeed; this.obj.scale.y *= this.scaleSpeed; this.obj.scale.z *= this.scaleSpeed; } this.init = function(){ this.direction = new THREE.Vector3(randomFloat(-.01, .01), randomFloat(.01, .1), randomFloat(-.01, .01)); this.scaleSpeed = randomFloat(.8, .99); this.curAge = 0; if(this.obj != undefined){ scene.remove(this.obj); } this.obj = baseParticle.clone(); this.obj.position.set(this.parent.obj.position.x + randomFloat(-.2, .2), this.parent.obj.position.y, this.parent.obj.position.z + randomFloat(-.2, .2)); this.obj.scale.set(1, 2, 1); this.obj.material = this.obj.material.clone(); // var size = randomFloat(.5, 1); // this.obj.scale.set(size, 2*size, size); for(var i = 0; i < randomFloat(0, 100); i++){ this.update(); } scene.add(this.obj); }
}
function ParticleSystem(size){ this.particles = []; this.obj = new THREE.Group(); this.p = new THREE.Vector3(); this.d; this.dis; this.pos = new THREE.Vector3(0, 0, 0); this.init = function(){ for(var i = 0; i < size; i++){ this.particles.push(new FireParticle()); this.particles[i].parent = this; this.particles[i].init(); } scene.add(this.obj); } this.init(); this.update = function(){ this.p.set((mouse[0]/window.innerWidth) * 2 - 1, (mouse[1]/window.innerHeight ) * 2 - 1, .5); this.p.unproject(camera); this.d = this.p.sub(camera.position).normalize(); this.dis = -camera.position.z/this.d.z; this.pos = camera.position.clone().add(this.d.multiplyScalar(this.dis)); this.obj.position.x = this.pos.x; this.obj.position.y = -this.pos.y; for(var i = 0; i < this.particles.length; i++){ this.particles[i].update(); } this.obj.rotation.y += .03; }
}
function render(){ requestAnimationFrame(render); renderer.render(scene, camera); particleSystem.update();
}
Developer | Khalkeus |
Username | khalkeus |
Uploaded | November 11, 2022 |
Rating | 4.5 |
Size | 3,152 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Metaballs | 2,277 Kb |
Random walkers | 2,512 Kb |
City generator | 2,750 Kb |
Boids ii | 3,358 Kb |
Planet Generator | 2,984 Kb |
Cannon.js test | 2,524 Kb |
Binary clock | 2,039 Kb |
Square loading icons | 2,249 Kb |
Warpspeed | 2,409 Kb |
Boids iii | 2,947 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Header | Er40 | 1,542 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!