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.
Prerequisites
- 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
Upload and host your 3D model file
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.
Embed the model-viewer component in an HTML element
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.
1<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>2<model-viewer3 src="https://your-host.com/model.glb"4 alt="3D product model"5 camera-controls6 auto-rotate7 ar8 shadow-intensity="1"9 style="width:100%;height:400px;"10></model-viewer>Expected result: A 3D model renders in the HTML element with rotation, zoom, and touch controls.
Configure camera position and lighting
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.
Add annotations and hotspots
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.
1<model-viewer src="model.glb" camera-controls>2 <button slot="hotspot-feature1"3 data-position="0.1 0.2 0.05"4 data-normal="0 1 0"5 class="hotspot"6 onclick="alert('Premium leather upper')">7 <span>1</span>8 </button>9</model-viewer>Expected result: Clickable hotspot markers appear on the 3D model showing feature descriptions when tapped.
Load models dynamically from your database
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 working example
13D MODEL VIEWER — SUMMARY2============================34COMPONENT: Google model-viewer web component5FORMAT: GLB (recommended) or GLTF6MAX SIZE: ~10MB for good performance78HTML EMBED:9 <script src=".../model-viewer.min.js"></script>10 <model-viewer src="model.glb"11 camera-controls auto-rotate ar12 shadow-intensity="1"13 camera-orbit="45deg 55deg 2.5m">14 </model-viewer>1516FEATURES:17 camera-controls: mouse/touch rotate + zoom18 auto-rotate: continuous spin animation19 ar: augmented reality on mobile20 shadow-intensity: ground shadow21 poster: loading image placeholder2223HOTSPOTS:24 <button slot="hotspot-name"25 data-position="x y z"26 data-normal="x y z">27 Clickable annotations on the model2829DYNAMIC LOADING:30 src="[Bubble dynamic data: model URL]"31 Different models per product/recordCommon mistakes when adding a 3D Model Viewer in Bubble
Why it's a problem: Using GLTF format with multiple files instead of a single GLB
How to avoid: Export models as GLB which packages everything into one file for reliable loading
Why it's a problem: Loading very large model files (50MB+) without optimization
How to avoid: Optimize models to under 10MB using Blender's decimate modifier or online tools like gltf-transform
Why it's a problem: Not adding a poster/loading image while the model downloads
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a 3D product viewer to my Bubble.io e-commerce app. Customers should be able to rotate, zoom, and view products in AR on their phone. How do I embed a 3D model viewer?
Add a 3D model viewer to my product page. Embed the model-viewer component in an HTML element. Load the GLB file from the product's database record. Enable camera controls, auto-rotate, and AR preview. Add a loading image while the model downloads.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation