A-Frame not loading assets from Angular

Question

im testing a-frame with ionic and angular. I get a-frame runs great with them, even tried on my device and looks awesome.

The problem comes when i try to load an img on the a-sky from a property of the component.

I got this working:

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

But if i try this:

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

Don't work and get this log message:

THREE.webglrenderer 83

Seems that a-frame cant load the image coming this way but dont know why.

Thanks in advance.

Answer 1

You've got cross-reference src="#sky" so when myImgPath is finally available and change detection is triggered, a-sky component still doesn't know about this, and it already had run loadAsset internal hook. Shortly speaking asset management system doesn't work well in Angular, but there is the other way which is not officially recommended:

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

See: https://aframe.io/docs/0.9.0/primitives/a-gltf-model.html

Answer 2

What version of A-Frame are you using? Are you sure myImgPath points to the right resourcelocation or the attribute in your component is typed correctly?

I've put together a plunkr example, it correctly displays the image source on an a-sky in conjunction with Angular and A-Frame 0.5.0.

What might help is to use [attr.*] instead.

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

I am not formiliar with the ionic framework, but I would assume it should work just fine with ng-template.