问题
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