# Interactive 3D Website Showcase Workflow (Spline + Sketchfab + Webflow)

> Workflow to embed interactive 3D product models with annotations into Webflow

This technique combines Spline, Sketchfab, and Webflow to build interactive 3D product showcases without writing Three.js code. Designers create a 3D model in Spline, upload it to Sketchfab to set up clickable camera annotations, and embed the interactive viewer via Webflow HTML blocks. It provides a simple way to highlight specific product features directly inside a web layout.

## How it works

1. 3D Model: Go to spline.design, build or customize your 3D product model, and export it as a GLTF file.
2. Convert Format: If needed, convert GLTF to OBJ using an online converter like aspose.app.
3. Annotations: Upload the OBJ model to Sketchfab (sketchfab.com). Set up 3D inspection angles and add text annotations to key product features.
4. Embed Settings: Go to the Sketchfab Embed viewer settings, toggle 'Show Annotations' to On, and click 'Copy to Clipboard'.
5. Webflow Integration: Open Webflow, add an HTML Embed block to your layout, paste the Sketchfab iframe embed code, and style surrounding page elements around the interactive canvas.

## What it is for

- Embed interactive 3D product showcases on e-commerce or landing pages
- Add clickable 3D inspection angles and feature callouts to web models
- Integrate 3D assets into Webflow sites without custom WebGL development

## Key points

- Design or customize a 3D product asset in Spline and export it as GLTF
- Convert 3D file formats (e.g., GLTF to OBJ) using online converters like Aspose if needed
- Upload the 3D model to Sketchfab to configure camera angles and text annotations
- Configure Sketchfab embed viewer settings to enable interactive annotations
- Paste the generated iframe embed code into a Webflow HTML Embed block

## Pricing

Freemium. Free tiers available on Spline, Sketchfab, and Webflow

## Details

- Type: Tip
- Category: [Design](https://xiry.app/topics/design.md)
- Open source: no
- Platforms: Web
- For: Web designers, Webflow developers, and 3D product designers
- Alternative to: Three.js, Spline Web Embed
- Tags: 3d, webflow, sketchfab, spline, web design, interactive

## Why it was saved

- [@nwg.j, 16 June 2023](https://www.instagram.com/reel/CtiaeMKAony/): Enables web designers to create interactive 3D product showcases with clickable angle annotations without custom Three.js code.

## Compare

- [Alternatives to Three.js](https://xiry.app/alternatives/three-js.md)

## Related

- [Buttermax](https://xiry.app/resources/buttermax): Design studio portfolio featuring playful interactive 3D and retro visuals (Website, Free)
- [Embedding Interactive 3D Models in Framer with Spline](https://xiry.app/resources/embedding-interactive-3d-models-in-framer-with-spline): Workflow to embed interactive Spline 3D assets into Framer websites without code (Tip, Freemium)
- [Dora](https://xiry.app/resources/dora): No-code website builder for creating animated 3D sites from text prompts (Web app, Freemium)
- [Formula](https://xiry.app/resources/formula): Web design community and curated resource toolkit for Figma and Webflow (Website, Paid)
- [Igloo Inc.](https://xiry.app/resources/igloo-inc): Interactive 3D WebGL website showcasing spatial design and creative interactions. (Website, Free)
- [Lué Studio®](https://xiry.app/resources/lue-studio): Two-person design and development studio portfolio featuring playful interactive UI details (Website, Paid)

Updated 3 October 2026. Page: https://xiry.app/resources/interactive-3d-website-showcase-workflow-spline-sketchfab-we

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.