• 网站

amp-3d-gltf

简介

amp-3d-gltf 组件显示 glTF 格式的 3D 模型。有关此元素的文档可以在此处找到。

注意：需要支持 WebGL 的浏览器才能显示这些模型。

设置

在标头中导入 amp-3d-gltf 组件。

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

基本用法

通过 src 属性嵌入 3D 模型。

<amp-3d-gltf layout="fixed" width="320" height="240" src="/static/samples/glTF/DamagedHelmet.glb"></amp-3d-gltf>

自定义

您可以使用以下属性自定义 3D 模型：* src - 一个必需属性，指定 glTF 文件的 URL。* alpha - 一个布尔属性，指定画布上的空白区域是否透明。默认情况下，空白区域填充为黑色。默认值为 false。* antialiasing - 一个布尔属性，指定是否启用抗锯齿。默认值为 false。* maxPixelRatio - 一个数值，指定 pixelRatio 渲染选项的上限。默认值为 window.devicePixelRatio。* autoRotate - 一个布尔属性，指定是否自动围绕模型的中心旋转相机。默认值为 false。* enableZoom - 一个布尔属性，指定是否启用缩放。默认值为 true。

<amp-3d-gltf layout="fixed" width="320" height="240" alpha="true" antialiasing="true" autorotate="true" enablezoom="false" src="/static/samples/glTF/DamagedHelmet.glb"></amp-3d-gltf>

• 由 @mixtur 撰写