Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.This project is not covered by Drupal’s security advisory policy.
Model Viewer Formatter
Provides a field formatter for displaying 3D model files using Google's Model Viewer web component.
Description
The Model Viewer Formatter module integrates Google's "model-viewer" web component into Drupal, enabling you to display interactive 3D models directly on your website. This formatter can be applied to any file field to render 3D models with a rich, interactive viewer that supports rotation, zooming, and even augmented reality (AR) on compatible devices.
Features
- Multiple 3D Format Support: Display OBJ, GLTF, and GLB file formats
- Interactive Controls: Enable camera controls for zooming, panning, and rotating models
- Auto-rotation: Optionally enable automatic model rotation
- Customizable Appearance: Configure viewer dimensions, background colors, and poster images
- AR Support: Built-in support for augmented reality on compatible mobile devices (WebXR, Scene Viewer, Quick Look)
- Loading State: Displays a loading spinner while the model loads
- Fully Configurable: All viewer options are configurable per field formatter instance
Configuration Options
The formatter provides the following configurable settings:
- Width & Height: Set custom dimensions (supports px, %, vh units)
- Auto-rotate: Toggle automatic model rotation
- Camera Controls: Enable/disable user interaction (zoom, pan, rotate)
- Background Color: Set background color using hex values
- Poster Image: Optional poster image displayed before model loads
Use Cases
- Product visualization for e-commerce sites
- Architectural and engineering model presentations
- Museum and gallery 3D artifact displays
- Educational content with 3D diagrams and models
- Any content type requiring interactive 3D model display
Requirements
- Drupal 10 or 11
- File field on content type or entity
- 3D model files in OBJ, GLTF, or GLB format
Usage
- Install and enable the module
- Navigate to the Manage Display settings for any content type with a file field
- Select "Model Viewer (Google)" as the formatter for your file field
- Configure the viewer settings as desired
- Upload 3D model files to the field when creating/editing content
Project information
- Project categories: Content display
- Ecosystem: Google Model Viewer
4 sites report using this module- Created by rnsrk on , updated
This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
