# Bring Your Spline Scenes to Life on the Web 🌐 | Mini Masterclass Source: https://www.youtube.com/watch?v=4iyMkuga-C0 Recap page: https://rapidrecap.app/video/4iyMkuga-C0 Generated: 2025-11-25T17:11:07.247+00:00 --- ## Quick Overview The video provides a mini masterclass demonstrating how to integrate 3D Spline scenes into web projects using various export methods like Public URL, Spline Viewer (for frameworks like React/Next.js), Code Export (for Vanilla JS, Three.js, React), and Self-Hosted ZIP files, highlighting the flexibility for web builders like Webflow and custom coding environments. **Key Points:** - Spline scenes can be shared instantly via a Public URL or embedded using the `` component, which supports customization options like background color, logo visibility, and mouse event handling (Local vs. Global). - Code Export options are available for Vanilla JS, Three.js, React, and React Three Fiber, providing ready-made snippets for direct integration into HTML or framework projects. - For greater control and self-hosting, users can download a Self-Hosted ZIP containing all assets, which prevents fetching resources from external servers. - The tutorial demonstrates how to control Spline scenes from Webflow by adding an HTML embed block and pasting the Viewer code, allowing for interactions like scroll or mouse events to trigger scene animations. - The Three.js Code Export option utilizes the official Spline tool package for loading scenes directly, though visual differences might occur as it bypasses the full Spline runtime engine. - Advanced techniques covered include using `app.swapGeometry()` to replace objects, listening to events via code, preloading scenes using an HTML preload link tag, and updating scene variables programmatically. ![Screenshot at 00:04: The initial screen shows the Spline export modal highlighting the 'Viewer' option, which provides the integrated embed code necessary for easily integrating interactive 3D scenes into web projects using frameworks.](https://ss.rapidrecap.app/screens/4iyMkuga-C0/00-00-04.png) **Context:** This video serves as a tutorial or mini masterclass focused on exporting and integrating interactive 3D scenes created in Spline into live web projects. The presenter walks through the various export options provided by Spline, detailing how to use these assets within common web development environments like custom HTML/JavaScript setups, popular frameworks (React, Next.js), and website builders such as Webflow, emphasizing ease of use and flexibility. ## Detailed Analysis The tutorial comprehensively covers the methods for moving a Spline 3D scene onto a live website. The primary methods reviewed are the Public URL (00:34), the Spline Viewer (00:16), Code Export (00:17), and Self-Hosted ZIPs (00:22). The Public URL provides a direct link for sharing or previewing the exported scene (00:36). The Viewer uses an integrated embed script, offering more flexibility than the URL, especially when integrating with frameworks like React or Next.js (00:51, 05:28). Code Export provides tailored snippets for Vanilla JS, Three.js, React, and React Three Fiber, allowing developers to drop code directly into their HTML or framework components (03:25, 05:21). The Self-Hosted option generates a ZIP file containing all necessary assets for deployment without reliance on external servers (06:43). The video also details controlling Spline scenes directly from Webflow (08:32), where an HTML embed block is used to paste the Viewer code, enabling interactions like scroll or mouse events to drive scene animations (08:15). Furthermore, advanced topics include querying and modifying Spline objects via code (04:32), listening to events (04:34), preloading scenes using HTML link tags (04:37), and swapping geometries dynamically (04:43). ### Export Methods Overview - Public URL for direct link sharing - Viewer for framework integration (React, Next.js) - Code Export for JS/framework snippets - Self-Hosted ZIP for offline deployment ### Webflow Integration - Use the HTML embed block in Webflow - Paste the Spline Viewer code - Position and adjust the embed size/layout in the Webflow editor ### Code Export Options - Vanilla JS provides a ready-made snippet for direct HTML use - Three.js option uses the Spline tool package, noting potential minor visual differences - React and Next.js exports offer framework-specific components (05:28, 05:44) ### Advanced Code Manipulation - Query and modify objects using findObjectByName/findById - Trigger Spline events from outside the scene using emitEvent function - Preload scenes using an HTML preload link tag (04:37) ### Self-Hosting Workflow - Select Self-Hosted in the export modal - Choose preferred code format (Vanilla JS, React, Next.js) - Download ZIP and upload assets/code to your own server for full control (07:07) ![Screenshot at 00:01: Initial screen showing the introductory slide for the tutorial: "Redefining Effortless Productivity".](https://ss.rapidrecap.app/screens/4iyMkuga-C0/00-00-01.png) ![Screenshot at 00:04: Demonstration of the Spline Viewer code snippet for embedding a scene into a web page using HTML script tags \(00:04\).](https://ss.rapidrecap.app/screens/4iyMkuga-C0/00-00-04.png) ![Screenshot at 01:38: Example of a Spline scene \("Light it up"\) being previewed, demonstrating an interactive 3D element \(the light bulb\).](https://ss.rapidrecap.app/screens/4iyMkuga-C0/00-01-38.png) ![Screenshot at 04:04: The live local server output showing the running 3D animation \(a like button\) after running the exported code.](https://ss.rapidrecap.app/screens/4iyMkuga-C0/00-04-04.png) ![Screenshot at 08:38: Example of integrating a 3D model \(a futuristic bottle\) into a Webflow site using the Custom Liquid embed block.](https://ss.rapidrecap.app/screens/4iyMkuga-C0/00-08-38.png)