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 model"。

操作

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 规则。