Inclination issue in text while facing camera

Question

I recently got this problem. In this, I have to make text facing camera always and I figured out one solution which is working for me. The only issue is that text is a little bit inclined downward. So, please help me with this.

This is the issue I'm facing. Text is inclined.

AFRAME.registerComponent("nametag-rotation", {
  schema: {
    target: { type: "selector", default: "[camera]" },
  },
  init: function () {
    this.rotationComponent = new THREE.Euler();
    this.Quaternion = new THREE.Quaternion();
    this.nametag = document.querySelector("#player-name");
 
  },

  tick: function () {
    
    this.nametag.object3D.lookAt(this.data.target.object3D.position);
    this.nametag.object3D.rotation.y = Math.atan2(0, 0);
    console.log(this.nametag.object3D.rotation);
  },
});

Answer 1

AFRAME.registerComponent("nametag-rotation", {

  schema: {

    target: { type: "selector", default: "[camera]" },

  },

  init: function () {

    this.worldPosition = new THREE.Vector3();

    this.ourWorlPosition = new THREE.Vector3();

  },



  tick: function () {

    if (!this.data.target) return;

    this.data.target.object3D.getWorldPosition(this.worldPosition);

    this.el.object3D.getWorldPosition(this.ourWorlPosition);

    this.worldPosition.y = this.ourWorlPosition.y;

    this.el.object3D.lookAt(this.worldPosition);

  },

});

Place this component inside your name tag entity of html (not inside the reference id)