3D Model Viewer

Monogram supports interactive 3D models in portfolio items using Google model-viewer web component. You can upload GLB or GLTF files and display them as rotatable, interactive 3D objects directly on your site.

#Supported Formats

• GLB - Binary glTF format (single file, recommended)
• GLTF - JSON-based glTF format

GLB is the preferred format because it packages the model, textures, and animations into a single file, making it faster to load and easier to manage.

#How To Use

When creating or editing a portfolio item:

1. Go to the Media tab in the portfolio item editor.
2. Set Media Type to 3D.
3. Upload your GLB or GLTF file in the 3D Model field.
4. Save the portfolio item.

The model will appear wherever the portfolio item media is displayed - both on the single portfolio page and in archive grid cards.

For a complete guide to creating portfolio items, see the Content Management section on Portfolio Item Creation.

#Interactive Controls

The 3D viewer provides the following controls for visitors:

Context	Rotate	Pan	Zoom	Auto-Rotate
Portfolio cards (archive grid)	Yes	Yes	No	Yes
Single portfolio page	Yes	Yes	Yes	Yes

Zoom is disabled on portfolio cards to prevent accidental zoom gestures while browsing the grid. On the full single portfolio page, zoom is enabled for detailed exploration.

#Performance

The model-viewer script (~170 KB) is lazy-loaded on demand. It only loads when a 3D element enters the viewport, detected via IntersectionObserver. Pages without any 3D content do not load the script at all.

This approach keeps your site lightweight:

• No 3D content on the page > zero additional JavaScript loaded
• 3D content present but off-screen > script loads only when the visitor scrolls near it

The viewer also reinitializes automatically when new content loads via AJAX, such as the Load More button in portfolio grids or the auto-load feature on single posts.

Last updated 6 Sep 2026