Question

我正在测试具有离子和角度的框架。我的框架运行得很好，甚至在我的设备上试过，看起来很棒。

当我尝试从组件的属性在a-sky上加载img时出现问题。

我有这个工作：

<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>