• 網站

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 檔案的網址。 * 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