Technologies Used
HTML
CSS
Blender
Spline
Google 3D Viewer
The Process
- I used ChatGPT to create reference images that were used to create AI 3D models using Meshy.AI
- Imported the 3D models into Blender to create a low-poly versions of each model to decrease file size.
- Imported those objects into Spline where I could craft 3D scenes to embed within the site. Using Spline, I was able to add mouse tracking integration and fine tune how the models responded to movement.
- While the Spline integration is very easy to use and reliable, it does come with a monthly cost, so the new goal became how to create this app for free.
- I ended up switching the integration from Spline to Google's 3D Model Viewer, an open source free option that was just as easy to implement. The colors of the models we're also more accurate as to what I made in Blender.
- Instead of having mouse tracking, the user can now click or touch any 3D model and move it freely within it's box.
- As an added bonus, 3D Model Viewer also comes with AR integration with it's default state.