mdn · zachernuk · Jun 5, 2025
@@ -0,0 +1,41 @@
+---
+title: "HTMLModelElement: autoplay property"
+short-title: autoplay
+slug: Web/API/HTMLModelElement/autoplay
+page-type: web-api-instance-property
+browser-compat: api.HTMLModelElement.autoplay
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`HTMLModelElement.autoplay`** property reflects the [`autoplay`](/en-US/docs/Web/HTML/Reference/Elements/model#autoplay) HTML attribute, indicating whether playback should automatically begin as soon as the model resource is ready and renderable.
+
+## Value
+
+A boolean value which is `true` if the model element will begin playback as soon as the resource is ready.
+
+## Examples
+
+```html
+<model id="model">
+  <source src="teapot_animated.usdz" type="model/vnd.usdz+zip" />
+</model>
+```
+
+```js
+// false is the default value
+document.querySelector("#model").autoplay = false;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLModelElement")}}: Interface used to define the `HTMLModelElement.autoplay` property
+- {{HTMLElement("audio")}}, {{HTMLElement("video")}}
@@ -0,0 +1,33 @@
+---
+title: "HTMLModelElement: boundingBoxCenter property"
+short-title: boundingBoxCenter
+slug: Web/API/HTMLModelElement/boundingBoxCenter
+page-type: web-api-instance-property
+browser-compat: api.HTMLModelElement.boundingBoxCenter
+---
+
+{{APIRef("HTML DOM")}}
+
+Once a model resource has is ready and renderable, the **`HTMLModelElement.boundingBoxCenter`** property indicates the center of the axis-aligned bounding box (AABB) of a model resource's contents, irrespective of their size.
+
+> [!NOTE]
+> The values for the bounding box information remains constant for the lifetime of the model. If a model contains animated content, the values of `boundingBoxCenter` and `boundingBoxExtents` will reflect the state of the model on the first frame of the animation, or the bounding box of the skeletal bind pose, if a [skeletal animation](https://en.wikipedia.org/wiki/Skeletal_animation) is present.
+
+## Value
+
+A {{domxref("DOMPointReadOnly")}} that reflects the center in X, Y, and Z of the model resource. For example, both a 1m cube centered on the origin and one centered at (100,0,0) will have a `boundingBoxExtents` value of (1,1,1), but the offset cube's `boundingBoxCenter` will be (100,0,0) and the origin-centered one will be (0,0,0).
+
+> [!NOTE]
+> While there are many useful computations of an object's center or size, such as [center of mass](https://en.wikipedia.org/wiki/Center_of_mass) or mean vertex position, the bounding box center and extents exclusively refer to the bounding box between the minimum and maximum position of the model's vertices in X, Y, and Z.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLModelElement")}}: Interface used to define the `HTMLModelElement.boundingBoxCenter` property
@@ -0,0 +1,34 @@
+---
+title: "HTMLModelElement: boundingBoxExtents property"
+short-title: boundingBoxExtents
+slug: Web/API/HTMLModelElement/boundingBoxExtents
+page-type: web-api-instance-property
+browser-compat: api.HTMLModelElement.boundingBoxExtents
+---
+
+{{APIRef("HTML DOM")}}
+
+Once a model resource is ready and renderable, the **`HTMLModelElement.boundingBoxExtents`** property indicates the extents (or size) of the axis-aligned bounding box (AABB) of the model contents, irrespective of their location.
+
+> [!NOTE]
+> The values for the bounding box information remains constant for the lifetime of the model. If a model contains animated content, the values of `boundingBoxCenter` and `boundingBoxExtents` will reflect the state of the model on the first frame of the animation, or the bounding box of the skeletal bind pose, if a [skeletal animation](https://en.wikipedia.org/wiki/Skeletal_animation) is present.
+
+## Value
+
+A {{domxref("DOMPointReadOnly")}} that reflects the Extents in X, Y, and Z of the model resource. For example, both a 1m cube centered on the origin and one centered at (100,0,0) will have a `boundingBoxExtents` value of (1,1,1), but the offset cube's `boundingBoxCenter` will be (100,0,0) and the origin-centered one will be (0,0,0).
+
+> [!NOTE]
+> While there are many useful computations of an object's center or size, such as [center of mass](https://en.wikipedia.org/wiki/Center_of_mass) or mean vertex position, the bounding box center and extents exclusively refer to the bounding box between the minimum and maximum position of the model's vertices in X, Y, and Z.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLModelElement")}}: Interface used to define the `HTMLModelElement.boundingBoxExtents` property
+- {{HTMLElement("audio")}}, {{HTMLElement("video")}}
@@ -0,0 +1,34 @@
+---
+title: "HTMLModelElement: currentSrc property"
+short-title: currentSrc
+slug: Web/API/HTMLModelElement/currentSrc
+page-type: web-api-instance-property
+browser-compat: api.HTMLModelElement.currentSrc
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`HTMLModelElement.currentSrc`** property contains the URL of the chosen model resource. This will be set when the User Agent selects a model resource based on the accepted file types. The value is an empty string if no `src` attribute is present or valid {{HTMLElement("source")}} elements are found.
+
+## Value
+
+A string containing the absolute URL of the chosen model source; it will be one of the resources listed by the {{domxref("HTMLSourceElement")}} contained within the model element, or the value of the `src` attribute if no {{HTMLElement("source")}} elements are provided.
+
+## Examples
+
+```js
+const obj = document.createElement("model");
+console.log(obj.currentSrc); // ""
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLModelElement")}}: Interface used to define the `HTMLModelElement.currentSrc` property
@@ -0,0 +1,44 @@
+---
+title: "HTMLModelElement: currentTime property"
+short-title: currentTime
+slug: Web/API/HTMLModelElement/currentTime
+page-type: web-api-instance-property
+browser-compat: api.HTMLModelElement.currentTime
+---
+
+{{APIRef("HTML DOM")}}
+
+The {{domxref("HTMLModelElement")}} interface's **`currentTime`** property specifies the current model's playback time
+in seconds.
+
+Changing the value of `currentTime` seeks the model's animation to the new time.
+
+## Value
+
+A double-precision floating-point value indicating the current playback time in seconds.
+
+If the model is not yet playing, the value of `currentTime` indicates the time position within the media at which playback will begin once the {{domxref("HTMLModelElement.play", "play()")}} method is called.
+
+Setting `currentTime` to a new value seeks the model animation to the given time, if the animation is available. The time is clamped to the duration of the model animation, given as {{domxref("HTMLModelElement.duration", "duration")}}.
+
+For models without an animation, the duration is set to 0, and any attempt to set `currentTime` will revert to 0.
+
+> [!NOTE]
+> A model's `currentTime` and `duration` are unaffected by changes to its animation's `playbackRate`.
+
+## Examples
+
+```js
+const model = document.createElement("model");
+console.log(model.currentTime);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
@@ -0,0 +1,35 @@
+---
+title: "HTMLModelElement: duration property"
+short-title: duration
+slug: Web/API/HTMLModelElement/duration
+page-type: web-api-instance-property
+browser-compat: api.HTMLModelElement.duration
+---
+
+{{APIRef("HTML DOM")}}
+
+The _read-only_ {{domxref("HTMLModelElement")}} property **`duration`** indicates the length of the element's model animation, specified in seconds.
+
+## Value
+
+A double-precision floating-point value indicating the duration of the model's animation in seconds. If no model data is available, the value `NaN` is returned. If the element's model resource doesn't have an animation, the value is returned as `0`.
+
+> [!NOTE]
+> A model's `currentTime` and `duration` are unaffected by changes to its animation's `playbackRate`.
+
+## Examples
+
+```js
+const obj = document.createElement("model");
+console.log(obj.duration); // NaN
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
@@ -0,0 +1,50 @@
+---
+title: "HTMLModelElement: entityTransform property"
+short-title: entityTransform
+slug: Web/API/HTMLModelElement/entityTransform
+page-type: web-api-instance-property
+browser-compat: api.HTMLModelElement.entityTransform
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`HTMLModelElement.entityTransform`** property reflects the model's visual transformation, indicating the translation, rotation and scale of the model contents, specified as a {{domxref("DOMMatrixReadOnly")}} that may be read or overwritten (unless the model is in a special stage mode such as `orbit`, see the discussion of [`"orbit" stage mode`](/en-US/docs/Web/API/HTMLModelElement/stageMode#orbit_mode).)
+
+## Value
+
+A {{domxref("DOMMatrixReadOnly")}} that can be read for the current transformation, or written to in order to update the view of the model contents. It is also possible to assign it a {{domxref("DOMMatrix")}} that include the self-mutating transformations such as [`translateSelf`](/en-US/docs/Web/API/DOMMatrix/translateSelf),[`rotateSelf`](/en-US/docs/Web/API/DOMMatrix/rotateSelf) etc.
+
+> [!NOTE]
+> Some transformations cannot be set on a model. Attempts to set transformations containing a non-uniform `scale` component or any shearing will be ignored and result in an error.
+
+### Default value
+
+By default, the `entityTransform` of a model element will be computed to contain the 3D contents of the model resource within the displayed bounds of the DOM element present on the page. That is, the model's height (or Y-extents) will fit within the element's `height` value, the model's width (or X-extents) will fit within the element's `width` value. The model's horizontal and vertical (XY) center will be centered in the viewport, and the model's Z-depth will be set back in -Z to be fully contained in the viewport.
+
+### Natural units
+
+A model resource will be automatically scaled to fit within the initially-assigned viewport allocated. However, the scale _relationship_ between model contents and the viewport allocated obey the implied CSS scale of 1 centimeter representing 37.8 CSS pixels.
+
+> [!NOTE]
+> For privacy reasons, a user agent does not provide any indication of the true, real-world scale of a model or the containing window.
+
+## Examples
+
+```js
+// Set the model to the identity transform. A 10cm object would have an
+// apparent size of 10 * 32.8 = 328 CSS pixels.
+document.querySelector("#model").entityTransform = new DOMMatrix();
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLModelElement")}}
+- {{HTMLElement("audio")}}, {{HTMLElement("video")}}
@@ -0,0 +1,71 @@
+---
+title: "HTMLModelElement: environmentMap property"
+short-title: environmentMap
+slug: Web/API/HTMLModelElement/environmentMap
+page-type: web-api-instance-property
+browser-compat: api.HTMLModelElement.environmentMap
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`environmentMap`** property reflects the [`environmentmap`](/en-US/docs/Web/HTML/Reference/Elements/model#environmentmap) HTML attribute, and represents the {{glossary("URL")}} of the image file providing the lighting information for a given model, interpreted as an [equirectangular](https://en.wikipedia.org/wiki/Equirectangular_projection) projection. When an environment map resource is ready to participate in rendering, the model's {{domxref("HTMLModelElement.environmentMapReady", "environmentMapReady")}} promise is resolved, or is rejected if the resource cannot load or be used.
+
+<table><tr><td>
+
+![An equirectangular projection of Earth](earth-equirect.svg)
+An equirectangular projection of Earth
+
+</td><td>
+
+![The projection of the equirectangular back to a sphere](earth-spherical.svg)
+The projection of the equirectangular back to a sphere
+
+</td></tr></table>
+
+If a custom environment map is not set, a generic, User Agent-specified environment map is used.
+
+## Usage notes
+
+> [!NOTE]
+> While environment map resources are provided as images, an appropriate resource should contain a very high dynamic range of luminance values, and may not be appropriate to display directly. While a typical display image may specify a contrast ratio of 3000:1, the contrast ratio for an environment map image may be 100,000:1 or greater.
+
+## Examples
+
+This example demonstrates how to specify a custom environment map, both in JavaScript and directly in HTML:
+
+```html
+<model
+  environmentMap="grassland.exr"
+  style="background-color:#ff8080;"
+  alt="a teapot in a sunny grassland">
+  <source src="teapot.glb" type="model/gltf+binary" />
+  <source src="teapot.usdz" type="model/vnd.usdz+zip" />
+</model>
+<button onclick="goToTundra()"></button>
+```
+
+```js
+const modelElem = document.querySelector("model");
+
+async function goToTundra() {
+  modelElem.alt = "a teapot in a frozen tundra";
+  modelElem.environmentMap = "tundra.exr";
+  await modelElem.environmentMapReady;
+  modelElem.style.backgroundColor = "#8080ff";
+}
+```
+
+In this example, the teapot model is initially presented in an environment
+that reflects a warm, grassy landscape. Note that while the background color
+is not directly changed, it is often appropriate to update the background color
+in conjunction with a change to the `environmentMap`.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
@@ -0,0 +1,42 @@
+---
+title: "HTMLModelElement: environmentMapReady property"
+short-title: environmentMapReady
+slug: Web/API/HTMLModelElement/environmentMapReady
+page-type: web-api-instance-property
+browser-compat: api.HTMLModelElement.environmentMapReady
+---
+
+{{APIRef("HTML DOM")}}
+
+The {{domxref("HTMLModelElement")}} property **`environmentMapReady`** is a {{jsxref("Promise")}} that reflects the ready-state of a model's [environment map](/en-US/docs/Web/API/HTMLModelElement/environmentMap) resource. It is resolved when a valid environment map resource is downloaded and ready to contribute to rendering, or is rejected if for any reason the resource cannot be used.
+
+> [!NOTE]
+> Because a model's rendering depends _necessarily_ on a valid model resource and _optionally_ on an environment map resource, it is important to wait for both to expect a given model to be ready for display, if a custom environment map is expected.
+
+## Examples
+
+This example demonstrates how to confirm that both a model's scene and environment map resources are ready for rendering, and how to gracefully address failed parsing:
+
+```js
+const modelElem = document.getElementById("model");
+
+model.setAttribute("src", "./teapot.usdz");
+model.setAttribute("environmentmap", "./night.hdr");
+Promise.all([model.ready, model.environmentMapReady])
+  .then(enhanceWithModel)
+  .error(showModelError);
+```
+
+In this example, the display of the model is prevented until both resource Promises are resolved. If processing fails on either resource, the `showModelError()` function is called to display any relevant fallback representation to the user.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`HTMLModelElement.ready`](/en-US/docs/Web/API/HTMLModelElement/ready)