3D fireworks

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: {
+          configs: { globalGravity: true },
-            globalGravity: true,
-            canvas: function () {
-              var canvas = document.createElement("canvas");
-              canvas.width = window.innerWidth;
-              canvas.height = window.innerHeight;
-              document.body.appendChild(canvas);
-              return canvas;
-            }
-          },
           config: function (o) {
             for (var i in o) {
               this.configs[i] = o[i];

demos/fireworks/demo.js

@@ -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);
+  this.particle = Bolt.Particle(props);
-  particle.type = props.type || 0;
+  this.type = props.type || 0;
-  particle.age = Math.random() * (5 - 3) + 3;
+  this.age = Math.random() * (5 - 3) + 3;
-  particle.damping = 0.93;
+  this.particle.damping = 0.93;
-  particle.velocity = props.velocity || Bolt.Vector.random([-8, 8], [-60, -12], [-5, 0]);
+  this.particle.velocity = props.velocity || Bolt.Vector.random([-8, 8], [60, 12], [-8, 8]);
-  particle.color = props.color;
+
-  return particle;
+  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),
+      position: Bolt.Vector(window.innerWidth/4, 0, 0),
-      color: '#FF3636',
+      mass: 4
-      mass: 2
     }));
     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++) {
+      for(var x = 0; x < 3; x++) {
-        var vel = fw.velocity.clone().add(Bolt.Vector.random([-8, 8], [-10, 10], [-5, 5]));
+        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: 2
-          mass: 1
         });
         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;
+});

demos/fireworks/index.html

@@ -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>

src/lib/gravity.js

@@ -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);
   }
 };
 

src/lib/play.js

@@ -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.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = 'black';
+        // ctx.fillStyle = 'black';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // 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.beginPath();
-            ctx.fillStyle = object.color;
+            // ctx.fillStyle = object.color;
-            ctx.arc(object.position.x, object.position.y, object.mass, 0, 2*Math.PI);
+            // ctx.arc(object.position.x, object.position.y, object.mass, 0, 2*Math.PI);
-            ctx.fill();
+            // ctx.fill();
           }
         }
 

src/main.js

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