如何通过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