Use a focus-animation component instead of a fake component

index.html

@@ -100,7 +100,15 @@
         blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
       <a-entity id="rightHand" hand-controls="hand: right"
         blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
-      <a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
+      <a-entity
+        id="screenshot"
+        data-layer-name="Focus animation"
+        data-no-pause=""
+        data-no-transform=""
+        focus-animation
+        screentock
+        visible="false"
+      ></a-entity>
     </a-entity>
 
   </a-scene>

src/components/focus-animation.js

@@ -0,0 +1,75 @@
+function easeInOutQuad(t) {
+  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+}
+
+AFRAME.registerComponent('focus-animation', {
+  schema: {
+    speed: {
+      type: 'string',
+      oneOf: ['immediate', 'fast', 'slow'],
+      default: 'fast'
+    }
+  },
+
+  init() {
+    this.camera = null;
+    // Those variables are set by EditorControls
+    this.transitioning = false;
+    this.transitionProgress = 0;
+    this.transitionCamPosStart = new THREE.Vector3();
+    this.transitionCamPosEnd = new THREE.Vector3();
+    this.transitionCamQuaternionStart = new THREE.Quaternion();
+    this.transitionCamQuaternionEnd = new THREE.Quaternion();
+  },
+
+  update() {
+    if (this.data.speed === 'slow') {
+      this.transitionSpeed = 0.00025;
+    } else {
+      this.transitionSpeed = 0.001;
+    }
+  },
+
+  // Called by EditorControls initially
+  setCamera(camera, changeEventCallback) {
+    this.camera = camera;
+    this.changeEventCallback = changeEventCallback;
+  },
+
+  tick(t, delta) {
+    if (!this.camera) return;
+    if (this.transitioning) {
+      if (this.data.speed === 'immediate') {
+        this.transitioning = false;
+        this.camera.position.copy(this.transitionCamPosEnd);
+        this.camera.quaternion.copy(this.transitionCamQuaternionEnd);
+        this.changeEventCallback();
+        return;
+      }
+      this.transitionProgress += delta * this.transitionSpeed;
+      const easeInOutTransitionProgress = easeInOutQuad(
+        this.transitionProgress
+      );
+
+      // Set camera position
+      this.camera.position.lerpVectors(
+        this.transitionCamPosStart,
+        this.transitionCamPosEnd,
+        easeInOutTransitionProgress
+      );
+
+      this.camera.quaternion.slerpQuaternions(
+        this.transitionCamQuaternionStart,
+        this.transitionCamQuaternionEnd,
+        easeInOutTransitionProgress
+      );
+
+      if (this.transitionProgress >= 1) {
+        this.transitioning = false;
+        this.camera.position.copy(this.transitionCamPosEnd);
+        this.camera.quaternion.copy(this.transitionCamQuaternionEnd);
+      }
+      this.changeEventCallback();
+    }
+  }
+});

src/editor/lib/EditorControls.js

@@ -62,8 +62,10 @@ THREE.EditorControls = function (_object, domElement) {
     var distance;
 
     // Save current camera position/quaternion
-    scope.transitionCamPosStart.copy(object.position);
-    scope.transitionCamQuaternionStart.copy(object.quaternion);
+    this.focusAnimationComponent.transitionCamPosStart.copy(object.position);
+    this.focusAnimationComponent.transitionCamQuaternionStart.copy(
+      object.quaternion
+    );
 
     box.setFromObject(target);
 
@@ -88,68 +90,25 @@ THREE.EditorControls = function (_object, domElement) {
     object.lookAt(pos);
 
     // Save end camera position/quaternion
-    scope.transitionCamPosEnd.copy(object.position);
-    scope.transitionCamQuaternionEnd.copy(object.quaternion);
+    this.focusAnimationComponent.transitionCamPosEnd.copy(object.position);
+    this.focusAnimationComponent.transitionCamQuaternionEnd.copy(
+      object.quaternion
+    );
     // Restore camera position/quaternion and start transition
-    object.position.copy(scope.transitionCamPosStart);
-    object.quaternion.copy(scope.transitionCamQuaternionStart);
-    scope.transitionSpeed = 0.001;
-    scope.transitionProgress = 0;
-    scope.transitioning = true;
+    object.position.copy(this.focusAnimationComponent.transitionCamPosStart);
+    object.quaternion.copy(
+      this.focusAnimationComponent.transitionCamQuaternionStart
+    );
+    this.focusAnimationComponent.transitionProgress = 0;
+    this.focusAnimationComponent.transitioning = true;
   };
 
-  function easeInOutQuad(t) {
-    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-  }
-
-  this.transitioning = false;
-  this.transitionProgress = 0;
-  this.transitionCamPosStart = new THREE.Vector3();
-  this.transitionCamPosEnd = new THREE.Vector3();
-  this.transitionCamQuaternionStart = new THREE.Quaternion();
-  this.transitionCamQuaternionEnd = new THREE.Quaternion();
-  this.transitionSpeed = 0.001;
-  this.fakeComponent = {
-    name: 'inspector-editor-controls',
-    el: { isPlaying: true },
-    isPlaying: true,
-    tick: (t, delta) => {
-      if (scope.enabled === false) return;
-      if (this.transitioning) {
-        this.transitionProgress += delta * this.transitionSpeed;
-        const easeInOutTransitionProgress = easeInOutQuad(
-          this.transitionProgress
-        );
-
-        // Set camera position
-        object.position.lerpVectors(
-          this.transitionCamPosStart,
-          this.transitionCamPosEnd,
-          easeInOutTransitionProgress
-        );
-
-        object.quaternion.slerpQuaternions(
-          this.transitionCamQuaternionStart,
-          this.transitionCamQuaternionEnd,
-          easeInOutTransitionProgress
-        );
-
-        if (this.transitionProgress >= 1) {
-          this.transitioning = false;
-          object.position.copy(this.transitionCamPosEnd);
-          object.quaternion.copy(this.transitionCamQuaternionEnd);
-        }
-        scope.dispatchEvent(changeEvent);
-      }
-    }
+  this.focusAnimationComponent =
+    document.querySelector('[focus-animation]').components['focus-animation'];
+  const changeEventCallback = () => {
+    scope.dispatchEvent(changeEvent);
   };
-  // Register the tick function with the render loop
-  const sceneEl = AFRAME.scenes[0];
-  if (sceneEl.componentOrder) {
-    // aframe 1.6.0 an above
-    sceneEl.componentOrder.push(this.fakeComponent.name);
-  }
-  sceneEl.addBehavior(this.fakeComponent);
+  this.focusAnimationComponent.setCamera(object, changeEventCallback);
 
   this.pan = function (delta) {
     var distance;

src/index.js

@@ -17,6 +17,7 @@ require('./assets.js');
 require('./components/notify.js');
 require('./components/create-from-json');
 require('./components/screentock.js');
+require('./components/focus-animation');
 require('aframe-atlas-uvs-component');
 require('./components/street-geo.js');
 require('./components/street-environment.js');