在 AFrame 中动态添加新实体

Question

我正在尝试构建一个 AFrame 应用程序，用户可以在其中单击某些内容并显示一个新场景。从那里，用户可以点击其他东西，等等。这个场景的数据取自 API，所以很难知道用户可能遇到的所有场景。

考虑到这一点，您将如何在运行时修改 AFrame 场景？显然修改 DOM 不起作用，但如果有办法让 AFrame 在特定时间重新渲染场景，那就太棒了。如果您认为还有另一种方法可以解决这个问题，我很乐意听到。谢谢！

Answer 1

你确实可以在运行时修改DOM，它会影响场景。这是使用 jQuery 添加新对象的示例，取自 this project:

function appendObject(id, file, scale, position, rotation, scale) {
        $('<a-obj-model />', {
          id: id,
          class: 'city object children',
          position: position,  // doesn't seem to do anything, known issue
          scale: scale,
          rotation: rotation,
          file: file,
          src: '#' + file + '-obj',
          mtl: '#' + file + '-mtl',
          appendTo : $('#city')
        });
       document.getElementById(id).setAttribute("position", position); // this does set position as a workaround
      }

下面是删除对象的示例：

 onMenuDown: function () {
        previousObject = document.querySelector("#object" + (objectCount - 1));
        previousObject.parentNode.removeChild(previousObject);
        objectCount -= 1;
        if(objectCount == -1) {objectCount = 0};
  },

Answer 2

仅供将来参考，因为您已经解决了问题，您可以使用普通的 JS DOM API:

var el = document.createElement('a-entity');
document.querySelector('a-scene').appendChild(el);

在 AFrame 中动态添加新实体

Adding new entities on the fly in AFrame

dom

webvr

aframe