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.
setModelRotation(x=0.5, xMin=0, xMax=3.14) , значение x в компоненте, относящемся к ротации, будет равно 1,57 . |
Проверка
С правилами для компонента amp-3d-gltf rules можно ознакомиться в спецификации валидатора AMP.
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