Aframe angular 7无法加载gltf模型

Question

我正在尝试使用Angular 7在Aframe中显示gltf模型。

 `<a-scene embedded="" cursor="rayOrigin: mouse">
  <a-assets>
    <a-asset-item id="bedroom" src="../../assets/models/homedesign/scene.gltf"></a-asset-item>
  </a-assets>

   <a-entity id="camera" camera="" position="0 0 0" look-controls wasd-controls>
   </a-entity>        

  <a-entity id="room" gltf-model="#bedroom" position="-14 -30 -125" rotation= "0 160 0" material-map="map: map">
  </a-entity> 

</a-scene>
`

但是未显示该模型，并且我在控制台日志中看到以下消息-

  

core：propertyTypes：警告“ #bedroom”资产未找到。

提到的路径是正确的，因为我能够在代码编辑器中从html打开gltf文件。

还显示了所有其他原语，例如“ a-box”等。

这是我的应用程序文件夹结构的屏幕截图-

html位于homedecor.component.html中，而gltf文件位于homedesign文件夹中。我使用ng serve启动服务器

有人可以看看和帮助吗？

谢谢

Answer 1

可能是Angular搞砸了，您需要延迟添加卧房实体，以便资产可以首先连接。我不建议使用Angular / Typescript堆栈，因为它会引入很多我们无法真正解决的复杂问题。

Answer 2

如果您想真正解决问题：

在component.ts上：

isLoaded = false;

loaded($event){
    this.isLoaded = true;
}

在component.html上：

<a-scene embedded>
  <a-assets (loaded)="loaded($event)">
    <a-asset-item  id="model" [attr.src]="fileSrc.gltf"></a-asset-item>
  </a-assets>
  <a-entity *ngIf="isLoaded" gltf-model="#model"></a-entity>
</a-scene>