The <model> element

The `model` element allows embedding 3D graphical content into a [[HTML]] document. The `HTMLModelElement` interface then provides a means to interface with the embedded resource. Access-Control-Request-Method

This is a work on progress.

Examples

Adding a model to a document

Enabling interactivity

Supporting multiple formats

Providing fallback content for legacy user agents

Making `model` accessible

The model element

Categories

[=Flow content=].

[=Phrasing content=].

[=Embedded content=].

If the element has an `interactive` attribute: [=interactive content=].

[=Palpable content=].

Contexts in which this element can be used:

Where [=embedded content=] is expected.

Content model:

If the element has a `src` attribute: transparent, a [^picture^] or [^img^], or a media element descendant.

If the element has no `src` attribute: Zero or more source elements, then transparent, optionally intermixed with script-supporting elements.

Tag omission in text/html:

Neither tag is omissible.

Content Attributes:

Global attributes

[^model/autoplay^] — Hint that the resource can be started automatically when the page is loaded

[^model/interactive^] — Allows the user to interact with the model

[^model/crossorigin^] — How the element handles crossorigin requests

[^model/height^] — Vertical dimension

[^model/loading^] — Used when determining loading deferral

[^model/loop^] — Whether to loop the media resource

[^model/muted^] — Whether to mute the media resource by default

[^model/poster^] — Poster frame to show while the resource is loading

[^model/src^] — Address of the resource

[^model/width^] — Horizontal dimension

DOM Interface

The {{HTMLModelElement}} interface provides a means to interface with the embedded resource.

The [^model^] element is used for embedding 3D models into a document.

Content may be provided inside the [^model^] element. User agents should not show this content to the user; it is intended for web browsers which do not support [^model^], to be shown as fallback content.

autoplay attribute

interactive attribute

controls attribute

crossorigin attribute

height attribute

loading attribute

loop attribute

muted attribute

poster attribute

The [^model/poster^] attribute gives the URL of an image file that the user agent can show while 3D content is unavailable. The attribute, if present, must contain a valid non-empty URL potentially surrounded by spaces.

src attribute

width attribute

The `HTMLModelElement` interface

        [Exposed=Window]
        interface HTMLModelElement : HTMLElement {

        };
      

`source` element integration

The `source` element's parent is a [^model^] element

Interaction

Controls

Rendering

Orientation/camera

Embedded content

Whether a [^model^] element is exposing a user interface is not expected to affect the size of the rendering; controls are expected to be overlaid above the page content without causing any layout changes, and may disappear when the user does not need them.

When a [^model^] element represents a poster frame, the poster frame is expected to be rendered at the largest size that maintains the aspect ratio of that poster frame without being taller or wider than the [^model^] element itself, and is expected to be centered in the [^model^] element.

Events

Formats

Overlap with "media elements"

HTML Integrations

Additional integrations into HTML:

Preload link relationship

Integrations with `source` element

Link rel="ar"

CSS integrations

Media Playback States (`:playing`, `:paused`, `:seeking`)

The `:muted` and `:volume-locked` pseudo-classes

Fullscreen Presentation State: the `:fullscreen` pseudo-class

Fullscreen integration

Fetch integration

`"model"` destination

Privacy considerations

Security considerations

CORS

Formats and CORS

Content Security Policy

Format concerns

Accessibility

Requirements for providing text to act as an alternative for 3D content

For authors

For implementers

MIME

MIME Sniffing