amp-3d-gltf

Description

显示 GL 传输格式 (glTF) 的 3D 模型。

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

示例

amp-3d-gltf

显示 GL 传输格式 (glTF) 的 3D 模型。

必需的脚本	`<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 By Example 的 amp-3d-gltf 示例。

用法

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

注意：要显示这些模型，必须使用支持 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 从来源网域 https://<random>.ampproject.net 发出 fetch 请求，因此，必须在指定为 src 的端点的响应标头上设置 access-control-allow-origin: *.ampproject.net。需要使用通配符，因为来源网域包含随机子网域组件。

属性

src [必需]	必需的属性，用于指定 gltf 文件的网址。
alpha [可选]	布尔值属性，用于指定画布上的可用空间是否透明。默认情况下，可用空间用黑色填充。默认值为 `false`。
antialiasing [可选]	布尔值属性，用于指定是否开启防混叠功能。默认值为 `false`。
clearColor [可选]	字符串，必须包含用于填充画布上可用空间的有效 CSS 颜色。
maxPixelRatio [可选]	数值，用于指定 pixelRatio 呈现选项的上限。默认为 `window.devicePixelRatio`。
autoRotate [可选]	布尔值属性，用于指定是否围绕模型中心自动旋转摄像头。默认值为 `false`。
enableZoom [可选]	布尔值属性，用于指定是否开启缩放功能。默认值为 `true`。

操作

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax)

设置模型旋转。旋转顺序为 ZYX

x/y/z - 数字 0..1，默认为模型旋转的上一个值。
min/max - 以弧度表示的角度，默认为 0 / pi * 2，用于定义目标范围

例如 setModelRotation(x=0.5, xMin=0, xMax=3.14) 会将旋转的 x 分量改为 1.57。

验证

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

需要更多帮助？

您已多次阅读本文档，但它仍未能涵盖您的所有问题？也许其他人也这么觉得：在 Stack Overflow 上与他们联系。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub