面对相机时文字倾斜问题

Question

我最近遇到了这个问题。在这方面，我必须始终让文字面向相机，我想出了一个适合我的解决方案。唯一的问题是文字有点向下倾斜。所以，请帮我解决这个问题。

这就是我面临的问题。文字倾斜。

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);

  },

});

将此组件放在 html 的名称标签实体中（而不是在引用 ID 中）

面对相机时文字倾斜问题

Inclination issue in text while facing camera

three.js

aframe