Required to change the rotation axis of camera in AFRAME

Question

I am using AFRAME for my metaverse application. I am trying to get Third party perspective(TPP) for my avatars in it. I am using rotate-with-camera component to my model so that the avatar rotates when the came is rotated. And I have positioned my camera a little backside of my avatar to give TPP effect. Gave wasd controls for both the camera and avatar.

I am able to get the movement sync perfectly, but the issue is with the camera rotation. The camera is rotating around the origin i.e. taking position="0 0 0" as its center rather than taking the avatar position as center.

This is the register component which I am using.

AFRAME.registerComponent("rotate-with-camera", {
tick: (function () {
// create once
const tmpq = new THREE.Quaternion();
const tmpe = new THREE.Euler();

return function (t, dt) {
  if (!this.el.sceneEl.camera) return; // ignore when there is no camera
  const cam = this.el.sceneEl.camera.el; // get the camera entity
  cam.object3D.getWorldQuaternion(tmpq); // get the world rotation
  tmpe.setFromQuaternion(tmpq, "YXZ");
  // set attribute is necesarry for wasd-controls
  this.el.setAttribute("rotation", {
    x: 0,
    y: (tmpe.y * 180) / Math.PI,
    z: 0,
  });
};
})(),
});

This is the came and avatar which I am using in the code.

<!--Camera -->
  <a-entity look-at=".avatar"  look-controls="pointerLockEnabled: false" wasd-controls="acceleration:12;">
    <a-entity camera="near:0.01;" position="4 1.72 177.5"></a-entity>
  </a-entity>

  <!-- Avatar -->
  <a-entity class="avatar" >
    <a-gltf-model
    id="player"
    src="#boyBlue"
    position="4 0.12 175"
    animation-mixer="clip:Idle"
    wasd-controls="acceleration: 12"
    rotate-with-camera
    >
    </a-gltf-model>
  </a-entity>

I want my camera to rotate by taking my avatar position as its axis. How can I proceed with this?

Answer 1

It is happening because Your camera has an x offset in regard to the parent entity, hence:

---

An easy solution would be to move the offset to the parent entity:

<a-entity look-controls wasd-controls="acceleration:12;" position="4 0 0">
<a-entity camera="near:0.01;" position="0 1.72 177.5"></a-entity>
</a-entity>

glitch here

---

But it would be better to follow the answer where you found the component, and have a javascript controller to move the camera behind the box instead of syncing the positions, both of them having wasd controls.

The controller is simple:

AFRAME.registerComponent("follow-target", {
  schema: {
    target: {type: "selector"}
  },
  tick: (function() {
    // create once
    const tmpv = new THREE.Vector3();

    return function(t, dt) {
      if (!this.data.target) return; // ignore when there is no target
      const target = this.data.target.object3D; // get the mesh
      // track the position
      const position = target.getWorldPosition(tmpv); // get the world position
      this.el.object3D.position.lerp(tmpv, 0.5) // linear interpolation towards the world position
    }
  })()
})

glitch here