3D fireworks
This commit is contained in:
parent
61cccb2674
commit
5af08e5cd7
23
build.js
23
build.js
@ -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
@ -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;
|
||||
});
|
@ -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
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
821
demos/fireworks/three.js
Normal file
File diff suppressed because one or more lines are too long
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
11
src/main.js
11
src/main.js
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user