MARKETPLACE
PLUGINS
3D MODEL VIEWER FOR WEB AND AR
3D Model Viewer for web and AR logo

3D Model Viewer for web and AR

Published April 2021
   •    Updated this month

Plugin details

Easily display interactive 3D models on the web & in AR.
OPTIONS:
You can configure many options:
- enable and configure AR
- show an image poster while the model is loading
- reveal the model only when you decide through the "reveal" action
- run the animations described in the model
- automatically rotate the model
- disable controls and/or zoom
- customize lights and shadows
- manually control the camera position
...


WORKFLOW ACTIONS
You manually
- play, pause and seek the currently running animation
- take a screenshot of the rendered model
- manually "reveal" the model and hide the poster image



WORKFLOW EVENTS
you can react to the following events:
- has started loading a new model
- has finished loading the model


SUPPORTED FORMATS
Currently this plugin supports GLB and glTF formats.


DEMO & EDITOR
Demo: https://plugin-playground.bubbleapps.io/version-test/3d_model_viewer

Editor: https://bubble.io/page?type=page&name=3d_model_viewer&id=plugin-playground

$25

One time  •  Or  $8/mo

4.3 stars   •   8 ratings
659 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Lateral Studio logo
Lateral Studio
Joined 2021   •   8 Plugins
View contributor profile

Instructions

Add the "Model Viewer" visual component in your application and fill the fields.
Each field is preset with a safe default and is well documented, so don't hesitate to click "show documentation" for any field that you find confusing.

**SUPPORTED FILES**:
This plugin supports only GLB and glTF files.


**DIRECT URLs are required**:
You must pass the plugin a URL that points directly to those files, so it's up to you to store them on the internet.

Website like Sketchfab or Google Drive do not offer a direct URL.
In these cases you can download the models and host them directly on Bubble for free using Bubble's filehosting database as explained below.

**Free filehosting on Bubble:**
You can host the 3D models for free directly on Bubble by uploading them from the application menu "Data > File Manager" with the "Upload" button.

![Bubble File Manager](https://234a742daa976f5a38c5472a1b35d383.cdn.bubble.io/f1717431891723x673143099878325200/image%20%283%29.png)

You can then get the direct URL by right-clicking on the file and selecting "Copy link address".



*** v2.0.0 ***

Following the upgrade to "model-viewer" 2.0.1, we had to apply the following breaking changes:

Removed following properties:

- "bounds": it will behave as "tight"
- "interaction policy": it will behave as "always allow"
- "interaction prompt style": it will behave as "wiggle"

Removed the "when focused" option from the "interaction prompt" property


We also added the following new features:

- Panning is enabled by default: use two fingers on mobile devices and mouse + ctrl/cmd key on desktops

- "iOS USDZ URL" is no longer required for iOS devices as it we will generate it on the fly (if the property is left empty)

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Media   •   Ecommerce   •   Video   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

Average rating (4.3)

3d model is not loading
February 28th, 2023
i am using the 3d model url from some 3d model i found in sketchfab, for exemple this one https://skfb.ly/6VZIx after paste this url in the plugin field, the model doesnt load in the preview page of my application. It seems that this plugin is not working. Can someone help me to solve this issue?
Hello, the reviews are not the correct place to ask for support. If you need help please write me an email at [email protected] with the URL that you're trying to use and I'll gladly help you. (plugin author)
March 1st, 2023
  •  
Lateral Studio
Panning
August 8th, 2022
Hello, thanks for the great plugin. is it possible for you to also add panning functionality?
Excellent Plugin
June 27th, 2022
Works like a charm. Thanks for building this! Just bought another of yours (Typewriter Text). The quality of your work, and the documentation, is so good.
Endless Opportunity for more features!
February 7th, 2022
Great Plugin still and continusly improved! Some ideas for further versions :) https://modelviewer.dev/docs/#entrydocs-loading-methods-toDataURL toDataURL(type, encoderOptions) Without a poster and displaying multiple model viewers, can become too slow and also if they are in a drag & drop group! But with a custom poster for each viewer, it could improve a lot the UX!
Sorry for the late reply, I just published v1.5.0 with this feature How it works: - from a workflow, you can take a screenshot of a Model Viewer - the screenshot is encoded as data url (text) and saved in the Model Viewer's state under the name "screenshot_data_url" You can see it in action in the demo editor (plugin author)
May 5th, 2022
  •  
Lateral Studio
Snapshot
December 14th, 2021
Hello dear creator. can you please also make the snapshot generator method toDataurl(?,?) https://modelviewer.dev/docs/index.html#entrydocs-loading-methods-toDataURL
Sorry for the late reply, I just published v1.5.0 with this feature How it works: - from a workflow, you can take a screenshot of a Model Viewer - the screenshot is encoded as data url (text) and saved in the Model Viewer's state under the name "screenshot_data_url" You can see it in action in the demo editor (plugin author)
May 5th, 2022
  •  
Lateral Studio
This is awesome omg thank you so much. is there a way to integrate the new panning abbility too
May 12th, 2022
  •  
Original reviewer
Bubble