Model Viewer Formatter
6 sites
No security coverage
This module allows you to display interactive 3D models from file fields using Google's Model Viewer. It supports various 3D file formats and offers features like camera controls, auto-rotation, and augmented reality support.
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