{"_id":"@contensu/directus-extension-model-viewer-interface","_rev":"2-53545233bad7cbd218e1c0e68b1f6951","name":"@contensu/directus-extension-model-viewer-interface","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@contensu/directus-extension-model-viewer-interface","version":"1.0.0","keywords":["directus","directus-extension","directus-custom-interface","3d","model","gltf","glb","stl","obj","three"],"author":{"name":"contensu-dev"},"license":"MIT","_id":"@contensu/directus-extension-model-viewer-interface@1.0.0","maintainers":[{"name":"contensu-dev","email":"contact@contensu.com"}],"homepage":"https://github.com/contensu/directus-extension-model-viewer-interface","bugs":{"url":"https://github.com/contensu/directus-extension-model-viewer-interface/issues"},"dist":{"shasum":"94d77a55b930fbf9dc2ab6ab889e3eb1f3bb959d","tarball":"https://registry.npmjs.org/@contensu/directus-extension-model-viewer-interface/-/directus-extension-model-viewer-interface-1.0.0.tgz","fileCount":9,"integrity":"sha512-GTTGzDzQpbbZkwVl2/oDDmkCCYP13Pe2kBXhU73FNHWfd5TJSvbjymQep5VmzNKMMd46qr6pqX6KvZa5gB2F1A==","signatures":[{"sig":"MEUCIHUm51BkVB4Y2pQohhzEBlUqybtqyuRfsK45fQZon48nAiEAlBoYYsES9dNrQUm5RoMUiC6eiS5I9rx3ziL65eFaINQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1015583},"icon":"view_in_ar","type":"module","gitHead":"4271e2c320434424759c300ab051575213b2a808","scripts":{"dev":"directus-extension build -w --no-minify","link":"directus-extension link","test":"node --experimental-strip-types --test test/*.test.ts","build":"directus-extension build","validate":"directus-extension validate","typecheck":"vue-tsc --noEmit","prepublishOnly":"pnpm run build"},"_npmUser":{"name":"contensu-dev","email":"contact@contensu.com"},"repository":{"url":"git+https://github.com/contensu/directus-extension-model-viewer-interface.git","type":"git"},"_npmVersion":"10.9.7","description":"A Directus interface that renders 3D model files (glTF/GLB, STL, OBJ, PLY) from a file field in an interactive three.js viewer with orbit controls.","directories":{},"_nodeVersion":"22.22.2","_hasShrinkwrap":false,"devDependencies":{"vue":"3.5.24","three":"0.185.1","vue-tsc":"3.3.9","typescript":"5.9.3","@types/three":"0.185.4","@directus/extensions-sdk":"18.0.2"},"directus:extension":{"host":"^10.10.0 || ^11.0.0","path":"dist/index.js","type":"interface","source":"src/index.ts"},"_npmOperationalInternal":{"tmp":"tmp/directus-extension-model-viewer-interface_1.0.0_1785942662851_0.7241015464312759","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@contensu/directus-extension-model-viewer-interface","description":"A Directus interface that renders 3D model files (glTF/GLB, STL, OBJ, PLY) from a file field in an interactive three.js viewer with orbit controls.","author":{"name":"contensu-dev"},"license":"MIT","icon":"view_in_ar","version":"1.0.1","keywords":["directus","directus-extension","directus-custom-interface","3d","model","gltf","glb","stl","obj","three"],"type":"module","directus:extension":{"type":"interface","path":"dist/index.js","source":"src/index.ts","host":"^10.10.0 || ^11.0.0"},"scripts":{"build":"directus-extension build","dev":"directus-extension build -w --no-minify","link":"directus-extension link","validate":"directus-extension validate","typecheck":"vue-tsc --noEmit","test":"vitest run","prepublishOnly":"pnpm run build","add":"directus-extension add"},"devDependencies":{"@directus/extensions-sdk":"18.0.2","@types/three":"0.185.4","three":"0.185.1","typescript":"5.9.3","vitest":"4.1.0","vue":"3.5.24","vue-tsc":"3.3.9"},"homepage":"https://github.com/contensu/directus-extension-model-viewer-interface","repository":{"type":"git","url":"git+https://github.com/contensu/directus-extension-model-viewer-interface.git"},"bugs":{"url":"https://github.com/contensu/directus-extension-model-viewer-interface/issues"},"_id":"@contensu/directus-extension-model-viewer-interface@1.0.1","gitHead":"19f70a70f1ba04d16dbcb05c31fb2515c8885544","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-Pit+kSyAVTE7aRRNz3US2+T3E/p3O0Aa3AvfpcaHmM9vQKH4BvlrPA5HfXNBL2AWbqLen+vcG1BUdqe/+aTxpw==","shasum":"b2fa5cafa324ac957f9d450cfd660d2f542dac88","tarball":"https://registry.npmjs.org/@contensu/directus-extension-model-viewer-interface/-/directus-extension-model-viewer-interface-1.0.1.tgz","fileCount":4,"unpackedSize":755788,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCBYsnN0T4hPeIFvuVNazeKvcBJh+lha3jk9mgvWO4piAIhANESxnpEBrvaoejiXA9q3qJw1B4bHcm9FpHi529eXVEw"}]},"_npmUser":{"name":"contensu-dev","email":"contact@contensu.com"},"directories":{},"maintainers":[{"name":"contensu-dev","email":"contact@contensu.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/directus-extension-model-viewer-interface_1.0.1_1785944256270_0.34434446023433063"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-05T15:11:02.674Z","modified":"2026-08-05T15:37:36.604Z","1.0.0":"2026-08-05T15:11:03.056Z","1.0.1":"2026-08-05T15:37:36.444Z"},"bugs":{"url":"https://github.com/contensu/directus-extension-model-viewer-interface/issues"},"author":{"name":"contensu-dev"},"license":"MIT","homepage":"https://github.com/contensu/directus-extension-model-viewer-interface","keywords":["directus","directus-extension","directus-custom-interface","3d","model","gltf","glb","stl","obj","three"],"repository":{"type":"git","url":"git+https://github.com/contensu/directus-extension-model-viewer-interface.git"},"description":"A Directus interface that renders 3D model files (glTF/GLB, STL, OBJ, PLY) from a file field in an interactive three.js viewer with orbit controls.","maintainers":[{"name":"contensu-dev","email":"contact@contensu.com"}],"readme":"# @contensu/directus-extension-model-viewer-interface\n\nA Directus interface for **file** fields that renders 3D model files in an interactive three.js viewer.\n\n![A textured GLB rendered in the field, with the toolbar, ground shadow, grid, and model info panel](https://raw.githubusercontent.com/contensu/directus-extension-model-viewer-interface/main/docs/images/viewer.png)\n\n## Install\n\nOpen **Settings → Marketplace** in Directus, search for `@contensu/directus-extension-model-viewer-interface`, and press **Install**. Directus unpacks the extension and reloads on its own — no restart required.\n\nIf a self-hosted instance refuses the install, it is running the default `MARKETPLACE_TRUST=sandbox`; set `MARKETPLACE_TRUST=all` to allow it.\n\nThen create or edit a field and pick **3D Model Viewer** under *Interface*.\n\n## Supported formats\n\n| Format | Loader | Notes |\n| --- | --- | --- |\n| `.glb` | GLTFLoader | Full support: materials, textures, scenes, animations |\n| `.gltf` | GLTFLoader | Self-contained files only (embedded buffers/textures) — external `.bin` and texture references cannot be resolved from a single Directus asset |\n| `.stl` | STLLoader | Rendered with the configured model colour |\n| `.obj` | OBJLoader | Geometry only; `.mtl` materials are not fetched |\n| `.ply` | PLYLoader | Vertex colours respected when present |\n\n**Compression:** `EXT_meshopt_compression` works out of the box (the decoder is bundled). **Draco** needs a decoder path — set *Draco Decoder Path* (e.g. `https://www.gstatic.com/draco/versioned/decoders/1.5.7/`); the viewer says so explicitly when it meets a Draco file without one. **KTX2/Basis** textures are not supported.\n\nA file whose extension lies is still detected correctly — the binary glTF magic number wins over the name.\n\n## Features\n\n**Camera** — orbit with damping, seven view presets (isometric, front, back, left, right, top, bottom), perspective or orthographic projection, configurable field of view, auto-framing that fits any model regardless of size or origin, and a one-key reset.\n\n**Lighting** — three environments: *Studio* (neutral product lighting), *Daylight* (sky/ground gradient), and *Lights only*. Intensity and tone-mapping exposure are adjustable, live, from the toolbar.\n\n**Display** — wireframe, flat shading, ground grid, axes helper, bounding box, and a soft ground shadow, each toggleable at runtime.\n\n**Animation** — glTF clips are detected automatically: play/pause, clip selector, scrubber, and a speed control. Optional auto-play.\n\n**Model info** — meshes, triangles, vertices, materials, textures, bounding-box dimensions, animation count, file size, and detected format.\n\n**Output** — full screen (button or `F`) and a one-click PNG screenshot of the current view, transparent where the background is.\n\n**Keyboard** — `F` full screen, `R` reset view, `Space` play/pause the animation (or auto-rotate when there is none). Keys are ignored while a control is focused.\n\n**Performance** — rendering stops entirely when the field scrolls out of view or the tab is hidden; the pixel ratio is capped at 2; WebGL context loss is reported rather than failing silently. Every geometry, material, texture, and the renderer itself are disposed on unmount.\n\n## In the editor\n\nEvery display setting is a live control, so editors can inspect a model without touching the field configuration.\n\n![The display options panel: wireframe, flat shading, grid, axes, shadow, bounding box, lighting, brightness, rotation speed, and projection](https://raw.githubusercontent.com/contensu/directus-extension-model-viewer-interface/main/docs/images/toolbar.png)\n\n![The same model in wireframe, showing mesh density](https://raw.githubusercontent.com/contensu/directus-extension-model-viewer-interface/main/docs/images/wireframe.png)\n\nglTF animation clips are detected automatically and get a play/pause button, a clip selector, a scrubber, and a speed control.\n\n![An animated glTF playing, with the animation bar and three detected clips](https://raw.githubusercontent.com/contensu/directus-extension-model-viewer-interface/main/docs/images/animation.png)\n\nFormats that carry no materials — STL, OBJ, PLY — are shaded with the configured model colour.\n\n![An STL rendered with the default model colour](https://raw.githubusercontent.com/contensu/directus-extension-model-viewer-interface/main/docs/images/stl.png)\n\n## Options\n\n| Option | Default | Description |\n| --- | --- | --- |\n| Viewer Height | `420` px | Canvas height outside full screen |\n| Background Color | theme | Stage background; empty keeps the canvas transparent |\n| Lighting | `studio` | `studio`, `sky` (daylight), or `none` |\n| Lighting Intensity | `0.9` | Environment map contribution |\n| Brightness | `0.85` | Tone-mapping exposure |\n| Model Color | `#9aa7bd` | Applied to STL, OBJ, and PLY, which carry no materials |\n| Projection | `perspective` | `perspective` or `orthographic` |\n| Initial View | `iso` | Camera preset applied on load |\n| Field of View | `45` | Perspective only |\n| Rotation Speed | `1.5` | Auto-rotate speed |\n| Auto Rotate | `true` | Slowly orbit the model |\n| Ground Shadow | `true` | Soft shadow under the model |\n| Ground Grid | `false` | Grid at the model's base |\n| Axes Helper | `false` | Red X, green Y, blue Z |\n| Bounding Box | `false` | Wireframe box around the extents |\n| Wireframe | `false` | Render edges only |\n| Flat Shading | `false` | Facets instead of smoothed normals |\n| Show Model Info | `false` | Opens the statistics panel by default |\n| Enable Full Screen | `true` | Full-screen button and `F` |\n| Enable Screenshot | `true` | PNG export button |\n| Auto-play Animations | `true` | Start the first clip on load |\n| Draco Decoder Path | — | Required only for Draco-compressed glTF; a trailing slash is added if missing |\n\nEvery display option is also a live toolbar control, so editors can change the view without touching the field configuration.\n\n> **CSP note:** Directus's default Content-Security-Policy allows `blob:` URLs in `img-src` but not in `connect-src`. three.js's preferred `ImageBitmapLoader` fetches embedded glTF textures from `blob:` URLs, which that CSP silently blocks — models would render untextured white. This extension therefore forces GLTFLoader onto the `<img>`-based `TextureLoader` path, which works under the default CSP with no server configuration.\n\n## Versions\n\nEvery dependency is pinned to an exact version — no `^` ranges. Two of them are\nload-bearing:\n\n- **`vue` must match the copy `@directus/extensions-sdk` resolves internally**\n  (3.5.24 for SDK 18.0.2). A caret lets a newer vue in alongside it, and\n  `vue-tsc` then compares component types across the two instances and crashes\n  mid-elaboration instead of reporting an error. `pnpm why vue` must say\n  *Found 1 version*.\n- **`typescript` stays on 5.x** — `vue-tsc` 3.x cannot drive TS 6 (internal tsc\n  crash) or TS 7 (no `./lib/tsc` export). The extension build itself uses\n  esbuild and does not care; only `pnpm typecheck` does.\n\nThe `directus:extension.host` field is deliberately still a range: it declares\nwhich Directus versions this extension supports, not a dependency to install.\n\n## Development\n\nA Docker Compose stack runs the extension inside a real Directus while you build it:\n\n```sh\npnpm install\npnpm dev            # rebuilds dist/ on every save\ndocker compose up   # http://localhost:8055 — admin@example.com / d1r3ctu5\n```\n\n`dist/` and `package.json` are mounted into the container's extensions folder and\n`EXTENSIONS_AUTO_RELOAD` is on, so saving a file rebuilds the bundle and Directus\nreloads it — refresh the browser to see the change.\n\nThen create a field using the **3D Model Viewer** interface to try it out.\n\n```sh\npnpm typecheck      # vue-tsc\npnpm validate       # directus-extension validate\npnpm test           # vitest\n```\n\n---\n\n## CI & Releases\n\nEvery push runs typecheck, build, and extension validation via GitHub Actions.\nReleases are published to npm manually:\n\n```sh\npnpm build\nnpm publish --access public\n```\n\n---\n\n## Contributing\n\nPull requests are welcome. Please open an issue first to discuss what you would like to change.\n\n---\n\n## License\n\nMIT © Contensu\n","readmeFilename":"README.md"}