• 網站

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 撰寫