there are plenty of sites out there, we can find our 3d model, for this i ve grabbed the model from the sketchfab site, and we can search and select the model that we want and download that as in GLB format.

Once we download our model we can go to the "webGi SDK- A 3d model viewer framework focussed on the photo-realistic rendering and developing ease.

we can simply import our 3d model in that viewer .

this could be useful for bunch of things for ex we can remove the shadow or the ground reflection of our obj.

and we can define the initial position of our obj(in camera view)

once we done with the changes again export that as in glb format

in the webgi starter code template, grab the file and lets make some change.

The Try me btn is the preview of our model where the users will ve controls over the obj

to impl this we need to ve a event listener, once we click it will fire up the parent comp(app.js), which will then fire up another fn ie webgi viewer comp.

note: as we know in order to reference a fn from the another comp we ve to use forwardRef()

In the preview mode we can be able to rotate the model, we ve to set the controls to true.

once we done with the preview we can be able to exit(btn) from the preview.

finally lets make this site as break pt to the mobile dev.

• currently the site is heavy, ie the performance is a concern with the heavy animations
• so we wana give some time to the website to load itself(assets), and displays some nice aniamation for the users.
• so that they don't ve to wait and look for the loadings,
• for that we can create a "loader component"