• 網站

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