#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
  • websites

amp-3d-gltf

Introduction

The amp-3d-gltf component displays 3D models that are in glTF format. The doc describing this element can be found here

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

Setup

Import the amp-3d-gltf component in the header.

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

Basic Usage

Embed 3d model via the src attribute.

<amp-3d-gltf layout="fixed"
  width="320"
  height="240"
  src="/static/samples/glTF/DamagedHelmet.glb"></amp-3d-gltf>

Customization

You can customize the 3D model using these attributes: src - A required attribute that specifies the URL to the glTF file. alpha - 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 - A Boolean attribute that specifies whether to turn on antialiasing. Default value is false. maxPixelRatio - A numeric value that specifies the upper limit for the pixelRatio render option. The default is window.devicePixelRatio. autoRotate - A Boolean attribute that specifies whether to automatically rotate the camera around the model's center. Default value is false. enableZoom - A Boolean attribute that specifies whether to turn on zoom. Default value is true.

<amp-3d-gltf layout="fixed"
  width="320"
  height="240"
  alpha="true"
  antialiasing="true"
  autorotate="true"
  enablezoom="false"
  src="/static/samples/glTF/DamagedHelmet.glb"></amp-3d-gltf>
Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow
Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub