I have incorporated AFRAME into my metaverse application and am attempting to achieve a Third Person Perspective (TPP) for my avatars. I have implemented a rotate-with-camera component on my model so that the avatar rotates when the camera is rotated. Additionally, I have positioned the camera slightly behind the avatar to create a TPP effect, and I have provided wasd controls for both the camera and avatar.
While I have successfully synchronized the movement, the issue arises with the rotation of the camera. The camera seems to be rotating around the origin (position="0 0 0") instead of using the avatar's position as its center.
Below is the register component code that I am utilizing:
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 necessary for wasd-controls
this.el.setAttribute("rotation", {
x: 0,
y: (tmpe.y * 180) / Math.PI,
z: 0,
});
};
})(),
});
The following is the camera and avatar setup in my 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 am looking to have my camera rotate based on the avatar's position. How can I achieve this?