1 files changed, 82 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7d44b9d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,82 @@
+<html>
+  <head>
+    <title>Wishing Tree Playground</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+    <script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
+    <script src="lsys.js"></script>
+  </head>
+
+  <body>
+    <h2>L-Systems.js Playground</h2>
+    <div id="container"></div>
+    <script>
+
+      var WIDTH = 800; //window.innerWidth;
+      var HEIGHT = 600; //window.innerHeight;
+
+      var container;
+      var scene, camera, renderer;
+
+      var mouseX = 0, mouseY = 0;
+      var windowHalfX = WIDTH / 2;
+      var windowHalfY = HEIGHT / 2;
+
+      init();
+      draw_cube();
+      animate();
+
+      function init() {
+        scene = new THREE.Scene();
+
+        camera = new THREE.PerspectiveCamera(20, WIDTH / HEIGHT, 1, 10000);
+        camera.position.z = 180;
+        scene.add(camera);
+
+        light = new THREE.DirectionalLight( 0xffffff );
+        light.position.set( 0, 0, 1 );
+        scene.add(light);
+
+        renderer = new THREE.WebGLRenderer( { antialias: true } );
+        renderer.setSize(WIDTH, HEIGHT);
+        
+        container = document.getElementById('container');
+        container.appendChild(renderer.domElement);
+
+        document.addEventListener('mousemove', onDocumentMouseMove, false);
+      }
+
+      function onDocumentMouseMove( event ) {
+        mouseX = (event.clientX - windowHalfX);
+        mouseY = (event.clientY - windowHalfY);
+      }
+
+      function draw_cube() {
+        var materials = [];
+        for (var i=0; i<6; i++) {
+          materials.push(new THREE.MeshBasicMaterial({
+            color : Math.random() * 0xffffff
+          }));
+        }
+
+        var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5, 1, 1, 1, materials), new THREE.MeshFaceMaterial());
+        cube.position.x = 2.5;
+        cube.position.y = 2.5;
+        cube.position.z = 2.5;
+        scene.add(cube);
+      }
+
+      function animate() {
+        requestAnimationFrame(animate);
+        render();
+      }
+
+      function render() {
+        camera.position.x += (mouseX - camera.position.x) * 0.05;
+        camera.position.y += (-mouseY - camera.position.y) * 0.05;
+        camera.lookAt(scene.position);
+        renderer.render(scene, camera);
+      }
+
+    </script>
+  </body>
+</html>