A-Frame 未从 Angular 加载资产

Question

我正在用 ionic 和 angular 测试 a-frame。我的 a-frame 和他们一起运行得很好，甚至在我的设备上试过，看起来很棒。

当我尝试从组件的属性加载天空图像时出现问题。

我成功了：

<ion-content>
    <a-scene>
      <a-sky src="assets/puydesancy.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
</ion-content>

但如果我尝试这样做：

<a-scene>
  <a-assets>
    <img id="sky" [src]="myImgPath">
  </a-assets>
  <a-sky src="#sky"></a-sky>
</a-scene>

不工作并收到此日志消息：

THREE.webglrenderer 83

似乎a-frame无法加载这种方式的图像，但不知道为什么。

提前致谢。

Answer 1

您使用的是什么版本的 A-Frame？您确定 myImgPath 指向正确的资源位置或组件中的属性输入正确吗？

我已经将 a plunkr example 放在一起，它在 a-sky 上正确显示图像源以及 Angular 和 A-Frame 0.5.0。

使用 [attr.*] 可能会有帮助。

<a-assets>
    <img id="sky" [attr.src]="myImgPath">
</a-assets>

我不熟悉离子框架，但我认为它应该可以很好地与 ng-template。

Answer 2

你有交叉引用 src="#sky" 所以当 myImgPath 最终可用并触发更改检测时，a-sky 组件仍然不知道这一点，它已经有运行 loadAsset 内部挂钩。简而言之，资产管理系统在Angular中运行不佳，但还有另一种官方不推荐的方式：

<a-scene>
  <!-- a-assets removed! -->
  <a-sky [attr.src]="myImgPath"></a-sky>
</a-scene>

A-Frame not loading assets from Angular