-1

I am trying to display a gltf-model in Aframe using Angular 7.

 `<a-scene embedded="" cursor="rayOrigin: mouse">
  <a-assets>
    <a-asset-item id="bedroom" src="../../assets/models/homedesign/scene.gltf"></a-asset-item>
  </a-assets>

   <a-entity id="camera" camera="" position="0 0 0" look-controls wasd-controls>
   </a-entity>        

  <a-entity id="room" gltf-model="#bedroom" position="-14 -30 -125" rotation= "0 160 0" material-map="map: map">
  </a-entity> 

</a-scene>
`

But the model is not displayed and I see the following message in the console log -

core:propertyTypes:warn "#bedroom" asset not found.

The path mentioned is correct as I am able to open the gltf file from the html in the code editor.

Also, all other primitives such as "a-box" etc.. get displayed.

Here is a screenshot of my app folder structure -

enter image description here

the html is in homedecor.component.html and the gltf file is inside homedesign folder. I start the server using ng serve

Could someone please take a look and help?

Thanks

Niraj
  • 333
  • 1
  • 5
  • 23
  • This is probably related to your build system. Webpack? The code looks fine but it's hard to diagnose a build issue here... – Don McCurdy Mar 09 '19 at 22:06
  • Thanks for taking your time out Don. I am not using webpack. I just do ng build to build the dist folder. I can see the gltf/bin files created in the folder in the asset folders in dist. And then I use ng serve to serve it on the browser. One thing that I noticed is that the folder containing the gltf/bin files does not show up under the "Sources" tab in the developer portal in Chrome. Totally at loss to understand why this is happening – Niraj Mar 10 '19 at 11:17
  • I have figured out that webpack is used internally by ng serve. Also, ng serve does not serve the folders from /dist but rather from memory. At this point, I am unable to figure out whether I need to modify webpack config to be able to serve a gltf file and if yes then what modification is required? I also tried to use angular-http-server to serve my files but still the same problem exists. Could it be due to file type? – Niraj Mar 11 '19 at 10:40

2 Answers2

1

Probably Angular is messing things up and you need to delay adding the bedroom entity so assets can attach first. I don't recommend using Angular / Typescript stack for this reason as it introduces lots of complicated problems that we can't really help with.

ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • Yes, ever since I decided to shift from Angularjs to Angular 2 based framework, I have not been able to spend any time on webvr as angular keeps messing up one thing or the other. Which framework is easy and goes well with Webvr? Or should I just stick to AngularJS as that was easy for me to manage? – Niraj Mar 12 '19 at 01:16
  • And to be able to serve it on a website, an AngularJS (not Angular 2 or 7etc..) would be sufficient, right? I am unnecessarily spending time learning webpack to show my gltf model when I could be learning webVR. That's what I feel – Niraj Mar 12 '19 at 04:26
0

If you want a real solution for your problem :

on component.ts : 

isLoaded = false;

loaded($event){
    this.isLoaded = true;
}

on component.html:

<a-scene embedded>
  <a-assets (loaded)="loaded($event)">
    <a-asset-item  id="model" [attr.src]="fileSrc.gltf"></a-asset-item>
  </a-assets>
  <a-entity *ngIf="isLoaded" gltf-model="#model"></a-entity>
</a-scene>
Arthur SPITZNAGEL
  • 19
  • 5