# How to Add a 3D Model Viewer in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

A 3D model viewer in Bubble uses Google's model-viewer web component embedded in an HTML element. You load the model-viewer script from CDN, add the custom HTML tag with your GLB/GLTF file URL, and configure camera controls, auto-rotate, and AR preview. This works for product visualization, architecture previews, and educational models. The viewer is touch-friendly and supports augmented reality on mobile devices.

## Overview: 3D Model Viewer in Bubble

This tutorial shows how to embed interactive 3D models in your Bubble app using the model-viewer web component by Google.

## Before you start

- A Bubble app with a page to display 3D models
- A 3D model file in GLB or GLTF format hosted on a public URL
- Basic understanding of HTML elements in Bubble

## Step-by-step guide

### 1. Upload and host your 3D model file

Your 3D model needs to be in GLB (recommended) or GLTF format. You can upload the file to Bubble's file manager, a CDN like Cloudflare R2, or a 3D hosting service like Sketchfab. GLB is preferred because it is a single binary file — GLTF requires multiple files. Keep file sizes under 10MB for good loading performance. Use tools like Blender to export or optimize models.

**Expected result:** A GLB model file is hosted at a publicly accessible URL.

### 2. Embed the model-viewer component in an HTML element

Add an HTML element to your page sized to fit the 3D viewer (e.g., 500x400px). Paste the model-viewer script and HTML tag. The 'src' attribute points to your model URL. Add 'camera-controls' for mouse/touch interaction, 'auto-rotate' for continuous rotation, and 'ar' for augmented reality on supported devices.

```
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
<model-viewer
  src="https://your-host.com/model.glb"
  alt="3D product model"
  camera-controls
  auto-rotate
  ar
  shadow-intensity="1"
  style="width:100%;height:400px;"
></model-viewer>
```

**Expected result:** A 3D model renders in the HTML element with rotation, zoom, and touch controls.

### 3. Configure camera position and lighting

Customize the initial view by adding attributes: 'camera-orbit' sets the initial camera angle (e.g., '45deg 55deg 2.5m'), 'field-of-view' controls zoom level, and 'exposure' adjusts brightness. For lighting, 'shadow-intensity' adds ground shadows and 'environment-image' lets you set a custom HDR environment for reflective materials. The model-viewer documentation has a live editor for testing these values.

> Pro tip: Use the model-viewer editor at modelviewer.dev/editor to interactively find the perfect camera angle and copy the attribute values.

**Expected result:** The 3D model displays from the optimal angle with appropriate lighting and shadows.

### 4. Add annotations and hotspots

Hotspots are clickable points on the 3D model that show information. Add button elements inside the model-viewer tag with the 'slot=hotspot' attribute and data-position/data-normal coordinates. When clicked, show a tooltip with product information. This is great for product demos where you want to highlight specific features like a camera lens, a shoe sole, or a device port.

```
<model-viewer src="model.glb" camera-controls>
  <button slot="hotspot-feature1"
    data-position="0.1 0.2 0.05"
    data-normal="0 1 0"
    class="hotspot"
    onclick="alert('Premium leather upper')">
    <span>1</span>
  </button>
</model-viewer>
```

**Expected result:** Clickable hotspot markers appear on the 3D model showing feature descriptions when tapped.

### 5. Load models dynamically from your database

To display different 3D models based on data (e.g., different products), use Bubble's 'Insert dynamic data' inside the HTML element. Replace the static src URL with a dynamic expression: src="[Insert dynamic data: Current page's Product's model_file's URL]". The model-viewer loads the file at runtime. Add a loading indicator (poster attribute) that shows while the model downloads.

**Expected result:** Different 3D models load dynamically based on the current page's data record.

## Complete code example

File: `Workflow summary`

```text
3D MODEL VIEWER — SUMMARY
============================

COMPONENT: Google model-viewer web component
FORMAT: GLB (recommended) or GLTF
MAX SIZE: ~10MB for good performance

HTML EMBED:
  <script src=".../model-viewer.min.js"></script>
  <model-viewer src="model.glb"
    camera-controls auto-rotate ar
    shadow-intensity="1"
    camera-orbit="45deg 55deg 2.5m">
  </model-viewer>

FEATURES:
  camera-controls: mouse/touch rotate + zoom
  auto-rotate: continuous spin animation
  ar: augmented reality on mobile
  shadow-intensity: ground shadow
  poster: loading image placeholder

HOTSPOTS:
  <button slot="hotspot-name"
    data-position="x y z"
    data-normal="x y z">
  Clickable annotations on the model

DYNAMIC LOADING:
  src="[Bubble dynamic data: model URL]"
  Different models per product/record
```

## Common mistakes

- **Using GLTF format with multiple files instead of a single GLB** — GLTF uses separate files for textures and geometry — if any file fails to load, the model breaks Fix: Export models as GLB which packages everything into one file for reliable loading
- **Loading very large model files (50MB+) without optimization** — Large models take too long to download, especially on mobile, causing users to leave before the model loads Fix: Optimize models to under 10MB using Blender's decimate modifier or online tools like gltf-transform
- **Not adding a poster/loading image while the model downloads** — Users see a blank space for several seconds while the model loads, which looks broken Fix: Add the 'poster' attribute with a static image preview that displays while the 3D model downloads

## Best practices

- Use GLB format for reliable single-file 3D model delivery
- Keep models under 10MB for acceptable loading times
- Add a poster image that displays while the model downloads
- Use the model-viewer editor at modelviewer.dev for testing camera angles
- Enable AR for e-commerce products so users can preview in their space
- Add hotspots for product features to create interactive presentations
- Test on mobile devices where touch controls and AR are most used

## Frequently asked questions

### What 3D file formats does model-viewer support?

model-viewer supports GLB and GLTF formats. GLB is recommended because it is a single binary file. Convert other formats (OBJ, FBX, STL) to GLB using Blender or an online converter.

### Does the AR feature work on all phones?

AR works on iOS devices with ARKit (iPhone 6S+) via USDZ format, and Android devices with ARCore (most modern Android phones) via GLB. model-viewer handles the format switching automatically.

### Can I load models from Bubble's file manager?

Yes. Upload the GLB file via the File Manager in the Data tab. Use the file URL in the model-viewer src attribute. For dynamic loading, store the file URL in a data field.

### How do I create GLB files for my products?

Use Blender (free), Sketchfab, or hire a 3D modeler. For simple products, photogrammetry apps like Polycam can create 3D scans from photos. Export as GLB format.

### Can RapidDev help add 3D features to my Bubble app?

Yes. RapidDev can integrate 3D model viewers, AR previews, virtual tours, and interactive product visualization in your Bubble app.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-a-3d-model-viewer-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-a-3d-model-viewer-in-bubble