Title: How can I fetch and load 3D models for user interaction on my website?

Explanation:
I’m working on a website where I want to incorporate interactive 3D models for users to view and interact with. I’ve explored various options but I’m struggling with fetching and loading the 3D models into the website. I’m specifically interested in using React and the react-three-fiber library to achieve this. Can someone provide guidance on how to effectively fetch and load 3D models, particularly in formats like .obj and .gltf, using React and react-three-fiber? Additionally, I’m looking for suggestions on how to handle user interaction with these models, such as rotation, zooming, and clicking on specific parts.
I’ve researched the basics of integrating 3D models into web applications and found that react-three-fiber is a popular library for creating 3D scenes in React. I’ve also looked into formats like .obj and .gltf for representing 3D models. However, I’m having difficulty understanding how to effectively fetch these models from a server and render them in a React application using react-three-fiber. Additionally, I’m not sure how to implement user interaction features like rotation and zooming once the models are loaded.

Overall, I’m seeking comprehensive guidance on how to overcome these challenges and successfully integrate interactive 3D models into my website using React and react-three-fiber. Any insights, code examples, or recommended resources would be greatly appreciated

used the fetch () and loader to try to display the image , i also used canvas to set up scene for rendering the 3d model fetched