How to create a 3D product viewer in Bubble

A simple and reliable way to create a 3D product viewer in Bubble is to embed an existing 3D viewer library (like Model Viewer by Google or Sketchfab) using an HTML element. Bubble itself cannot render 3D natively, so you load a 3D model file (GLB/GLTF) from your Bubble File Uploader or an external CDN and display it inside the HTML element.

Recommended Approach: Use <model-viewer> inside an HTML Element

The <model-viewer> web component is the simplest non-technical option because it works directly in an HTML element, supports rotation, zoom, lighting, auto-rotation, annotations, AR mode, and doesn’t require coding skills beyond pasting valid HTML. Bubble supports this because the HTML element simply outputs raw HTML.

• You upload your 3D file (usually .glb)
• You store the file URL in your Bubble database
• You insert an HTML element and reference that dynamic URL

Step-by-step Implementation

Prepare your database: add a field in your Product data type called model\_file (type: file). Upload a .glb file to it. Then drag the HTML element onto the page and paste code like this:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<model-viewer
  src="https://yourapp.bubbleapps.io/fileupload/{{Current Page Product's model_file}}"
  camera-controls
  auto-rotate
  shadow-intensity="1"
  style="width:100%; height:400px;">
</model-viewer>

Key Notes

• src= must be the dynamic link to your model file. Replace it with Bubble’s dynamic expression, which Bubble will evaluate when rendering the HTML.
• Bubble may escape dynamic tags unless you check “This HTML is static” off, meaning leave it unchecked.
• .glb files work best because they load faster and include materials.
• If you need annotations, AR, or environment lighting, <model-viewer> supports them with attributes.

Alternative: Sketchfab Embed (No hosting needed)

If you don’t want to host .glb files in Bubble, upload your model to Sketchfab and use their embed code:

<iframe
  src="https://sketchfab.com/models/YOUR_ID/embed"
  style="width:100%; height:400px;"
  frameborder="0">
</iframe>

This is secure, works in all browsers, and requires no backend setup.