If your Directus project stores 3D assets — product configurators, printable parts, scanned objects, game props — you have met this screen: a file card, a file name, and a download button. To find out whether chair-v4-final.glb is the right chair, you download it and open it in something else.
Multiply that by a catalogue of a few hundred models and the CMS stops being where the work happens.
Directus has no built-in 3D preview
Directus renders images, video and PDFs, but a .glb, .stl or .obj file is just bytes with a download link. That is not an oversight so much as scope: a 3D viewer means shipping a WebGL renderer, and that is a real dependency for a general-purpose CMS to carry.
It is, however, exactly the kind of thing an extension should do.
A 3D model viewer interface for Directus
Directus 3D Model Viewer is a free open-source interface for file fields that renders the model inline, in the item form, using three.js.
| Format | Support |
|---|---|
.glb | Full — materials, textures, scenes, animations |
.gltf | Self-contained files, with embedded buffers and textures |
.stl | Geometry, shaded with a configurable model colour |
.obj | Geometry only — .mtl materials are not fetched |
.ply | Geometry, with vertex colours where present |
Meshopt-compressed glTF works with no configuration because the decoder is bundled. Draco-compressed files need a decoder path, which is a field option — the viewer says so explicitly rather than failing silently.
What editors can actually do
- Camera — orbit with damping, seven view presets (isometric, front, back, left, right, top, bottom), perspective or orthographic projection, and auto-framing that fits any model regardless of its size or origin.
- Lighting — Studio, Daylight or lights-only environments, with live intensity and brightness.
- Inspection — wireframe, flat shading, a ground grid, axes, a bounding box and a soft ground shadow.
- Animation — glTF clips are detected automatically, with play/pause, a clip selector, a scrubber and a speed control.
- Model info — meshes, triangles, vertices, materials, textures, bounding-box dimensions and file size, which is often the fastest way to catch an asset that is far too heavy for the web.
- Output — full screen, and a one-click PNG export of the current view for a ticket or a spec sheet.
Every field option is also a live toolbar control, so an editor can switch to wireframe or top view without an administrator touching the field configuration.
One detail that took real debugging
Directus ships a strict Content-Security-Policy that allows blob: URLs for images but not for fetch(). three.js prefers a fetch-based image loader for embedded glTF textures, so every texture was being dropped — silently, with no console error — and models rendered plain white. The extension forces the <img>-based texture path instead, which the default CSP permits. Nothing to configure on your server.
Installing it
Open Settings → Marketplace in Directus, search for @contensu/directus-extension-model-viewer-interface, and press Install. Then set a file field's interface to 3D Model Viewer.
Frequently asked questions
Which 3D file formats does Directus support with this extension?
GLB and self-contained glTF with full materials, textures and animations, plus STL, OBJ and PLY for geometry. Meshopt-compressed glTF works out of the box; Draco-compressed files need a decoder path set in the field options.
Can Directus preview 3D models without an extension?
No. Directus renders a 3D file as a generic file card with a download link. There is no built-in viewer, so the only way to check a model is to download it and open it in other software.
Does the viewer slow down the admin app?
Rendering stops entirely when the field scrolls out of view or the browser tab is hidden, and the pixel ratio is capped, so an idle viewer costs nothing. Geometries, materials, textures and the renderer are all disposed when the form closes.
Can editors play glTF animations?
Yes. Animation clips in a GLB or glTF file are detected automatically and get a play/pause button, a clip selector, a scrubber and a speed control.
MIT-licensed and free to use. Issues and format requests are welcome on GitHub.
Not finding what you need?
Every business is different. Tell us about your specific challenges and we will give you honest advice on the best approach — whether that is custom software or a better off-the-shelf tool.
Tell us what you need →