Scene

<div style={{ height:  }}>
  <Clover.Scene iiifContent={url} controls={true} />
</div>

<div style="height: px">
  <clover-scene
    iiif-content="https://iiif.io/api/cookbook/recipe/0608-mvm-3d/v4/manifest.json"
    controls="true">
  </clover-scene>
</div>

API reference

Draws the Presentation 4 Scene you hand it, or loads one itself (iiifContentiiif-content: a Manifest gives its first Scene). Inside a Root<clover-root>, given nothing, it draws the Root’s view when that is a Scene; Body<clover-body> draws a Scene view with it, unless a renderer of yours claims it. It fills its parent, so give the parent a height.

What draws the models, Clover’s own renderer (or three.js, engine="three", which a page opts into), loads the first time a Scene comes near the window.

A drag turns the models and a pinch zooms. The controls sit together in the lower right, over a soft shade, and show while the pointer moves over the view or keyboard focus is in it: zoom and full screen in a row, then the rotate pad. Drag the pad’s disc to turn the models as you would drag the view; the globe on it turns with them and shows where their front is. Each arrow turns them the way it points, a step for a press, or on and on while you hold it, and Reset view, in the pad’s corner, brings them home. With the view focused, the arrow keys turn the models (with Shift, further), R and Shift+R turn them right and left, plus and minus zoom, and 0 resets. A plain wheel scrolls the page.

Examples

In a Viewer

The Viewer draws a Manifest’s Scenes with it, as it draws its Canvases with Canvas.

<Viewer iiifContent="https://iiif.io/api/cookbook/recipe/0608-mvm-3d/v4/manifest.json" />

<clover-viewer
  iiif-content="https://iiif.io/api/cookbook/recipe/0608-mvm-3d/v4/manifest.json"></clover-viewer>

Customizing engine

Clover draws a Scene with its own engine, clover, by default, for its size. Each engine loads the first time a Scene comes near the window:

• engine="clover", Clover’s own WebGL2 renderer: 8 kB gzipped.
• engine="three", three.js: 158 kB gzipped, for what Clover’s does not draw yet.

Choose three.js for what Clover’s engine does not draw yet: glTF’s material extensions beyond unlit, such as clearcoat, transmission and sheen, skins and morph targets (at rest), sparse accessors and a second set of texture coordinates. Clover’s engine says which of these a model needs, in an alert, rather than drawing it wrong. Neither engine draws compressed models (Draco, Meshopt, KTX2) or plays animations yet.

three.js is opt-in: install it, and register it once, before a Scene draws. A page that never does carries none of it.

// npm install three
import { registerThreeEngine } from "@nulib/clover/three";
 
registerThreeEngine();

<!-- three.js comes bundled in it -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@nulib/clover/dist/web-components/three.mjs"
></script>

Both of these are a Scene with the same model, seen from the same camera; only their engine differs.

<Clover.Scene
  iiifContent="https://iiif.io/api/cookbook/recipe/0608-mvm-3d/v4/manifest.json"
  engine="clover"
/>
<Clover.Scene
  iiifContent="https://iiif.io/api/cookbook/recipe/0608-mvm-3d/v4/manifest.json"
  engine="three"
/>

<clover-scene
  iiif-content="https://iiif.io/api/cookbook/recipe/0608-mvm-3d/v4/manifest.json"
  engine="clover"></clover-scene>
<clover-scene
  iiif-content="https://iiif.io/api/cookbook/recipe/0608-mvm-3d/v4/manifest.json"
  engine="three"></clover-scene>

Scene or Body

In a layout, place Body<clover-body>. It handles every container the IIIF Presentation API defines, a Canvas, a Timeline or a Scene, so as your reader moves from one view to the next, it switches between Canvas, Timeline and Scene on the fly. It adds a height, your renderers and the loading mark too.

<Clover.Root iiifContent="https://iiif.io/api/cookbook/recipe/0608-mvm-3d/v4/manifest.json">
  <Clover.Body />
</Clover.Root>

<clover-root
  iiif-content="https://iiif.io/api/cookbook/recipe/0608-mvm-3d/v4/manifest.json">
  <clover-body></clover-body>
</clover-root>

Formats

Scene draws glTF 2.0, the open format for 3D on the web that the IIIF Cookbook’s Scenes paint, as binary (.glb, model/gltf-binary) or JSON (.gltf, model/gltf+json), with its materials (metal and roughness), textures and node hierarchies. A model in any other format shows an alert saying why, never a broken view.

The IIIF Cookbook’s 0608, Simplest Manifest: 3D  draws as it asks: one model at the Scene’s origin, lit and framed by Clover, since the Scene names no camera or light. Models placed by a PointSelector on their target, and turned, scaled and moved by the transforms on their SpecificResource, in order, are drawn too.

Accessibility

The view is announced as a rotatable 3D model, named by the Scene’s label, and its description lists its keys. Everything a drag or a pinch does, a key or a button does too, so the models turn and zoom without a pointer.

The controls are named buttons, each with its key in its popover and at least 24px across, in the order up, left, right, down, Reset view; on a small view they shrink, but never under 24px. The pad’s disc is a convenience for a mouse or a finger, so screen readers skip it: its arrows and the view’s keys do everything it does. The controls stay on screen while keyboard focus is in them. Nothing moves on its own, and a model that cannot be drawn is explained in an alert.

Size

A page with a Scene alone loads the figure beside the title to its first view: the Body, its controls, the reading of the Scene, and Clover’s engine, which loads as the Scene comes near the window. A Viewer’s templates load neither until a Scene shows: the Default template is

94 kB to first view.

What’s next

• A Scene’s own cameras and lights, which Presentation 4 can name.
• Annotations in 3D: comments and links on a point of a model, and their list.
• Scenes within Scenes, sound in a Scene, and models’ animations.
• Panning, and a camera position kept in a share link.