X3D：如何为 IndexedFaceSet 动态添加坐标到 DOM 中？

如何解决X3D：如何为 IndexedFaceSet 动态添加坐标到 DOM 中？

这是我的 x3d dom 上下文：

<x3d>
  <Scene>
      <Shape>
        <Appearance>
          <Material diffuseColor="0 0 1" emissiveColor="0 0.5 0" shininess="0.8" specularColor="0.5 0.5 0.5"/>
        </Appearance>
        <IndexedFaceSet id="idxFS">
          <!--Coordinate point with values dynamically when function addFaces() is called-->
        </IndexedFaceSet>
      </Shape>
   </Scene>
</x3d>

这是我的 function addFaces()，当按下按钮时调用

function addFaces()
{
  let faces = document.getElementById('idxFS');
  faces.setAttribute('coordindex','0 1 2 3 -1 7 6 5 4 -1 0 4 5 1 -1 1 5 6 2 -1 2 6 7 3 -1 3 7 4 0');

  let coords = document.createElement('Coordinate');
  coords.setAttribute('point','-2.0 2.0 2.0 2.0 2.0 2.0 2.0 2.0 -2.0 -2.0 2.0 -2.0 -2.0 -2.0 2.0 2.0 -2.0 2.0 2.0 -2.0 -2.0 -2.0 -2.0 -2.0');

  faces.appendChild(coords);
}

但是带有坐标的部分不起作用。如果我将坐标静态放入 DOM 中，它就可以工作。就像它可以在这里看到https://www.web3d.org/x3d/content/examples/ConformanceNist/Geometry/IndexedFaceSet/default_facesetIndex.html

但我的动态版本不起作用。帮助将不胜感激！我已经尝试了几个小时，但我无法让它工作。