CODEWITHSUNDEEP
angularaframe
Daniel
Daniel

Reputation: 311

How to load a-frame asset from Angular property binding

I'm trying to load an OBJ file from my back end and display it with A-Frame. I can get it to load the model right if I hard code the url in the HTML like so: 

  <a-asset-item id="model-obj" src="http://localhost:8080/dashboard/portal/downloadObj/12b557b5-25d8-459c-b4ea-2bddce34c3af?token=eyJhbGciOiJSUz"></a-asset-item>

but I really need to build it dynamically with some help from Angular with something like this: 

  <a-asset-item id="model-obj" [src]="srcUrl"></a-asset-item>

But every time I do that a-frame won't actually pick up the src attribute properly - probably because it's not getting the src URL at run time. I know I'm getting the right string put in there, and I've already tried this to no avail: A-Frame not loading assets from Angular

Any ideas of how I can do this?

Upvotes: 2

Views: 796

Answers (3)

wickdninja
wickdninja

Reputation: 1039

You could wait to render the item until it has a src using *ngIf

But you’ll need to use a container because *ngFor and *ngIf cannot be used on the same element. 

<a-container
`*ngFor="let item of items; trackBy: trackItem"`>
<a-asset-item
  *ngIf=“item && item.uri”
  id="placeholder"
  src="placeholder.glb"
  [attr.id]="item?.id"
  [attr.src]="item?.uri">
</a-asset-item>
<a-container>

Upvotes: 0

Dan
Dan

Reputation: 2705

Working solution around Angular's data-binding delay:

<a-asset-item
  *ngFor="let item of items; trackBy: trackItem"
  id="placeholder"
  src="placeholder.glb"
  [attr.id]="item?.id"
  [attr.src]="item?.uri">
</a-asset-item>

Issue is that data-binding doesn't happen immediately, and so A-Frame will error out because no src is provided at that moment in time.

Upvotes: 2

mordka
mordka

Reputation: 420

Asset management system doesn't work well in Angular, but there is the other way which is not officially recommended. Load your asset outside of aframe asset management system. Docs: https://aframe.io/docs/0.9.0/primitives/a-gltf-model.html

See this answer in related thread: https://stackoverflow.com/a/55477602/1345116

Upvotes: 0

Related Questions