Aframe-选择随机实体（从3个选项中）并设置属性

Question

编辑：好的，感谢Piotr的帮助， 这是一个有效的示例。 它从JSON数组中获取两个随机标题，并且一次（通过随机选择过程）一次仅显示一个。 然后，如果用户在框上单击属于正确图像的标题，则字体变为绿色，否则，如果用户单击与图像不匹配的游戏的标题，则文本变为红色。 很棒的东西。 这是一些代码。

  AFRAME.registerComponent('json-text-loader', {
  schema: {},
  init: function () {
    var url = 'json/text.json';
    var parentEL = this.el;

    var request = new XMLHttpRequest();
    request.open( 'GET', url, true );
    request.addEventListener( 'load', function ( event ) {

      var game = JSON.parse( event.target.response )
      var keys = Object.keys(game);
      var random = game[keys.length * Math.random() << 0];
      var trivia = random.Title
      var game2 = JSON.parse( event.target.response )
      var keys2 = Object.keys(game);
      var random2 = game[keys.length * Math.random() << 0];
      var trivia2 = random2.Title
      var textEntity = document.querySelector('#text');
      var gurl = random.Imageurl
      var sceneEl = document.querySelector('a-scene');
      sceneEl.querySelector('a-box').setAttribute('material', {src:gurl}); 
      textEntity.setAttribute("visible", "false")       

    let visibleRandom = Math.floor(Math.random() * 3); // THIS ELEMENT WILL BE VISIBLE
    let anwserRandom = Math.floor(Math.random() * 3); // THIS IS THE ELEMENT WITH THE CORRECT OPTION

  let children = Array.from(parentEL.children); 
  children.forEach((el, index) => {

if (index == visibleRandom) {
  el.setAttribute("visible", "true")
  el.setAttribute("value", trivia2)

} else {
  el.setAttribute("visible", "false")
}
if (index == anwserRandom) {
  el.setAttribute("value", trivia)
} 
 el.addEventListener("click", (e) => {
  if(el.getAttribute("value") == trivia) {
    el.setAttribute("color", "green")
  } else {
    el.setAttribute("color", "red")
  }
});
});
});
    request.send( null );
  }
});

原文：希望有人可以提供帮助（如果可能的话）。 我需要一些代码来随机选择三个var textEntity = document.querySelector('#text'); 实体，使其在我的场景中可见，如果该随机选择的元素恰好是第一个（textEntity1）并被用户单击，则字体颜色将变为绿色。 textEntity1的值将始终是相同的，所以我不知道这是否使引用更容易？

textEntity1.setAttribute("value", option1)

“其他”部分（如果需要使用“ if语句”）则用于使可见的实体为textEntity2 / 3并被单击，在这种情况下，字体颜色应更改为红色。

当前（受限）代码：

     // select random entity from below and set its attribute as visible                                                   
      var textEntity1 = document.querySelector('#text');
      var textEntity2 = document.querySelector('#text2');
      var textEntity3 = document.querySelector('#text3');

     // trigger event (e.g color change) if visible entity is 'textEntity1' and gets clicked.          
      sceneEl.querySelector('#text').addEventListener('click', function () {
      el.setAttribute('color', '#ffff00');
      });
      } );                                                  

期待看看是否有解决方案。 到目前为止，我已经学习了如何执行随机代码来设置对象的位置，但这似乎比这复杂得多。

Answer 1

这里有一些机制。 让我解释一下如何做“测验”部分，我想它也会解释可见性。

它可能不是最好的解决方案，但它接缝整齐。 让我们在一个空实体中拥有三个选项。 父母将处理逻辑。

<a-entity logic>
  <a-box position="0 0 1></a-box>
  <a-box position="0 0 0></a-box>
  <a-box position="0 0 -1></a-box>
</a-entity>

凉。 现在，让我们看一下logic组件内部。 我需要一个介于0-2之间的随机整数， Math.random()返回0-1（不包括1），所以我需要制作Math.floor(Math.random()*3)) 。 我还需要获取参考。 因为他们是children的实体，我不需要document.querySelector() 我将抓住实体的所有子代并将其转换为数组：

AFRAME.registerComponent("logic", {
  init: function() {
     let anwser = Math.floor(Math.random() * 3);
     let children = Array.from(this.el.children);
  }
});

现在，让我们为他们提供事件侦听器，在其中检查单击哪个框：

children.forEach((el, index) => {
    el.addEventListener("click", (e) => {
      if (index == anwser) {
        el.setAttribute("color", "green")
      } else {
        el.setAttribute("color", "red")
      }
});

因此，我有一个框，我有一个随机的anwser，如果单击该anwser，该框将变为绿色。

此外，如果将el.setAttribute('visibility', 'false')放在其中，则可以使另一个随机anwser不el.setAttribute('visibility', 'false')

---

在我的小提琴中检查一下。 答案打印在控制台中。

UPDATE

如果您已经有一个来自JSON.parse的anwser，则只需检查它是否适合可见实体：

 children.forEach((el, index) => { if (index == anwser) { el.setAttribute("visible", "true") } else { el.setAttribute("visible", "false") } el.addEventListener("click", (e) => { if(el.getAttribute("value") == option1) { el.setAttribute("color", "green") } else { el.setAttribute("color", "red") } }); } 

查看更新的小提琴 。