Directus Extension 3d Viewer

screenshot of Directus Extension 3d Viewer
vue
directus

Overview

The Directus 3D Model Viewer is an extension that allows users to embed a <model-viewer> into Directus as an interface, display, panel, and endpoint for live previews. This extension enables users to render 3D models in various places within the Directus UI, and it requires the 3D model files to be uploaded to the Directus File storage. It has been primarily tested with *.glb 3D files, but it may also work with other formats.

Features

  • Model Viewer Endpoint: Provides a full-page 3D model viewer that can be embedded as an iframe in various locations. The settings for the model viewer can be configured using URL query parameters.
  • Model Viewer Interface: Allows users to render 3D models on a Directus detail page. The interface options can be set directly on an item detail page and will override any set interface options.
  • Model Viewer Display: Enables users to render 3D models on a Directus overview page. Due to the resource-intensive nature of rendering 3D models, this feature is recommended for pages with only a few model references.
  • Model Viewer Panel: Allows users to render 3D models on a Directus insights panel.

Summary

The Directus 3D Model Viewer extension enhances the Directus platform by enabling users to seamlessly render and display 3D models within the Directus UI. With features such as the model viewer endpoint, interface, display, and panel, users have flexibility in where and how they incorporate 3D models into their Directus projects. While primarily designed for *.glb 3D files, this extension may also support other formats. Its easy installation and configuration make it a valuable addition for users working with 3D models in Directus.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

directus
Directus

A website that uses Directus as an open source headless CMS to manage content. This includes features such as a customizable content model, role-based access control, and API-based content delivery to support a wide range of digital experiences.

Recoil

Recoil is a state management library for React that provides an intuitive and flexible API for managing and sharing state across components. It supports a range of features, including derived state, asynchronous updates, and time-travel debugging, and is designed to work well with the React ecosystem and other state management solutions.