Finally working

src/components/follow-entity.js

-AFRAME.registerComponent("follow-entity", {
-  schema: {
-    target: { type: "selector" },
-    offset: { type: "vec3" },
-    worldYOffset: { type: "number", default: 0.35 },
-    speed: { type: "number", default: 0.005 },
-    ySnapInterval: { type: "number", default: 0.75 }
-  },
-
-  init() {
-    this.targetPos = new THREE.Vector3();
-    this.offset = new THREE.Vector3();
-    this.offset.copy(this.data.offset);
-  },
-
-  tick(t, dt) {
-    const obj = this.el.object3D;
-    const target = this.data.target.object3D;
-
-    const snappedRot = new THREE.Euler(
-      Math.floor((target.rotation.x + Math.PI / 6) / (Math.PI / 4)) * (Math.PI / 4),
-      target.rotation.y,
-      target.rotation.z,
-      target.rotation.order
-    );
-
-    const snappedQ = new THREE.Quaternion();
-    snappedQ.setFromEuler(snappedRot);
-    //snappedQ.copy(target.quaternion);
-    const snappedXForm = new THREE.Matrix4();
-    const snappedXFormWorld = new THREE.Matrix4();
-    snappedXForm.compose(
-      target.position,
-      snappedQ,
-      target.scale
-    );
-    snappedXFormWorld.multiplyMatrices(target.parent.matrixWorld, snappedXForm);
-    //snappedXForm.copy(target.matrixWorld);
-    //snappedXForm.makeRotationFromEuler(snappedRot);
-
-    this.targetPos.copy(this.offset);
-    this.targetPos.applyMatrix4(snappedXFormWorld);
-    //target.localToWorld(this.targetPos);
-
-    if (obj.parent) {
-      obj.parent.worldToLocal(this.targetPos);
-    }
-
-    //this.targetPos.y = this.data.worldYOffset;
-    /*this.targetPos.y =
-      Math.floor((this.targetPos.y - this.data.ySnapInterval / 2) / this.data.ySnapInterval) * this.data.ySnapInterval +
-      this.data.ySnapInterval / 2;*/
-
-    if (!this.started) {
-      obj.position.copy(this.targetPos);
-      this.started = true;
-    } else {
-      obj.position.set(
-        obj.position.x + (this.targetPos.x - obj.position.x) * this.data.speed * dt,
-        obj.position.y + (this.targetPos.y - obj.position.y) * this.data.speed * dt,
-        obj.position.z + (this.targetPos.z - obj.position.z) * this.data.speed * dt
-      );
-    }
-
-    target.getWorldQuaternion(obj.quaternion);
-  }
-});

src/hub.js

@@ -68,7 +68,7 @@ import "./components/emit-state-change";
 import "./components/action-to-event";
 import "./components/stop-event-propagation";
 import "./components/animation";
-import "./components/follow-entity";
+import "./components/follow-in-lower-fov";
 
 import ReactDOM from "react-dom";
 import React from "react";

src/react-components/chat-message.js

@@ -133,7 +133,7 @@ export async function createInWorldChatMessage(body, lowResolution) {
   document.querySelector("a-scene").appendChild(entity);
 
   entity.appendChild(meshEntity);
-  entity.setAttribute("follow-entity", {
+  entity.setAttribute("follow-in-lower-fov", {
     target: "#player-camera",
     offset: { x: 0, y: 0.0, z: -0.8 }
   });