Aframe A帧文本更改旋转

我正在使用一个框架进行虚拟漫游，其中一个用于360°图像，一些用于热点，下面的圆圈用于指示

我的目标是使文本始终与屏幕平行。我已经试过在相机上使用aframe-look-at组件，但这不是我想要的，因为它们面对的是一个点，而不是屏幕

所以我的下一个想法是创建一个看不见的光标，并将他的旋转复制到文本中，但我不确定这一点，因为我不知道光标是否更新了他的旋转，或者它是否仅基于凸轮旋转。 不管怎么说，这个问题的主要根源是我不知道如何在创建文本后更改文本的旋转，我尝试了mytext.object3D.rotation、mytext.setAttribute'rotation、newRotation以及object3D.lookAt，但要么没关系，要么不是我想要的

实现这一目标的最佳方式是什么

这里是我的热点组件，它基于一些道具创建文本：

AFRAME.registerPrimitive('a-hotspot', {
    defaultComponents: {
        hotspot: {}
    },
    mappings: {
        for: 'hotspot.for',
        to: 'hotspot.to',
        legend: 'hotspot.legend',
        'legend-pos': 'hotspot.legend-pos',
        'legend-rot': 'hotspot.legend-rot'
    }
});

AFRAME.registerComponent('hotspot', {
    schema: {
        for: { type: 'string' },
        to: { type: 'string' },
        legend: { type: 'string' },
        'legend-pos': { type: 'vec3', default: {x: 0, y: -0.5, z:0}},
        'legend-rot': { type: 'number', default: 0 },
        positioning: { type: 'boolean', default: false }
    },

    init: function () {

        this.shiftIsPress = false

        window.addEventListener('keydown', this.handleShiftDown.bind(this))
        window.addEventListener('keyup', this.handleShiftUp.bind(this))


        this.tour = document.querySelector('a-tour');
        if (this.data.legend)
            this.addText();
        this.el.addEventListener('click', this.handleClick.bind(this));
    },

    // Creating the text, based on hotspots props
    addText: function () {
        var hotspot = this.el,
            position = new THREE.Vector3(hotspot.object3D.position.x, hotspot.object3D.position.y, hotspot.object3D.position.z),
            text = document.createElement('a-text'),
            loadedScene = document.querySelector('a-tour').getAttribute('loadedScene')

        position.x += this.data['legend-pos'].x
        position.y += this.data['legend-pos'].y
        position.z += this.data['legend-pos'].z

        console.log(this.data['legend-rot'])

        // Set text attributes
        text.id = `text_${this.data.for}_to_${this.data.to}`
        text.setAttribute('position', position)
        text.setAttribute('color', '#BE0F34')
        text.setAttribute('align', 'center')
        text.setAttribute('value', this.data.legend)
        text.setAttribute('for', this.data.for)
        if (loadedScene && loadedScene !== this.data.for) text.setAttribute('visible', false)

        // Insert text after hotspot
        hotspot.parentNode.insertBefore(text, hotspot.nextSibling)
    },

    // This part is supposed to edit the rotation
    // to always fit to my idea
    tick: function () {
        if (this.el.getAttribute('visible')) {
            var cursorRotation = document.querySelector('a-cursor').object3D.getWorldRotation()

            //document.querySelector(`#text_${this.data.for}_to_${this.data.to}`).object3D.lookAt(cursorRotation)
            this.updateRotation(`#text_${this.data.for}_to_${this.data.to}`)
        }
    },

    // This parts manage the click event.
    // When shift is pressed while clicking on hotspot, it enable another component
    // to stick a hotspot to the camera for help me to place it on the scene
    // otherwise, it change the 360° image and enbable/disable hotspots.
    handleShiftDown: function (e) {
        if (e.keyCode === 16) this.shiftIsPress = true
    },

    handleShiftUp: function (e) {
        if (e.keyCode === 16) this.shiftIsPress = false
    },

    handleClick: function (e) {
        var target = 'target: #' + this.el.id
        var tour = this.tour.components['tour']

        if (this.shiftIsPress)
            tour.el.setAttribute('hotspot-helper', target)
        else
            tour.loadSceneId(this.data.to, true);
    }
});

我真的不知道该怎么办

编辑：我找到了零件解决方案： 如果我用alphaTest:1为文本和材料添加了几何体来隐藏它，那么setAttribute'rotation'将起作用，我将它建立在相机旋转的基础上。问题是，在那之后，摄像机被锁定了，我不明白为什么^^

var cursorRotation = document.querySelector('a-camera').object3D.rotation

            document.querySelector(`#text_${this.data.for}_to_${this.data.to}`).setAttribute('rotation', cursorRotation)

谢谢，

---

Navalex

我终于找到了解决方案

---

我没有使用document.querySelector'a-camera'.object3D.rotation，而是使用document.querySelector'a-camera'.getAttribute'rotation'，效果很好

我终于找到了解决办法

---

我没有使用document.querySelector'a-camera'.object3D.rotation，而是使用document.querySelector'a-camera'.getAttribute'rotation'，效果很好

请务必查看以下示例：

---

用户始终可以看到“方框”标志

请务必查看以下示例：

---

用户始终可以看到“框”符号

object3D。旋转以弧度为单位，getAttributerotation返回度。是的，这根本没有帮助^object3D。旋转以弧度为单位，getAttributerotation返回度。是的，这根本没有帮助^^