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 |
Live pixel sorting | 2,314 Kb |
Flowers | 2,588 Kb |
Square loading icons | 2,249 Kb |
Waves | 4,380 Kb |
Random walkers | 2,512 Kb |
Fish pond | 3,799 Kb |
Binary clock | 2,039 Kb |
Color Name Game | 3,245 Kb |
Boids i | 3,564 Kb |
Character generator | 4,840 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 |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
3d css cube | Semenchenko | 4,578 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Planet Awesome | Bartuc | 3,554 Kb |
Vue.js | Thommyboy02 | 1,506 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 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!