Question

我有以下带有A-Frame的html结构。基本上，我正在使用以下基本html构建原子的3D表示：\

  <a-scene>
    <a-entity id=#AtomComponent> 

      <a-sphere id=#nucleus></a-sphere> 

      <a-entity id=#electronShell>
        <a-sphere id=#electron></a-sphere>
      </a-entity>
    </a-entity>
  </a-scene>

要动态创建此项，我使用以下javascript：

let sceneEl = document.querySelector('a-scene'); #grab the main html component

# Create the individual components
let atomComponent = document.createElement('a-entity');

let nucleus = document.createElement('a-sphere');

let electronShell = document.createElement('a-entity');

let electron = document.createElement('a-sphere');

#Append them

sceneEl.appendChild(atomComponent);

atomComponent.appendChild(nucleus);

electronShell.appendChild(atomComponent);

electron.appendChild(electronShell);

也许我累了，但我相信我正在以正确的顺序创建html元素。但是，当我尝试执行此代码时，我收到以下两个错误：

material.js:170 Uncaught TypeError: Cannot read property 'dispose' of undefined

`Uncaught (in promise) TypeError: Cannot read property 'isPlaying' of null`

有人可以仔细检查我的HTML看起来合法吗？ AtomComponent应该有两个孩子（nucleus和electronShell），electronShell只有一个孩子。由于我是A-Frame的新手并且在javascript上生锈，我无法确定这是否是AFrame级别错误或JS选择器错误。帮助将不胜感激。

Answer 1

使用atomComponent.appendChild附加nucleus和electronShell以包含多个孩子

let sceneEl = document.querySelector('a-scene'); 

let atomComponent = document.createElement('a-entity');

let nucleus = document.createElement('a-sphere');

let electronShell = document.createElement('a-entity');

let electron = document.createElement('a-sphere');

sceneEl.appendChild(atomComponent);

atomComponent.appendChild(nucleus);

atomComponent.appendChild(electronShell);

electronShell.appendChild(electron);
console.log(document.querySelector('a-scene').outerHTML);

<a-scene>
</a-scene>

为什么我不能创建具有多个子节点的ParentNode？

1 个答案: