gltf viewer for a-frame

Question

I am trying to build a gltf viewer using a-frame. The idea is to let the user upload a gltf model and display the model. Quite similar to gltf viewer using ThreeJs by Don Mccurdy but using a-frame.

I will let the user upload the file on the server using input tag

<input id="file-upload" multiple type="file">

and then fetch the same file to display using the code below

<a-scene embedded="" renderer="gammaOutput: true">
     <a-assets>
         <a-asset-item id="model" src="/models/filname.glb"></a-asset-item>
     </a-assets>

     <a-entity camera="" position="0 1.6 0" look-controls></a-entity>
     <a-entity gltf-model="#model" position="4 0 -6.5"></a-entity>
</a-scene>

The one thing I am not able to figure out is how do I dynamically populate the src for a-asset-item tag with the path of the uploaded models? I want to create a new embedded div for each uploaded model and persist the views. Could you please help with any pointers?

Niraj Niraj · Accepted Answer · 2019-07-11T15:38:43

found the logic to save the model in local storage upon upload and then update he source from the local storage URL.

gltf viewer for a-frame

1 Answers