我刚开始使用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
获取它
发布于 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
https://stackoverflow.com/questions/52403904
复制相似问题