How to add a 3D model viewer to a Bubble app

You add a 3D model viewer to a Bubble app by embedding an existing web‑based viewer (like Sketchfab or a self‑hosted Three.js viewer) inside an HTML element using an iframe. Bubble does not have a native 3D viewer element, so the reliable method is to embed a viewer that already handles rendering. You upload your 3D file, get its viewer URL (or hosting URL), and place it inside an HTML element.

Two common ways that actually work

The two beginner‑friendly, real-world approaches are:

• Use Sketchfab (easiest): Upload your 3D file to sketchfab.com, set it to public or embed‑allowed, copy the embed iframe, place it in Bubble’s HTML element.
• Use your own viewer hosted elsewhere: Host a simple Three.js viewer (HTML + JS) on a static hosting service (Netlify, GitHub Pages, etc.) and embed it in Bubble via iframe.

Both work because Bubble supports iframes through the HTML element.

How to implement in Bubble

• Drag an HTML element onto the page.
• Paste a working iframe. For Sketchfab it looks like this:

<iframe 
    width="100%" 
    height="500" 
    src="https://sketchfab.com/models/XXXXXX/embed" 
    frameborder="0" 
    allow="autoplay; fullscreen; xr" 
    xr-spatial-tracking 
></iframe>

• Replace the src with your model’s actual embed URL.
• If you store a model URL in your Bubble database, you can dynamically insert it into the HTML element using “Insert dynamic data”.
• Make sure Privacy Rules allow the current user to access the field that stores the URL, or the iframe won’t load when the user is not logged in.

Hosting your own viewer

If you need a custom viewer (controls, branding), host a small HTML+JS viewer outside Bubble and embed it the same way. Your iframe would simply point to your hosting URL.

<iframe 
    width="100%" 
    height="500" 
    src="https://yourviewerhost.com/viewer.html?model=https://yourcdn.com/model.glb">
</iframe>

The viewer handles WebGL and rendering; Bubble only displays it.

Important practical notes

• Bubble’s HTML element fully supports iframes, so this method is stable.
• You cannot run Three.js directly inside Bubble’s HTML element because Bubble strips inline scripts. That’s why hosting the viewer externally is required.
• Use Bubble’s file uploader if you want to store 3D files in your DB, then pass the file’s URL to your viewer.