draw_axes() in playground

1 files changed, 35 insertions, 0 deletions

diff --git a/index.html b/index.html
index 7d44b9d..d0e4189 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,7 @@
       var windowHalfY = HEIGHT / 2;
 
       init();
+      draw_axes();
       draw_cube();
       animate();
 
@@ -50,6 +51,40 @@
         mouseY = (event.clientY - windowHalfY);
       }
 
+      function draw_axes() {
+        var home = new THREE.Vector3(0,0,0);
+
+        var x_axis = [home, new THREE.Vector3(150,0,0)];
+        var y_axis = [home, new THREE.Vector3(0,150,0)];
+        var z_axis = [home, new THREE.Vector3(0,0,150)];
+
+        var axis_geometry = [
+          new THREE.Geometry(),
+          new THREE.Geometry(),
+          new THREE.Geometry()
+        ];
+
+        axis_geometry[0] = new THREE.Shape(x_axis).createPointsGeometry();
+        axis_geometry[1] = new THREE.Shape(y_axis).createPointsGeometry();
+        axis_geometry[2] = new THREE.Shape(z_axis).createPointsGeometry();
+
+        var axis_material = [
+          new THREE.LineBasicMaterial({ color : 0xff0000 }),
+          new THREE.LineBasicMaterial({ color : 0x00ff00 }),
+          new THREE.LineBasicMaterial({ color : 0x0000ff })
+        ];
+
+        var axis_line = [
+          new THREE.Line(axis_geometry[0], axis_material[0]),
+          new THREE.Line(axis_geometry[1], axis_material[1]),
+          new THREE.Line(axis_geometry[2], axis_material[2])
+        ];
+
+        scene.add(axis_line[0]);
+        scene.add(axis_line[1]);
+        scene.add(axis_line[2]);
+      }
+
       function draw_cube() {
         var materials = [];
         for (var i=0; i<6; i++) {