amp-3d-gltf

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

用法

amp-3d-gltf 组件显示 gITF 格式的 3D 模型。

示例

<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 组件在请求 gltf 文件时，会从 https://<random>.ampproject.net 向源发起 fetch 请求。在 src 端点的响应标头中设置 access-control-allow-origin:*.ampproject.net，以避免从 AMP 缓存提供服务时出现 CORS 问题。使用通配符来寻址 <random> 子域组件。

属性

src

src 属性指定 gltf 文件位置。

alpha (可选)

使用 alpha 属性指定画布背景的行为。此属性接受布尔值。要启用透明度而不是默认的白色，请将值设置为 true。

antialiasing (可选)

使用 antialiasing 属性指定是否启用抗锯齿。要启用抗锯齿，请将值设置为 true。

clearColor (可选)

clearColor 属性指定 CSS 颜色，例如 #FF8C00。此颜色会填充画布上的可用空间。

maxPixelRatio (可选)

maxPixelRatio 属性为 pixelRatio 渲染选项指定上限。它默认为 window.devicePixelRatio。

autoRotate (可选)

使用 autoRotate 属性启用围绕模型中心的自动旋转。要启用旋转，请将值设置为 true。autorotate 默认为 false。

enableZoom (可选)

使用 enableZoom 属性禁用模型的放大和缩小。要禁用缩放，请将值设置为 false。autororate 默认为 true。

title (可选)

为组件定义一个 title 属性以传播到基础的 <iframe> 元素。默认值为 "GLTF 3D 模型"。

操作

setModelRotation

setModelRotation 操作指定模型的旋转。旋转顺序为 ZYX。

• 使用 x、y 和/或 z 参数指定 x、y 和/或 z 轴的旋转值。此操作接受介于 0 和 1 之间的数字。它默认为先前的值。
• 使用 xMin、xMax、yMin、yMax 和/或 zMin、zMax 参数以弧度为单位指定旋转角度。使用最小值和最大值来定义目标范围。角度范围默认为 0 / pi * 2。

以下操作在触发时将组件的 x 轴旋转更改为 1.57。

setModelRotation((x = 0.5), (xMin = 0), (xMax = 3.14))

样式

以下是样式方面的一些注意事项

• alpha 属性指定透明度。
• 如果背景不是透明的，则 clearColor 属性指定背景的颜色。
• 如果您没有指定背景颜色，amp-3d-gltf 默认为白色背景。

验证

请参阅 AMP 验证器规范中的 amp-3d-gltf 规则。