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 标头

当请求 gltf 文件时，amp-3d-gltf 组件会从 https://<random>.ampproject.net 向源发出获取请求。在 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 规则。