Layers

3D

@plutocms/3d adds 3D models to the media library, with a preview image and a viewer for the admin and the site.

@plutocms/3d is an add-on layer. An add-on adds a feature on top of core, for every backend: the Git CMS or Supabase. This one adds 3D models (.glb) to the media library.

What the layer gives

Upload: the media library takes .glb files, up to 25 MB each. Without the layer, core does not take 3D files.
A preview image: at upload, the browser renders a still image of the model (1024 px, WebP). A site shows it as the thumbnail, with no 3D code. Make a preview in the details of a file makes one for an older model.
The viewer: the details of a model in the admin show it in 3D. A site uses the same viewer.
A check: a model that links files it does not hold (for example textures outside the file) gets a warning at upload. The upload continues.

three.js loads only in the browser, and only on the pages that show a model.

Install

Install the package first. extends does not install it.

npm install @plutocms/3d

pnpm add @plutocms/3d

yarn add @plutocms/3d

bun add @plutocms/3d

deno add npm:@plutocms/3d

Add it next to the backend layer of your app. It does not extend core itself: the backend layer brings core, so core loads once.

nuxt.config.ts

export default defineNuxtConfig({
  extends: ['@plutocms/supabase-shop', '@plutocms/3d']
})

The shop template of create-pluto has the layer. Its product page shows the model of a product in the gallery.

Show a model on a site

The public API gives the files of an item as media records. A model has mimeType: 'model/gltf-binary' and a preview image.

ProductModel.vue

<template>
  <!-- The preview image. A click starts the viewer. -->
  <Pluto3dPreview :media="model" class="aspect-square" />

  <!-- The viewer at once: drag to turn, scroll or pinch to zoom. -->
  <Pluto3dViewer :media="model" auto-rotate class="aspect-square" />
</template>

Component	Props
`Pluto3dViewer`	`media` or `src`, `alt`, `autoRotate`, `interactive` (`false`: no drag and no zoom)
`Pluto3dPreview`	`media`, `sizes` (of the image), `interactive` (`false`: the image only), `autoRotate`

The viewer shows the preview image while the model loads. It stops rendering when it is off screen, and it frees the GPU memory when it unmounts.

Without @plutocms/3d, PlutoImage of core shows the preview image of a model too.

Limits

.glb only: one file with its textures. A .gltf with separate files does not work.
Meshopt compression works. Draco compression does not, because it needs a decoder file.

Docs

@plutocms/docs lets editors change the pages of a Nuxt Content site in the Pluto admin.

Create a layer

Build your own Pluto layer and plug it into the admin.