Merge pull request #600 from mozilla/bug/initial-preview-camera

Bug/initial preview camera

src/components/pitch-yaw-rotator.js

 const degToRad = THREE.Math.degToRad;
+const radToDeg = THREE.Math.radToDeg;
+
 AFRAME.registerComponent("pitch-yaw-rotator", {
   schema: {
     minPitch: { default: -50 },
@@ -17,6 +19,11 @@ AFRAME.registerComponent("pitch-yaw-rotator", {
     this.yaw += deltaYaw;
   },
 
+  set(pitch, yaw) {
+    this.pitch = radToDeg(pitch);
+    this.yaw = radToDeg(yaw);
+  },
+
   tick() {
     this.el.object3D.rotation.set(degToRad(this.pitch), degToRad(this.yaw), 0);
     this.el.object3D.rotation.order = "YXZ";

src/components/scene-preview-camera.js

@@ -29,11 +29,17 @@ AFRAME.registerComponent("scene-preview-camera", {
 
     this.startTime = new Date().getTime();
     this.backwards = false;
+    this.ranOnePass = false;
   },
 
   tick: function() {
     let t = (new Date().getTime() - this.startTime) / (1000.0 * this.data.duration);
-    t = (t * t) / (2 * (t * t - t) + 1); // Simple beizer smoothing
+
+    if (!this.ranOnePass) {
+      t = t * (2 - t);
+    } else {
+      t = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+    }
 
     const from = this.backwards ? this.targetPoint : this.startPoint;
     const to = this.backwards ? this.startPoint : this.targetPoint;
@@ -50,6 +56,7 @@ AFRAME.registerComponent("scene-preview-camera", {
     }
 
     if (t >= 0.9999) {
+      this.ranOnePass = true;
       this.backwards = !this.backwards;
       this.startTime = new Date().getTime();
     }

src/hub.js

@@ -188,6 +188,7 @@ function setupLobbyCamera() {
   }
 
   camera.setAttribute("scene-preview-camera", "positionOnly: true; duration: 60");
+  camera.components["pitch-yaw-rotator"].set(camera.object3D.rotation.x / 2, camera.object3D.rotation.y);
 }
 
 let uiProps = {};