Aframe angular 7 unable to load gltf model

白昼怎懂夜的黑 提交于 2019-12-16 18:06:10

问题


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 -

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


回答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.




回答2:


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>


来源:https://stackoverflow.com/questions/55077356/aframe-angular-7-unable-to-load-gltf-model

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!