Body
I am developing a web-based kit builder (sportswear customization like cricket kits), where users should be able to interact with a 3D model ( trouser) and customize it in real time.
Requirements
I want to achieve the following functionality:
Display a 3D model in the browser
Allow users to:
Rotate the model using mouse/touch
Zoom in/out
Change colors of specific parts (e.g., base, stripes, waistband)
Apply different textures/designs (logos, patterns)
All changes should update instantly (real-time rendering)
What I have tried
Looked for free 3D models on platforms like Sketchfab and Clara.io
Explored using Three.js for rendering
Tried understanding Blender for editing models
However, I am still unclear about the proper workflow and implementation.
Questions
Where can I find free 3D models (preferably clothing like sports trousers/shirts) that are suitable for web customization?
Which file format is best for web use? (GLB / GLTF / OBJ?)
How should the model be structured so that different parts can be customized separately?
- For example: different materials for stripes, base, etc.
How can I dynamically change colors and textures in code?
- Any example using Three.js or similar library would be helpful
What is the recommended approach for React integration?
Tech Stack
Frontend: React
Backend: Node.js
Goal: Use free
Requirement: Good performance in browser
Expected Outcome
A solution where users can:
Interact with a 3D clothing model
Customize colors and designs
See real-time updates in the browser
Any guidance, sample code, or tutorials would be greatly appreciated.