3D fireworks

This commit is contained in:
Mahdi Dibaiee 2015-01-24 17:56:37 +03:30
parent 61cccb2674
commit 5af08e5cd7
9 changed files with 918 additions and 60 deletions

View File

@ -470,7 +470,7 @@
},
globalMass: 10,
global: function (mass, g) {
return new Vector(0, mass * (g || this.globalMass), 0);
return new Vector(0, -mass * (g || this.globalMass), 0);
}
};
$__export("default", Gravity);
@ -525,14 +525,8 @@
playing: false,
start: function (fn) {
Frames.tick(Date.now());
var canvas = typeof Bolt.configs.canvas === "function" ? Bolt.configs.canvas() : Bolt.configs.canvas;
Bolt._canvas = canvas;
var ctx = canvas.getContext("2d");
(function loop() {
reqAnimFrame(function (now) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var avg = Frames.tick(now);
for (var i = 0,
len = Bolt.objects.length; i < len; i++) {
@ -544,10 +538,6 @@
acc.add(force);
object.velocity.add(acc.scalar(Frames.elapsed));
object.velocity.scalar(Math.pow(object.damping, Frames.elapsed));
ctx.beginPath();
ctx.fillStyle = object.color;
ctx.arc(object.position.x, object.position.y, object.mass, 0, 2 * Math.PI);
ctx.fill();
}
}
if (fn) fn.apply(this, arguments);
@ -589,16 +579,7 @@
}],
execute: function () {
Bolt = {
configs: {
globalGravity: true,
canvas: function () {
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
return canvas;
}
},
configs: { globalGravity: true },
config: function (o) {
for (var i in o) {
this.configs[i] = o[i];

File diff suppressed because one or more lines are too long

View File

@ -1,32 +1,69 @@
var scene = new THREE.Scene(),
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000),
renderer = new THREE.WebGLRenderer(),
light = new THREE.HemisphereLight(0xf0f0f0, 0x404040);
camera.position.z = 1000;
renderer.setSize(window.innerWidth, window.innerHeight);
var cubeGeometry = new THREE.SphereGeometry(7, 8, 8),
redMaterial = new THREE.MeshLambertMaterial({color: 0xFF2200}),
orangeMaterial = new THREE.MeshLambertMaterial({color: 0xFFFB00});
scene.add(light);
document.body.appendChild(renderer.domElement);
function Firework(props) {
var particle = Bolt.Particle(props);
particle.type = props.type || 0;
particle.age = Math.random() * (5 - 3) + 3;
particle.damping = 0.93;
particle.velocity = props.velocity || Bolt.Vector.random([-8, 8], [-60, -12], [-5, 0]);
particle.color = props.color;
return particle;
this.particle = Bolt.Particle(props);
this.type = props.type || 0;
this.age = Math.random() * (5 - 3) + 3;
this.particle.damping = 0.93;
this.particle.velocity = props.velocity || Bolt.Vector.random([-8, 8], [60, 12], [-8, 8]);
this.view = new THREE.Mesh(cubeGeometry, this.type === 0 ? redMaterial : orangeMaterial);
if(this.type === 1) {
this.view.scale.x = 0.5;
this.view.scale.y = 0.5;
this.view.scale.z = 0.5;
}
this.render();
scene.add(this.view);
}
Firework.prototype.render = function() {
this.view.position.x = this.particle.position.x;
this.view.position.y = this.particle.position.y;
this.view.position.z = this.particle.position.z;
};
Firework.prototype.destroy = function() {
this.particle.destroy();
scene.remove(this.view);
this.view = null;
};
var fireworks = [];
var count = 0;
Bolt.Play.start(function() {
count++;
if(count === 8) {
fireworks.push(new Firework({
type: 0,
position: Bolt.Vector(Bolt._canvas.width/2, Bolt._canvas.height/2, 0),
color: '#FF3636',
mass: 2
position: Bolt.Vector(window.innerWidth/4, 0, 0),
mass: 4
}));
count = 0;
}
for(var i = 0, len = fireworks.length; i < len; i++) {
var fw = fireworks[i];
fw.render();
fw.age -= Bolt.Frames.elapsed;
if(fw.age < 0) {
fw.destroy();
@ -36,20 +73,50 @@ Bolt.Play.start(function() {
if(fw.type === 1) continue;
for(var x = 0; x < 5; x++) {
var vel = fw.velocity.clone().add(Bolt.Vector.random([-8, 8], [-10, 10], [-5, 5]));
for(var x = 0; x < 3; x++) {
var vel = fw.particle.velocity.clone().add(Bolt.Vector.random([-8, 8], [-10, 10], [-8, 8]));
var childFirework = new Firework({
type: 1,
position: fw.position.clone(),
position: fw.particle.position.clone(),
velocity: vel,
color: '#FFA400',
mass: 1
mass: 2
});
fireworks.push(childFirework);
}
}
}
renderer.render(scene, camera);
}).then(function() {
});
var isMouseDown = false,
initial = {x: 0, y: 0},
last = {x: 0, y: 0};
renderer.domElement.style.setProperty('cursor', 'pointer');
renderer.domElement.addEventListener('mousedown', function(e) {
isMouseDown = true;
initial.x = e.pageX;
initial.y = e.pageY;
renderer.domElement.style.setProperty('cursor', 'grab');
});
renderer.domElement.addEventListener('mousemove', function(e) {
if(!isMouseDown) return;
camera.position.x = last.x + initial.x - e.pageX;
camera.position.y = last.y + -(initial.y - e.pageY);
});
renderer.domElement.addEventListener('mouseup', function(e) {
isMouseDown = false;
last.x = camera.position.x;
last.y = camera.position.y;
renderer.domElement.style.setProperty('cursor', 'pointer');
});
renderer.domElement.addEventListener('wheel', function(e) {
camera.position.z += e.deltaY * 10;
});

View File

@ -8,6 +8,7 @@
<p style="position: absolute;top:5px;left:10px;" id='fps'></p>
<script src='../../build.js'></script>
<script src='three.js'></script>
<script src='demo.js'></script>
</body>
</html>

1
demos/fireworks/lithree.min.js vendored Normal file

File diff suppressed because one or more lines are too long

821
demos/fireworks/three.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -12,7 +12,7 @@ var Gravity = {
globalMass: 10,
global: function(mass, g) {
return new Vector(0, mass * (g || this.globalMass), 0);
return new Vector(0, -mass * (g || this.globalMass), 0);
}
};

View File

@ -20,15 +20,11 @@ var Play = {
start: function(fn) {
Frames.tick(Date.now());
var canvas = typeof Bolt.configs.canvas === 'function' ? Bolt.configs.canvas() : Bolt.configs.canvas;
Bolt._canvas = canvas;
var ctx = canvas.getContext('2d');
(function loop() {
reqAnimFrame(function(now) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// ctx.fillStyle = 'black';
// ctx.fillRect(0, 0, canvas.width, canvas.height);
var avg = Frames.tick(now);
for(var i = 0, len = Bolt.objects.length; i < len; i++) {
@ -44,10 +40,10 @@ var Play = {
object.velocity.add(acc.scalar(Frames.elapsed));
object.velocity.scalar(Math.pow(object.damping, Frames.elapsed));
ctx.beginPath();
ctx.fillStyle = object.color;
ctx.arc(object.position.x, object.position.y, object.mass, 0, 2*Math.PI);
ctx.fill();
// ctx.beginPath();
// ctx.fillStyle = object.color;
// ctx.arc(object.position.x, object.position.y, object.mass, 0, 2*Math.PI);
// ctx.fill();
}
}

View File

@ -6,16 +6,7 @@ import Play from './lib/play';
var Bolt = {
configs: {
globalGravity: true,
canvas: function() {
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
return canvas;
}
globalGravity: true
},
config: function(o) {