如何使用 js 脚本更改图像的属性 "visible"？

Question

当我的 var n 等于 1 时，我正在尝试更改属性 "visible"。我的代码有些问题，但是我不知道我做错了什么

<a-assets>
        <img id="txt-image" src="/img/txt.png">
        <img id="btn-image" src="/img/btn.png">
</a-assets>

<a-image src="#btn-image" position="0.35666 1.90018 -1.26009" geometry="" scale="0.361 0.09143 0.14667" rotation="10.87 0 0" class="clickable" cursor-listener></a-image>

<a-image src="#txt-image" position="0.1901 1.80662 -1.24519" geometry="" scale="0.85378 0.04647 0.34688" rotation="10.87 0 0" material="" visible="false" cursor-listener></a-image>

var n = 0;

AFRAME.registerComponent('cursor-listener', {
init: function () {
  let text = document.querySelector("#txt-image");
  this.el.addEventListener('click', function (evt) {
    n += 1;
    console.log(n);

    if(n == 1){ 
        text.setAttribute("visible", true);
    }
    if(n == 2){
        window.open('portfolio.html', '_blank');
    }

  });
}
});

直到现在我都没有控制台错误，所以我真的不知道发生了什么？

Answer 1

您正在尝试更改资产项目的可见性，而不是 <a-image>。

您可以为 <a-image> 实体创建一个 id 独占，并将其提供给 querySelector。

要回答主题 - 您可以使用 setAttribute:

切换可见性

var isVisible = true // or false
element.setAttribute("visible", isVisible);

fiddle here.

如何使用 js 脚本更改图像的属性 "visible"？

How can i change the property "visible" of a a-image with a js script?

javascript

three.js

aframe

如何使用 js 脚本更改图像的 属性 "visible"？

How can i change the property "visible" of a a-image with a js script?

javascript

three.js

aframe

如何使用 js 脚本更改图像的属性 "visible"？