Spline x Framer: 3D Websites with real objects using Gaussian Splatting | No-code Tutorial

Framer: https://www.framer.com/?via=tonjrv
Spline: https://spline.design/
Luma AI: https://lumalabs.ai/

In this video, we'll guide you through the process of how to scan items with Gaussian Splatting and how to turn gaussian splats into 3D model that you can use in a real website. Create 3D scan with Luma AI, modify 3D element with Spline, and import it to website with Framer.

Chapters:
00:00 Preview
00:31 Luma AI - 3D Scan Your Item
01:43 Luma AI - Download the 3D File
02:13 Spline - Setting Up the Scene
03:13 Spline - Improving the Performance with Crop Areas
06:50 Spline - Setting Up the Camera
07:22 Spline - Make 3D Item to Follow Cursor
09:03 Spline - Export 3D Item to Framer
09:34 Framer - Import 3D Item to Framer
10:15 Framer - Adjust Element Sizing and Layout
10:55 Framer - Adding Appear Transition
12:46 Spline - Animating in Spline With New State and Transition
14:07 Framer - Making It Responsive With Phone and Tablet Breakpoints
15:15 Final

Don't forget to like the video if you find it helpful and subscribe to our channel for more tutorials and design inspiration.
_________________________________________________________

Find me on other channels:

Twitter/X:   / tonjrv  
Instagram:   / tonjrv  
Threads: https://www.threads.net/@tonjrv
________________________________________________________


If you have any questions or suggestions, please leave them in the comments section below.