首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何通过javascript获取A-Frame元素?

如何通过javascript获取A-Frame元素?
EN

Stack Overflow用户
提问于 2018-09-19 18:37:33
回答 1查看 1.4K关注 0票数 0

我刚开始使用A-frame,并试图弄清楚一些事情。现在,我正在深入讨论交互部分。我找到的以下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);

但是当我在本地主机上运行它时,它仍然是可见的。我执行了一个console.log(text),控制台返回一个空。所以a-text没有被选中?

我想过在缺省情况下将元素设置为visible="false",然后在单击函数中将其更改为true,但同时也在考虑如何首先获取元素?

编辑:根据请求的

glitch to try out what im talking about。我已将其设置为使用hiro标记。

很抱歉发了这么长的帖子。提前感谢!

EDIT 2:找到解决方案

我必须将原始属性添加到<a-text>中。像这样:

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-22 03:35:38

<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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52403904

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档