CODEWITHSUNDEEP
angularionic-frameworkionic2aframe
Fernando Del Olmo
Fernando Del Olmo

Reputation: 1450

A-Frame not loading assets from Angular

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.

Upvotes: 2

Views: 888

Answers (2)

mordka
mordka

Reputation: 420

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

Upvotes: 0

Shane
Shane

Reputation: 3199

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.

Upvotes: 3

Related Questions