This extension embeds <model-viewer>
into Directus as interface
, display
, panel
andf endpoint
(for use with live previews). These extensions will all render a 3d model in various places of the Directus UI. All of the extensions expect the 3d model files to be uploaded to the Directus File storage.
Note: I’ve only tested this with *.glb 3d files! It may work with other formats but no guarantees.
With this endpoint you’ll get a full page 3d model viewer which can be embedded as an iframe almost anywhere. The model viewer settings are configured based on url query parameters.
Camera Control | Auto Rotate |
---|---|
![]() | ![]() |
GET /3d-viewer/viewer/<file-uuid>?options
camera_controls
booleanauto_rotate
booleanshadow_intensity
numberscale
string
GET /3d-viewer/viewer/bedfcb8b-1463-43e9-831e-45fd60f985f8
?camera_controls
&auto_rotate
&shadow_intensity=2
&scale=2 2 2
where the “3D Model” field is a “File” relationship (or an input with a valid file UUID will do too)
This interface enables you to render 3d models on a Directus detail page. When setting values directly in the interface on an item detail page these will be leading and overwrite the set interface options.
Interface Options | Item Values |
---|---|
![]() | ![]() |
![]() | ![]() |
This display enables you to render 3d models on a Directus overview page. This takes a fair amount of resources so would not recommend this for pages with more than a few 3d model refrences.
Overview Page | Display Options |
---|---|
![]() | ![]() |
This panel enables you to render 3d models on a Directus insights panel.
Panel Example | Panel Options |
---|---|
![]() | ![]() |
Author: br41nslug
Source: https://github.com/br41nslug/directus-extension-3d-viewer
License: MIT license