css和js3d粒子,使用EaselJS实现的3D球形粒子运动

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// Config

var TOTAL = 1000;

var FPS = 60;

// Vars

var particles = [];

var stage, particle, maxx, maxy, gui, stats;

var changing = false;

function init() {

// get a reference to the canvas we'll be working with:

var canvas = document.getElementById("canvas");

if (!canvas || !canvas.getContext) return;

stage = new createjs.Stage(canvas);

stage.mouseEventsEnabled = true;

stage.mouseMoveOutside = false;

// Load

var blobSrc = new Image();

blobSrc.src = 'http://www.as-flash.com/ne_brisi/canvas/ball.png';

blobSrc.name = 'particle';

blobSrc.onload = onLoaded;

function onLoaded(e) {

particle = new createjs.Bitmap(blobSrc);

maxx = canvas.width - blobSrc.width;

maxy = canvas.height - blobSrc.height;

addParticles();

build();

animate();

}

function animate() {

// TICKER

createjs.Ticker.addListener(this);

createjs.Ticker.setFPS(FPS);

createjs.Ticker.useRAF = true;

}

function addParticles() {

for (var i = 0; i < particles.length; i++) {

stage.removeChild(particles[i]);

}

particles = [];

for (i = 0; i < TOTAL; i++) {

particles[i] = particle.clone();

particles[i].vx = 0;

particles[i].vy = 0;

}

}

// STATS

stats = new Stats();

stats.setMode(0);

document.body.appendChild(stats.domElement);

// GUI

gui = new dat.GUI({

autoPlace: false

});

gui.width = 220;

var customContainer = document.getElementById('gui-container');

customContainer.appendChild(gui.domElement);

var fpsc = gui.add(window, 'FPS', 0, 60).step(5).name('FPS');

var totalc = gui.add(window, 'TOTAL', 100, 5000).step(100).name('Particles');

gui.close();

fpsc.onChange(function(value) {

createjs.Ticker.setFPS(FPS);

});

totalc.onChange(function(value) {

changing = true;

});

totalc.onFinishChange(function(value) {

changing = false;

addParticles();

build();

});

}

// Build

function build() {

for (var i = 0; i < TOTAL; i++) {

particles[i].x = Math.random() * maxx;

particles[i].y = Math.random() * maxy;

stage.addChild(particles[i]);

}

}

function tick() {

if (changing) return;

for (var i = 0; i < TOTAL; i++) {

var blob = particles[i];

var dx = blob.x - stage.mouseX;

var dy = blob.y - stage.mouseY;

var vx = blob.vx;

var vy = blob.vy;

if (dx * dx + dy * dy <= 10000) {

vx += dx * 0.01;

vy += dy * 0.01;

}

vx *= 0.95;

vy *= 0.95;

vx += Math.random() - 0.5;

vy += Math.random() - 0.5;

var x = blob.x += vx;

var y = blob.y += vy;

if (x < 0 || x > maxx || y < 0 || y > maxy) {

var r = Math.atan2(y - maxy / 2, x - maxx / 2);

vx = -Math.cos(r);

vy = -Math.sin(r);

}

blob.vx = vx;

blob.vy = vy;

}

// update

stage.update();

stats.update();

}

// Init

window.addEventListener('load', init, false);