Globes

davinchia · Apr 11, 2015 · fbee522 · fbee522
1 parent 8e2500f
commit fbee522
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 24 deletions.
diff --git a/HackDartmouth.html b/HackDartmouth.html
@@ -2,7 +2,7 @@
     <head>
         <style>
             body { margin: 0; }
-            canvas { width: 100%; height: 100% }
+            canvas { width: 100%; height: 100%; cursor: none;}
         </style>
 
     </head>

diff --git a/images/earthbump1k.jpg b/images/earthbump1k.jpg
diff --git a/images/earthmap1k.jpg b/images/earthmap1k.jpg
diff --git a/images/earthspec1k.jpg b/images/earthspec1k.jpg
diff --git a/images/map_outline.jpg b/images/map_outline.jpg
diff --git a/images/map_outline.png b/images/map_outline.png
diff --git a/js/HackDartmouth.js b/js/HackDartmouth.js
@@ -1,7 +1,8 @@
-var camera, scene, isoMesh, cubeMesh, nullObject;
+var camera, scene, nullObject;
 var renderCanvas, renderer, vrrenderer;
 var vrHMD, vrHMDSensor;
-var rotation = 0;
+var currentRotation = goalRotation = 0.0;
+var globes = [];
 
 window.addEventListener("load", function() {
     if (navigator.getVRDevices) {
@@ -27,12 +28,25 @@ window.addEventListener("keypress", function(e) {
 
 window.onkeydown = function(e) {
     if (e.keyCode == 37) {
-        rotation += 0.1;
+        goalRotation += Math.PI / 2;
     } else if (e.keyCode == 39) {
-        rotation -= 0.1;
+        goalRotation -= Math.PI / 2;
     }
 }
 
+var mouseY = 0.0;
+var mouseX = 0.0;
+
+
+function onMouseMove(evt) {
+    evt.preventDefault();
+
+    var deltaX = evt.clientX - mouseX;
+    var deltaY = evt.clientY - mouseY;
+
+
+}
+
 function vrDeviceCallback(vrdevs) {
     for (var i = 0; i < vrdevs.length; ++i) {
         if (vrdevs[i] instanceof HMDVRDevice) {
@@ -55,34 +69,65 @@ function vrDeviceCallback(vrdevs) {
 function initScene() {
 
     camera = new THREE.PerspectiveCamera(60, 1280 / 800, 0.001, 10);
-    camera.position.z = 2;
+    //camera.position.z = 2;
     scene = new THREE.Scene();
 
 
     nullObject = new THREE.Object3D();
-    nullObject.position.z = 2;
+    //nullObject.position.z = 2;
     scene.add(nullObject);
 
+
+    var globe1 = new Globe(0);
+    var globe2 = new Globe(Math.PI/2);
+    var globe3 = new Globe(Math.PI);
+    var globe4 = new Globe(Math.PI*1.5);
+
+    nullObject.add(globe1);
+    nullObject.add(globe2);
+    nullObject.add(globe3);
+    nullObject.add(globe4);
+
+
+    var light = new THREE.DirectionalLight(0x555555);
+    light.position.set(0, 1, 0).normalize();
+    scene.add(light);
 
+    var bottomLight = new THREE.DirectionalLight(0x555555);
+    bottomLight.position.set(0, -1, 0).normalize();
+    scene.add(bottomLight);
 
-    var geometry = new THREE.IcosahedronGeometry(1, 1);
-    var material = new THREE.MeshNormalMaterial();
-    isoMesh = new THREE.Mesh(geometry, material);
-    //isoMesh.position.y = 5;
-    isoMesh.position.z = -2;
-    nullObject.add(isoMesh);
 
+    var spotlightTarget = new THREE.Object3D();
+    spotlightTarget.position.copy(globe1.position);
+    scene.add(spotlightTarget);
 
+    var spotLight = new THREE.SpotLight(0xFFFFFF);
+    spotLight.target = spotlightTarget;
+    scene.add(spotLight);
 
+    var ambientLight = new THREE.AmbientLight(0x444444);
+   scene.add(ambientLight)
 
+}
+
+function Globe (angle) {
+
+    var geometry    = new THREE.SphereGeometry(0.75, 32, 32);
+    var material    = new THREE.MeshPhongMaterial();
+    material.map = THREE.ImageUtils.loadTexture('images/map_outline.jpg');
+    material.map.minFilter = THREE.NearestFilter;
+    var earthMesh    = new THREE.Mesh(geometry, material);
 
+    //earthMesh.position.z = -2;
 
-    var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
-    var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-    cubeMesh = new THREE.Mesh( cubeGeometry, cubeMaterial );
-    cubeMesh.position.y = 5;
-    scene.add( cubeMesh );
+    earthMesh.position.z = -2*Math.cos(angle);
+    earthMesh.position.x = -2*Math.sin(angle);
+    earthMesh.position.y = -0.5;
 
+    globes.push(earthMesh);
+
+    return earthMesh;
 
 }
 
@@ -96,15 +141,32 @@ function initRenderer() {
     vrrenderer = new THREE.VRRenderer(renderer, vrHMD);
 }
 
+var dateLast = Date.now();
+var dateCurrent;
+var elapsed;
+var stepSize = Math.PI / 45;
+
 function render() {
     requestAnimationFrame(render);
-    isoMesh.rotation.y += 0.01;
-    cubeMesh.rotation.x += 0.1;
-    cubeMesh.rotation.y += 0.1;
-
-    nullObject.rotation.y = rotation;
-
 
+    for (var i in globes) {
+        globes[i].rotation.y += 0.01;    
+    }
+
+    dateCurrent = Date.now();
+    elapsed = dateCurrent - dateLast;
+    dateLast = dateCurrent;
+
+    if (!(Math.abs(goalRotation - currentRotation) < stepSize/2)) {
+        console.log("hey!", goalRotation, currentRotation);
+        if (goalRotation > currentRotation) {
+            currentRotation += stepSize * elapsed/50;
+            nullObject.rotation.y = currentRotation;
+        } else if (goalRotation < currentRotation) {
+            currentRotation -= stepSize * elapsed/50;
+            nullObject.rotation.y = currentRotation;
+        }
+    }
 
     var state = vrHMDSensor.getState();
     camera.quaternion.set(state.orientation.x, state.orientation.y, state.orientation.z, state.orientation.w);