xiry.

Design · Tip

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

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

From the Xiry library · Updated 3 October 2026

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's 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
Topic
3D Design
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: Enables web designers to create interactive 3D product showcases with clickable angle annotations without custom Three.js code.

Compare

Related

  • Buttermax

    Design studio portfolio featuring playful interactive 3D and retro visuals

  • Embedding Interactive 3D Models in Framer with Spline

    Workflow to embed interactive Spline 3D assets into Framer websites without code

  • Dora

    No-code website builder for creating animated 3D sites from text prompts

  • Formula

    Web design community and curated resource toolkit for Figma and Webflow

  • Igloo Inc.

    Interactive 3D WebGL website showcasing spatial design and creative interactions.

  • Lué Studio®

    Two-person design and development studio portfolio featuring playful interactive UI details

Updated