How to load a-frame asset from Angular property binding

user_5165372 0
Viewed 589

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?

aframe angular
3 Answers

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.

user_67135960
user_13451160

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