Spaces:

hadadxyz
/

interstellar

Sleeping

App Files Files Community

Pim Schreurs commited on May 19, 2018

Commit

33be52b

1 Parent(s): 49547bd

Add teleport functionality

Browse files

Files changed (6) hide show

index.html +9 -4
js/Player.js +44 -2
js/Simulation.js +18 -4
js/controls/DeviceOrientationControls.js +0 -2
js/controls/KeyboardControls.js +5 -2
js/controls/MobileDeviceControls.js +19 -2

index.html CHANGED Viewed

@@ -44,6 +44,9 @@
       padding: 5px;
       text-align: center;
       z-index: 10;
       pointer-events: none;
     }
@@ -98,7 +101,7 @@
       color: #0080ff;
     }
-    kbd { color: orange }
     #container {
       position: fixed;
@@ -143,8 +146,8 @@
 <body>
 <div id="info">
-  <h3>Controls:</h3>
-  <div id="keyboard-controls">
     <kbd>WASD</kbd> move,
     <kbd>R|F</kbd> up | down,
     <kbd>Q|E</kbd> roll,
@@ -152,10 +155,12 @@
     <kbd>left|right</kbd> yaw
     <kbd>shift</kbd> speed up<br>
     <kbd>space/esc</kbd> toggle mouse controls<br>
     Scroll to increase/decrease your field of view.
   </div>
   <div id="mobile-device-controls">
-    Point your device around you to look around. Touch the screen to move forwards. Use two fingers to go faster.
   </div>
 </div>

       padding: 5px;
       text-align: center;
       z-index: 10;
+    }
+    .no-pointer-events {
       pointer-events: none;
     }
       color: #0080ff;
     }
+    kbd, #teleport { color: orange }
     #container {
       position: fixed;
 <body>
 <div id="info">
+  <h3 class="no-pointer-events">Controls:</h3>
+  <div id="keyboard-controls" class="no-pointer-events">
     <kbd>WASD</kbd> move,
     <kbd>R|F</kbd> up | down,
     <kbd>Q|E</kbd> roll,
     <kbd>left|right</kbd> yaw
     <kbd>shift</kbd> speed up<br>
     <kbd>space/esc</kbd> toggle mouse controls<br>
+    <kbd>T</kbd> Teleport to next object<br>
     Scroll to increase/decrease your field of view.
   </div>
   <div id="mobile-device-controls">
+    <div class="no-pointer-events">Point your device around you to look around. Touch the screen to move forwards. Use two fingers to go faster.</div>
+    <div id="teleport">Teleport to next object</div>
   </div>
 </div>

js/Player.js CHANGED Viewed

@@ -11,13 +11,23 @@ function Player()
   this.galaxy = 0;
   this.controls = [];
 }
 Player.prototype = {
   lookAt: function(position)
   {
-    this.eyes.lookAt(position);
   },
   handleInput: function()
@@ -107,5 +117,37 @@ Player.prototype = {
     // Object isn't actually part of a rendered scene, so we need to call this manually
     this.object.updateMatrixWorld(true);
   }
-};

   this.galaxy = 0;
   this.controls = [];
+  this.teleportTargets = [];
 }
 Player.prototype = {
+  addTeleportTarget: function(target) {
+    this.teleportTargets.push(target)
+  },
   lookAt: function(position)
   {
+    // this.object.lookAt makes it look in the exact opposite direction, for some reason
+    var lookAtMatrix = new THREE.Matrix4();
+    lookAtMatrix.lookAt(this.object.position, position, this.object.up);
+    this.object.quaternion.setFromRotationMatrix(lookAtMatrix);
+    this.object.quaternion.multiply(this.eyes.quaternion.clone().inverse());
   },
   handleInput: function()
     // Object isn't actually part of a rendered scene, so we need to call this manually
     this.object.updateMatrixWorld(true);
+  },
+  getClosestTeleportIndex: function() {
+    var minDistance = Infinity;
+    var result = null;
+    for (var i = 0; i < this.teleportTargets.length; i++) {
+      var distance;
+      if (this.teleportTargets[i].galaxy != this.galaxy) {
+        distance =
+          this.object.position.distanceTo(Simulation.wormholePositionSize) +
+          this.teleportTargets[i].position.distanceTo(Simulation.wormholePositionSize);
+      } else {
+        distance = this.object.position.distanceTo(this.teleportTargets[i].position);
+      }
+      if (distance < minDistance) {
+        minDistance = distance;
+        result = i;
+      }
+    }
+    return result;
+  },
+  teleport: function() {
+    var nextIndex = (this.getClosestTeleportIndex() + 1) % this.teleportTargets.length;
+    var teleportTarget = this.teleportTargets[nextIndex];
+    this.object.position.copy(teleportTarget.position);
+    this.lookAt(teleportTarget.lookAt);
+    this.galaxy = teleportTarget.galaxy;
   }
+};

js/Simulation.js CHANGED Viewed

@@ -127,6 +127,13 @@ var Simulation = {
     this.planetPositionSize.y += this.blackholePositionSize.y;
     this.planetPositionSize.z += this.blackholePositionSize.z;
     // Ring definition - xyz is normal going through ring. Its magnitude determines inner radius.
     // w component determines outer radius
     this.blackholeDisk = new THREE.Vector4(-12, 12, 6, 150.0);
@@ -221,12 +228,17 @@ var Simulation = {
     this.player = new Player;
     this.player.lookAt(this.wormholePositionSize);
     // Add keyboard controls to the player
     this.keyboardControls = new KeyboardControls(this.player, this.container);
     this.keyboardControls.movementSpeed = 1;
     this.keyboardControls.rollSpeed = Math.PI / 3;
     this.keyboardControls.autoForward = false;
     this.keyboardControls.dragToLook = false;
     this.player.controls.push(this.keyboardControls);
@@ -261,14 +273,16 @@ var Simulation = {
     window.addEventListener("keypress", keypress, false);
-    // Disable mobile device controls until we get some indication that we're on an orientable device
-    this.mobileDeviceControls.disconnect();
     var deviceListener = function(event) {
       if (event.alpha === null) return;
       self.mobileDeviceControls.connect();
       window.removeEventListener("deviceorientation", deviceListener, false);
       document.body.classList.add("mobile-device");
@@ -328,4 +342,4 @@ var Simulation = {
     this.renderer.clear();
     this.composer.render();
   },
-};

     this.planetPositionSize.y += this.blackholePositionSize.y;
     this.planetPositionSize.z += this.blackholePositionSize.z;
+    this.teleportTargets = [
+      { position: new THREE.Vector3(10, -307, 454), lookAt: this.blackholePositionSize, galaxy: 1 },
+      { position: new THREE.Vector3(7.2, -188, 199.6), lookAt: this.planetPositionSize, galaxy: 1 },
+      { position: new THREE.Vector3(12.4, 3.3, -35.1), lookAt: this.wormholePositionSize, galaxy: 1 },
+      { position: new THREE.Vector3(9.8, -4.6, -3.1), lookAt: this.wormholePositionSize, galaxy: 0 }
+    ];
     // Ring definition - xyz is normal going through ring. Its magnitude determines inner radius.
     // w component determines outer radius
     this.blackholeDisk = new THREE.Vector4(-12, 12, 6, 150.0);
     this.player = new Player;
     this.player.lookAt(this.wormholePositionSize);
+    for (var i = 0; i < this.teleportTargets.length; i++) {
+      this.player.addTeleportTarget(this.teleportTargets[i]);
+    }
     // Add keyboard controls to the player
     this.keyboardControls = new KeyboardControls(this.player, this.container);
     this.keyboardControls.movementSpeed = 1;
     this.keyboardControls.rollSpeed = Math.PI / 3;
     this.keyboardControls.autoForward = false;
     this.keyboardControls.dragToLook = false;
+    this.keyboardControls.connect();
     this.player.controls.push(this.keyboardControls);
     window.addEventListener("keypress", keypress, false);
     var deviceListener = function(event) {
       if (event.alpha === null) return;
       self.mobileDeviceControls.connect();
+      // The player will probably not be looking with their device in the right direction, so fix that
+      requestAnimationFrame(function () {
+        self.player.object.quaternion.multiply(self.player.eyes.quaternion.clone().inverse())
+      })
       window.removeEventListener("deviceorientation", deviceListener, false);
       document.body.classList.add("mobile-device");
     this.renderer.clear();
     this.composer.render();
   },
+};

js/controls/DeviceOrientationControls.js CHANGED Viewed

@@ -85,6 +85,4 @@ THREE.DeviceOrientationControls = function ( object ) {
 	};
-	this.connect();
 };


85
86	};
87


88	};

js/controls/KeyboardControls.js CHANGED Viewed

@@ -1,6 +1,7 @@
 function KeyboardControls(player, element)
 {
   this.player = player;
   element.setAttribute('tabindex', -1);
@@ -96,6 +97,10 @@ function KeyboardControls(player, element)
       case 69: // E
         self.moveState.rollRight = 1;
         break;
     }
     updateMovementVector();
@@ -316,6 +321,4 @@ function KeyboardControls(player, element)
     this.player.velocity.copy(this.moveVector).multiplyScalar(moveMult).applyQuaternion(this.player.eyes.getWorldQuaternion());
     this.player.eyeAngularVelocity.copy(this.rotationVector).multiplyScalar(rotMult);
   };
-  this.connect();
 }

 function KeyboardControls(player, element)
 {
   this.player = player;
+  this.teleport = this.player.teleport.bind(this.player);
   element.setAttribute('tabindex', -1);
       case 69: // E
         self.moveState.rollRight = 1;
         break;
+      case 84: // T
+        self.teleport();
+        break;
     }
     updateMovementVector();
     this.player.velocity.copy(this.moveVector).multiplyScalar(moveMult).applyQuaternion(this.player.eyes.getWorldQuaternion());
     this.player.eyeAngularVelocity.copy(this.rotationVector).multiplyScalar(rotMult);
   };
 }

js/controls/MobileDeviceControls.js CHANGED Viewed

@@ -8,6 +8,13 @@ function MobileDeviceControls(player, element)
   var self = this;
   function onTouchEvent(event)
   {
     event.preventDefault();
@@ -48,6 +55,12 @@ function MobileDeviceControls(player, element)
     element.addEventListener( 'touchmove', onTouchEvent, false );
     element.addEventListener( 'touchend', onTouchEvent, false );
     this.enabled = true;
   };
@@ -58,6 +71,12 @@ function MobileDeviceControls(player, element)
     element.removeEventListener( 'touchmove', onTouchEvent, false );
     element.removeEventListener( 'touchend', onTouchEvent, false );
     this.enabled = false;
   };
@@ -67,6 +86,4 @@ function MobileDeviceControls(player, element)
     this.player.velocity.copy(this.velocity).applyQuaternion(this.player.eyes.getWorldQuaternion());
     this.deviceOrientationControls.update();
   };
-  this.connect();
 }

   var self = this;
+  function teleport(event)
+  {
+    event.preventDefault();
+    player.teleport();
+  }
   function onTouchEvent(event)
   {
     event.preventDefault();
     element.addEventListener( 'touchmove', onTouchEvent, false );
     element.addEventListener( 'touchend', onTouchEvent, false );
+    document.querySelector( '#teleport' ).addEventListener(
+      'touchstart',
+      teleport,
+      false
+    );
     this.enabled = true;
   };
     element.removeEventListener( 'touchmove', onTouchEvent, false );
     element.removeEventListener( 'touchend', onTouchEvent, false );
+    document.querySelector( '#teleport' ).removeEventListener(
+      'touchstart',
+      teleport,
+      false
+    );
     this.enabled = false;
   };
     this.player.velocity.copy(this.velocity).applyQuaternion(this.player.eyes.getWorldQuaternion());
     this.deviceOrientationControls.update();
   };
 }