Aframe angular 7无法加载gltf模型答案

【问题标题】：Aframe angular 7 unable to load gltf modelAframe angular 7无法加载gltf模型
【发布时间】：2019-07-31 07:42:03
【问题描述】：

我正在尝试使用 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:warn "#bedroom" 资产未找到。

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

此外，“a-box”等所有其他原语都会显示出来。

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

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

有人可以帮忙看看吗？

谢谢

【问题讨论】：

这可能与您的构建系统有关。网页包？代码看起来不错，但在这里很难诊断出构建问题...
感谢您抽空唐。我没有使用 webpack。我只是做 ng build 来构建 dist 文件夹。我可以看到在 dist 的资产文件夹中的文件夹中创建的 gltf/bin 文件。然后我使用 ng serve 在浏览器上提供它。我注意到的一件事是包含 gltf/bin 文件的文件夹没有显示在 Chrome 开发人员门户的“源”选项卡下。完全不知道为什么会这样
我发现 ng serve 内部使用了 webpack。此外， ng serve 不会从 /dist 而是从内存中提供文件夹。此时，我无法弄清楚是否需要修改 webpack 配置才能提供 gltf 文件，如果是，那么需要进行哪些修改？我也尝试使用 angular-http-server 来提供我的文件，但仍然存在同样的问题。会不会是文件类型的原因？

标签： angular angular7 aframe gltf

【解决方案1】：

可能是 Angular 搞砸了，您需要延迟添加卧室实体，以便首先附加资产。出于这个原因，我不建议使用 Angular / Typescript 堆栈，因为它会引入许多我们无法真正帮助解决的复杂问题。

【讨论】：

是的，自从我决定从 Angularjs 转移到基于 Angular 2 的框架以来，我一直无法在 webvr 上花费任何时间，因为 Angular 总是搞砸一件事或另一件事。哪个框架简单且与 Webvr 配合得很好？还是我应该坚持使用 AngularJS，因为这对我来说很容易管理？
为了能够在网站上提供它，AngularJS（不是 Angular 2 或 7 等）就足够了，对吧？当我可以学习 webVR 时，我不必要地花时间学习 webpack 来展示我的 gltf 模型。这就是我的感觉

【解决方案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>

【讨论】：