Description Displays GL Transmission Format (gITF) 3D models.
Required Script <script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>
Supported Layouts fill, fixed, fixed-height, flex-item, responsive
Examples See AMP By Example's amp-3d-gltf example.

Usage

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

Note: A WebGL capable browser is required to display these models.

Example

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

Limitations

Currently, only works with glTF 2.0.

Unsupported features:

  • embeded cameras
  • animation

CORS

amp-3d-gltf makes a fetch request from the origin https://<random>.ampproject.net so access-control-allow-origin: *.ampproject.net must be set on the response header of the endpoint specified as src. Wildcard is needed since the origin has a random sub-domain component to it.

Attributes

src [required]

A required attribute that specifies the URL to the gltf file.

alpha [optional]

A Boolean attribute that specifies whether free space on canvas is transparent. By default, free space is filled with black. Default value is false.

antialiasing [optional]

A Boolean attribute that specifies whether to turn on antialiasing. Default value is false.

clearColor [optional]

A string that must contain valid CSS color, that will be used to fill free space on canvas.

maxPixelRatio [optional]

A numeric value that specifies the upper limit for the pixelRatio render option. The default is window.devicePixelRatio.

autoRotate [optional]

A Boolean attribute that specifies whether to automatically rotate the camera around the model's center. Default value is false.

enableZoom [optional]

A Boolean attribute that specifies whether to turn on zoom. Default value is true.

Actions

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax)

sets model rotation. rotation order is ZYX

  • x/y/z - number 0..1, defaults to previous value of model rotation.
  • min/max - angle in radians, defaults to 0 / pi * 2, defines target range

for example setModelRotation(x=0.5, xMin=0, xMax=3.14) will change x component of rotation to 1.57.

Validation

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