Spline Workshop

TL;DR

• Goal: model a 3D rocket in Spline, animate lift-off on Spacebar, reset on R, and embed the scene in a plain HTML page.
• Tools: free Spline account, browser (or desktop app), and a text editor for the final HTML file.
• Build: Lathe body + hollow cylinder nozzle + vector fins cloned radially — all grouped as "Rocket Final".
• Polish: matcap materials, particle exhaust at the nozzle, Bloom post-processing, and keyboard-driven state transitions.
• Ship: export the scene URL from Spline and paste it into a spline-viewer embed — open rocket.html in any browser.
• Start here: open the workshop guide — it has every click, inspector value, and screenshot from the session.

Spline is a browser-based 3D design tool that sits at the opposite end of the complexity spectrum from a Three.js shader workshop. You model, animate, and publish inside one app — then export a scene URL or embed code that runs on any modern website. I built this session for designers and developers who want interactive 3D without committing to a full WebGL stack.

Participants went from a blank file to a working rocket with particle exhaust and keyboard controls in a single sitting. The "wait, that is it?" reaction was the point. Everyone left with something they could open in a browser tab and share — and a clear path to keep experimenting in the #noa-3d Slack channel.

Workshop guide

The canonical resource for this project is the Notion guide: Spline Workshop — Build & Launch an Animated Rocket. It is structured in five parts (Part 0 through Part 4) and includes the exact inspector values, keyboard shortcuts, and export steps from the live session. Use the link in the Live project section below, or open it directly from here. What follows is an expanded summary — the Notion page is where you actually build along.

Part 0: Getting Spline

Before Part 1, get Spline running. Use the web app at spline.design (easiest in a workshop — no install) or the optional desktop app for Mac, Windows, or Linux. Create a free account when prompted — you need it to save files and export scenes.

• Web version: open spline.design, sign in, and you are ready for Part 1.
• Desktop version: download, install, log in with the same account — files sync across both.
• Workshop tip: stick to one platform per session so everyone sees the same UI layout.

Part 1: Setup & preparation

Launch Spline and log in. From your dashboard, click the blue "New File" button (top right) and pick the "3D Text Example" template — it gives you a lit scene without starting from an empty canvas.

• Clean the scene: select the "Text" object in the Object List (left panel) and press Delete or Backspace.
• Optional: delete or hide the "Rectangle" background (eye icon in the Object List) so the rocket sits on the default grid.
• Rename the file: click the title top-left (e.g. "3D Text Example") and change it to "My Rocket".
• Save early and often: Cmd+S (Mac) or Ctrl+S (Windows). You will thank yourself before Part 3.

Part 2: Building the rocket (Lathe & Vector method)

The rocket is built entirely from Spline primitives — no imported models. The body uses a Lathe (revolve a profile curve), the nozzle is a hollow Cylinder, and the fins are drawn with the Vector tool then cloned radially. Naming groups as you go makes Parts 3 and 4 much easier.

• Rocket body (Lathe): click "+" in the toolbar → Lathe. In the Inspector, set approximate Scale X: 2, Y: 3, Z: 2 (adjust Y first for height). Open the curve editor and drag points to a rocket profile — pointy nose, wider body, vertical points on the rotation axis.
• Engine nozzle (Cylinder): add a Cylinder, move it (W key) to the bottom of the lathe, scale width to match the base. Set Hollow to ~0.80, Bottom Radius to ~0.30 if available, and Scale Y to ~0.5 for height. Check from Side and Front orthographic views.
• Fins (Vector): switch to Right or Front orthographic view. Select the Vector tool (pen icon), draw a closed fin shape beside the rocket base, set Extrusion to ~10–20, optional small Bevel. Group the fin alone as "Fin Pivot Group" (Cmd+G / Ctrl+G).
• Radial clone: with Fin Pivot Group selected, use the clone tool — Type: Radial, Count: 4, Radius ~50, Alignment: Yes. Rotate the group into position on the rocket body (W to move, R to rotate). Switch back to Perspective view to check.
• Final group: Shift-select the Lathe, Cylinder, and all fin groups → Cmd+G / Ctrl+G → rename to "Rocket Final". Save.

Part 3: Materials, effects & animation

Part 3 is where the demo stops being a static model. You apply materials per part, add particle exhaust at the nozzle, wire keyboard events for launch and reset, and optionally enable Bloom so the lift-off reads on screen.

• Materials: expand "Rocket Final" in the Object List. Select the lathe body → Inspector → new material → matcap or colour. Repeat for fins and nozzle with contrasting treatments so parts read separately.
• Particle exhaust: "+" → Effect → Emitter (Particles). Move the emitter gizmo to the nozzle opening. Inspector values from the guide: Birthrate ~90, Size Start 40 / End 90, Life 0.5–1.5s (add randomness), Speed ~31. Set Autoplay to No — exhaust should trigger on launch, not loop idle.
• States: select "Rocket Final" → Inspector → States tab. Add a new state, rename it "Lift Off". With Lift Off active, move the group up on Position Y (visible lift). Base State stays on the pad.
• Events — launch: Events tab → Add Event. Trigger: Key Down → Spacebar. Action: Transition → Target Self → State Lift Off. Duration 1500ms, Easing Expo Out.
• Events — reset: second event. Trigger: Key Down → R. Action: Transition → Target Self → State Base State. Duration 1000ms, Easing Linear. Press Play (▶) to test; Stop (⏹) when done.
• Bloom: click empty canvas or scene settings → Post Processing → enable Bloom. Intensity ~0.1–0.3, Threshold ~0.8–1.0. Subtle glow sells the exhaust without blowing out the scene.

Part 4: Optimize, export & integrate

Before export, tidy the scene: delete unused objects, remove extra lights if the template added more than you need, and centre Rocket Final at Position X: 0, Z: 0 (adjust Y so it sits on the grid). Save one last time, then open Export (top right) → Code Export / Embed & Share.

• Copy the Scene URL — format: https://prod.spline.design/xxxxxxxx/scene.splinecode. Keep it somewhere safe; this is what the web embed loads.
• Note the script tag Spline provides (@splinetool/viewer) and the <spline-viewer> element structure — both are in the export panel and in the guide.
• Paste the URL into the HTML template below, save as rocket.html, and open in Chrome, Safari, or Firefox. Spacebar launches, R resets — no npm, no bundler.

Step-by-step export screenshots and the exact Export panel fields are in the workshop guide under Part 4.

Finished — what next?

That is the full arc: sign up, model, animate, export, embed. The Notion workshop guide is the document I used in the room — follow it if you want the same pacing and inspector numbers as the live session. For deeper Spline features, see Spline Tutorials and the Discord community. The same workflow scales to product hero sections, configurators, and landing-page interactions — the rocket is just a friendly first ship.