'Inclination issue in text while facing camera

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 example.

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);
  },
});
three.jsaframe


Solution 1:[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)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ajai.s

Related Questions