Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

amp-3d-gltf

Description

Displays GL Transmission Format (gITF) 3D models.

Required Scripts

<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>

Examples

Usage

The amp-3d-gltf component displays 3D models that are in gITF format.

You must use a WebGL-capable browser to display 3D models.

Example

<amp-3d-gltf
  layout="responsive"
  width="320"
  height="240"
  alpha="true"
  antialiasing="true"
  src="path/to/model.glb"
></amp-3d-gltf>

Compatibility

The component supports glTF 2.0, with the following exceptions:

  • Embedded cameras
  • Animation

Set CORS headers

The amp-3d-gltf component makes a fetch request to the origin from https://<random>.ampproject.net when it requests the gltf file. Set access-control-allow-origin:*.ampproject.net on the response header of the src endpoint to avoid CORS issues when served from an AMP cache. Use a wildcard character to address the <random> subdomain component.

Attributes

src

The src attribute specifies the gltf file location.

alpha (optional)

Use the alpha attribute to specify the behavior of the canvas background. This attribute takes a boolean value. To enable transparency instead of the default white, set the value to true.

antialiasing (optional)

Use the antialiasing attribute to specify whether to enable antialiasing. To enable antialiasing, set the value to true.

clearColor (optional)

The clearColor attribute specifies a CSS color, such as #FF8C00. This color fills free space on the canvas.

maxPixelRatio (optional)

The maxPixelRatio attribute specifies an upper limit for the pixelRatio render option. It defaults to window.devicePixelRatio.

autoRotate (optional)

Use the autoRotate attribute to enable automatic rotation around the model's center. To enable rotation, set the value to true. autorotate defaults to false.

enableZoom (optional)

Use the enableZoom attribute to disable zooming in and out of the model. To disable zoom, set the value to false. autororate defaults to true.

Actions

setModelRotation

The setModelRotation action specifies the model's rotation. The rotation order is ZYX.

  • Specify the rotation value of the x, y, and/or z axis with x, y, and/or z arguments. This action accepts a number between 0 and 1. It defaults to the previous value.
  • Specify the angle of rotation in radians with xMin, xMax, yMin, yMax, and/or zMin, zMax arguments. Use a min and a max to define the target range. The angle range defaults to 0 / pi * 2.

The following action changes the x axis of the component’s rotation to 1.57 when fired.

setModelRotation((x = 0.5), (xMin = 0), (xMax = 3.14))

Styling

Here are a few things to keep in mind for style:

  • The alpha attribute specifies transparency.
  • The clearColor attribute specifies the color of the background if it isn't transparent.
  • amp-3d-gltf defaults to a white background if you don't specify a background color.

Validation

See amp-3d-gltf rules in the AMP validator specification.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub