特效描述：html5canvas 酷炫的 烟花爆炸动画特效。html5点击页面烟花爆炸动画，3D烟花动画，酷炫的烟花特效。
代码结构
1. 引入JS
2. HTML代码
点击页面
(function() {
var Particles,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Particles = (function() {
function Particles() {
this.render = bind(this.render, this);
this.rotateRadians = bind(this.rotateRadians, this);
this.random = bind(this.random, this);
this.mouseMove = bind(this.mouseMove, this);
this.mouseDown = bind(this.mouseDown, this);
this.resize = bind(this.resize, this);
this.animate = bind(this.animate, this);
this.setStage = bind(this.setStage, this);
this.setLighting = bind(this.setLighting, this);
this.getTexture = bind(this.getTexture, this);
this.addStars = bind(this.addStars, this);
this.setActors = bind(this.setActors, this);
this.getPastelColor = bind(this.getPastelColor, this);
this.canvasMouse = {
x: 0,
y: 0,
z: 0,
px: 0,
py: 0,
py: 0,
vx: 0,
vy: 0,
pressed: false
};
this.colors = ['#da6b00', '#8555d4', '#4ad3b5', '#ffffff'];
this.particleCount = 500;
this.initialRadius = 0.1;
this.movementSpeed = 2;
this.directions = [];
this.starSystems = [];
this.systemCount = 1;
this.setStage();
this.setLighting();
this.setActors();
setInterval((function(_this) {
return function() {
_this.systemCount++;
return _this.addStars(_this.getPastelColor(), 0, 0);
};
})(this), 5000);
this.animate();
this.render();
}
Particles.prototype.getPastelColor = function() {
this.col = new THREE.Color("hsl(" + (this.random(0, 360)) + ", " + (Math.floor(25 + 70 * Math.random())) + "%, " + (Math.floor(85 + 10 * Math.random())) + "%)");
return "#" + (this.col.getHexString());
};
Particles.prototype.setActors = function() {
return this.addStars(this.getPastelColor(), 0, 0);
};
Particles.prototype.addStars = function(color, x, y) {
var angle, i, k, radiusSQ, ref, vertex;
this.dirs = [];
this.geometry = new THREE.Geometry();
this.materials = new THREE.PointsMaterial({
color: color,
size: 1,
transparent: true,
blending: THREE.AdditiveBlending,
map: this.getTexture(color),
depthTest: false
});
for (i = k = 0, ref = this.particleCount; 0 <= ref ? k < ref : k > ref; i = 0 <= ref ? ++k : --k) {
angle = Math.random() * 2 * Math.PI;
radiusSQ = Math.random() * this.initialRadius * this.initialRadius;
vertex = new THREE.Vector3();
vertex.x = x;
vertex.y = y;
vertex.z = 0;
this.dirs.push({
x: (Math.random() * this.movementSpeed) - (this.movementSpeed / 2),
y: (Math.random() * this.movementSpeed) - (this.movementSpeed / 2),
z: (Math.random() * this.movementSpeed) - (this.movementSpeed / 2)
});
this.geometry.vertices.push(vertex);
}
this.starSystem = new THREE.Points(this.geometry, this.materials);
this.starSystem.sortParticles = true;
this.directions.push(this.dirs);
this.starSystems.push(this.starSystem);
return this.scene.add(this.starSystem);
};
Particles.prototype.getTexture = function(color) {
var canvas, context, gradient, texture;
canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
context = canvas.getContext('2d');
gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
gradient.addColorStop(0, 'rgba(255,255,255,1)');
gradient.addColorStop(0.2, color);
gradient.addColorStop(0.4, color);
gradient.addColorStop(1, 'rgba(0,0,0,1)');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture;
};
Particles.prototype.setLighting = function() {
this.ambientLight = new THREE.AmbientLight("#ffffff", 0.5);
return this.scene.add(this.ambientLight);
};
Particles.prototype.setStage = function() {
this.renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("canvas"),
antialias: true
});
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.autoClear = false;
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
this.camera.position.z = 50;
this.stats = new Stats();
this.stats.setMode(0);
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.left = '0px';
this.stats.domElement.style.top = '0px';
document.getElementById("stats").appendChild(this.stats.domElement);
window.addEventListener('resize', this.resize, false);
window.addEventListener('mousemove', this.mouseMove, false);
return window.addEventListener("mousedown", this.mouseDown);
};
Particles.prototype.animate = function() {
var i, j, k, l, particle, ref, ref1;
for (j = k = 0, ref = this.systemCount - 1; 0 <= ref ? k <= ref : k >= ref; j = 0 <= ref ? ++k : --k) {
for (i = l = 0, ref1 = this.particleCount; 0 <= ref1 ? l < ref1 : l > ref1; i = 0 <= ref1 ? ++l : --l) {
particle = this.starSystems[j].geometry.vertices[i];
particle.x += this.directions[j][i].x;
particle.y += this.directions[j][i].y;
particle.z += this.directions[j][i].z;
}
this.starSystems[j].geometry.verticesNeedUpdate = true;
}
this.stats.update();
this.render();
return requestAnimationFrame(this.animate);
};
Particles.prototype.resize = function() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
return this.render();
};
Particles.prototype.mouseDown = function() {
this.systemCount++;
return this.addStars(this.getPastelColor(), this.canvasMouse.x, this.canvasMouse.y);
};
Particles.prototype.mouseMove = function() {
this.canvasMouse.px = this.canvasMouse.x;
this.canvasMouse.py = this.canvasMouse.y;
this.canvasX = (event.clientX / window.innerWidth) * 2 - 1;
this.canvasY = -(event.clientY / window.innerHeight) * 2 + 1;
this.vector = new THREE.Vector3(this.canvasX || 0, this.canvasY || 0, 0);
this.vector.unproject(this.camera);
this.dir = this.vector.sub(this.camera.position).normalize();
this.distance = -this.camera.position.z / this.dir.z;
return this.canvasMouse = this.camera.position.clone().add(this.dir.multiplyScalar(this.distance));
};
Particles.prototype.random = function(min, max) {
return Math.floor(Math.random() * max) + min;
};
Particles.prototype.rotateRadians = function(deg) {
return deg * (Math.PI / 180);
};
Particles.prototype.render = function() {
return this.renderer.render(this.scene, this.camera);
};
return Particles;
})();
new Particles;
}).call(this);
