Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文

amp-3d-gltf

Description

Компонент для показа 3D-моделей, использующих формат gITF (GL Transmission Format)

Required Scripts

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

Supported Layouts

Примеры

amp-3d-gltf

Этот компонент предназначен для показа 3D-моделей, использующих формат gITF (GL Transmission Format).

Скрипт <script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>
Поддерживаемые макеты fill, fixed, fixed-height, flex-item, responsive
Примеры См. пример amp-3d-gltf на сайте AMP By Example.

Использование

Компонент amp-3d-gltf предназначен для показа 3D-моделей, при создании которых использовался формат gITF.

Примечание. Такие модели могут демонстрироваться только в браузерах, которые поддерживают WebGL.

Пример 

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

Ограничения

В настоящее время поддерживается только версия glTF 2.0.

Неподдерживаемые функции:

  • встроенные камеры
  • анимация.

Поддержка CORS

Компонент amp-3d-gltf выполняет запрос fetch с исходного URL https://<random>.ampproject.net, поэтому в заголовке ответа конечной точки, определенной с помощью атрибута src, должен быть указан элемент access-control-allow-origin: *.ampproject.net. Поскольку исходный URL содержит случайным образом указываемый субдомен, потребуется использовать подстановочный знак.

Атрибуты

src (обязательно) Обязательный атрибут, указывающий на URL, по которому размещен файл glTF.
alpha (необязательно) Логический атрибут, который определяет, является ли прозрачным свободное пространство, содержащееся в элементе canvas. По умолчанию для свободного пространства используется заливка черным цветом. Значение по умолчанию – false.
antialiasing (необязательно) Логический атрибут, который определяет, должно ли использоваться субпиксельное сглаживание. Значение по умолчанию – false.
clearColor (необязательно) Строка, в которой с помощью стиля CSS указан цвет, используемый для заливки свободного пространства.
maxPixelRatio (необязательно) Числовое значение, которое определяет верхний предел значения свойства pixelRatio, используемого при отрисовке. Значение по умолчанию – window.devicePixelRatio.
autoRotate (необязательно) Логический атрибут, который определяет, должно ли автоматически запускаться вращение камеры вокруг центра 3D-модели. Значение по умолчанию – false.
enableZoom (необязательно) Логический атрибут, который указывает, следует ли включать масштабирование. Значение по умолчанию – true.

Действия

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax) Этот элемент контролирует вращение модели. Направление вращения соответствует осям ZYX.
  • Элементам x, y и z присваивается значение в диапазоне от 0 до 1. По умолчанию используется предшествующее значение, которое задает параметры вращения.
  • Элементы, содержащие "Min" и "Max", определяют возможный диапазон вращения и соответствуют величине угла в радианах. Значения по умолчанию: 0 или π * 2.
Пример: если указан вариант setModelRotation(x=0.5, xMin=0, xMax=3.14), значение x в компоненте, относящемся к ротации, будет равно 1,57.

Проверка

С правилами для компонента amp-3d-gltf rules можно ознакомиться в спецификации валидатора AMP.

Требуется дополнительная помощь?

Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.

Перейти на Stack Overflow
Нашли ошибку или недостающую функцию?

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

Перейти на GitHub