AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文

amp-3d-gltf

Компонент для показа 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

fill fixed fixed-height flex-item responsive

Examples

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.

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