angular - 在 Angular 项目中使用 AFRAME.registerComponent

Question

我正在尝试创建一个使用 A-Frame 显示一些 3D 模型的 Angular 应用程序。我使用 npm 安装了 A-Frame 并将其导入到 polyfills.ts 文件中。我还可以渲染一个 3D 模型，创建一个场景并将其注入到模板中。

我创建了一个组件，该组件根据其侧面设置模型位置。我尝试将 registerComponent 放在场景定义之前，但似乎不起作用。这是代码

renderModel(model: Model) {
  let renderingArea = document.getElementById('rendering-area');
  renderingArea.innerHTML = `
    <script>
      AFRAME.registerComponent('position-setter', {
        init: function () {
          this.el.addEventListener('model-loaded', () => {
            // compute the box that contains the model
            const box = new THREE.Box3().setFromObject(document.getElementById("model").object3D);
            const boxSizes = box.getSize(new THREE.Vector3());

            // compute the max size of the box (x, y, z)
            // it will be used to set model position
            const maxBoxSize = Math.max(boxSizes.x, boxSizes.y, boxSizes.z);

            let model = document.getElementById("model");
            model.setAttribute("position", "0 0 -" + 1.2 * maxBoxSize);
          })
        }
      })  
    </script>

    <a-scene embedded id="scene" cursor="rayOrigin: mouse" raycaster="objects: .clickable">
      <!-- Assets definition -->
      <a-assets>
        <a-asset-item id="object-ref" src="assets/models/Windmill/windmill.obj"></a-asset-item>
        <a-asset-item id="material-ref" src="assets/models/Windmill/windmill-fixed.mtl"></a-asset-item>
      </a-assets>

      <!-- Using the asset management system. -->
      <a-obj-model id="model" class="clickable" src="#object-ref" mtl="#material-ref" rotation="0 0 0" position-setter>
      </a-obj-model>

      <!-- Camera -->
      <a-camera wasd-controls="fly:true" position="0 0 0 ">
      </a-camera>

      <!-- Environment elements-->
      <a-sky id="sky" color="#000000"></a-sky>
    </a-scene>
  `;
}

其中renderModel是 Typescript 类的方法。这段代码渲染了场景，但似乎组件没有注册。

我想达到这样的结果

可见风车模型

现在这就是我得到的

实际情况

在第二张图像中，模型和相机的位置相同，所以我有这个“黑屏”。只有当我使用键盘移动相机时，我才能得到第一张图像中描述的情况。

有人可以帮我吗？也许有更好的方法来做我想做的事情。

谢谢大家。

标签： angularaframe