如何通過javascript獲取A-Frame元素？

Question

我是剛接觸A型鏡架並嘗試弄清楚東西的人。 現在，我正在深入探討交互作用。 我發現的以下JavaScript來自我找到的網站（現在找不到鏈接），該網站更改了“點擊”框的顏色。 該框以標記（AR）樣式顯示。

// Component to change to a sequential color on click.
AFRAME.registerComponent('cursor-listener', {
    init: function() {
        var lastIndex = -1;
        var COLORS = ['red', 'green', 'blue'];
        this.el.addEventListener('click', function(evt) {
            lastIndex = (lastIndex + 1) % COLORS.length;
            this.setAttribute('material', 'color', COLORS[lastIndex]);
        });
    }
});

HTML：

<a-scene oriscene cursor="rayOrigin: mouse">
    <a-marker preset='custom' type='pattern' url='tiger.patt'>
        <a-box cursor-listener position="0 0 0" color="skyblue"></a-box>
        <a-text id="text-box" value="Clicked!"></a-text>
    </a-marker>
    <!-- add a basic camera  -->
    <!-- So object will land on marker -->
    <a-entity camera></a-entity>
</a-scene>

所以我試圖弄清楚如何在腳本中使用元素並設置其屬性。 在我的html中有一個<a-text> ，我想默認將其隱藏，然后在單擊該框時出現，因為我已經具有單擊代碼。 但是我很難隱藏它。 我試過了 ：

var text = document.querySelector('#text-box');
text.setAttribute('visible', false);

但是當我在localhost上運行它時仍然可見。 我做了一個console.log(text)並且控制台返回了一個null。 因此，未選擇a-text ？

我想到了將元素默認設置為visible="false"然后在click函數中將其更改為true，但是我還在考慮如何首先獲取該元素？

編輯：按要求

嘗試一下我在說什么 。 我將其設置為使用hiro標記。

抱歉，很長的帖子。 提前致謝！

編輯2：找到解決方案

我必須將原始屬性添加到<a-text> 。 喜歡 ：

<a-text id="text-box" value="Clicked!" geometry='primitive: plane'></a-text> <a-text id="text-box" value="Clicked!" geometry='primitive: plane'></a-text> ，然后當然可以使用.querySelector獲取它

Answer 1

<a-text id="text-box" value="Clicked!" visible="false"></a-text>

然后顯示document.getElementById('text-box').object3D.visible = true 。

在組件而不是腳本標記中運行代碼。 您可能遇到時間問題。

https://aframe.io/docs/0.8.0/introduction/writing-a-component.html