amp-3d-gltf

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

用法

amp-3d-gltf 組件會顯示 gITF 格式的 3D 模型。

範例

<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 組件要求 gltf 檔案時，會向來自 https://<random>.ampproject.net 的來源發出提取要求。在 src 端點的回應標頭中設定 access-control-allow-origin:*.ampproject.net，以避免從 AMP 快取伺服時發生 CORS 問題。使用萬用字元來處理 <random> 子網域組件。

屬性

src

src 屬性會指定 gltf 檔案位置。

alpha (選填)

使用 alpha 屬性指定畫布背景的行為。此屬性接受布林值。若要啟用透明度而非預設的白色，請將值設為 true。

antialiasing (選填)

使用 antialiasing 屬性指定是否啟用反鋸齒。若要啟用反鋸齒，請將值設為 true。

clearColor (選填)

clearColor 屬性會指定 CSS 色彩，例如 #FF8C00。此色彩會填滿畫布上的可用空間。

maxPixelRatio (選填)

maxPixelRatio 屬性會指定 pixelRatio 渲染選項的上限。預設值為 window.devicePixelRatio。

autoRotate (選填)

使用 autoRotate 屬性啟用模型中心周圍的自動旋轉。若要啟用旋轉，請將值設為 true。autorotate 預設為 false。

enableZoom (選填)

使用 enableZoom 屬性停用模型的縮放功能。若要停用縮放，請將值設為 false。autororate 預設為 true。

title (選填)

定義組件的 title 屬性，以傳播至底層的 <iframe> 元素。預設值為 "GLTF 3D 模型"。

動作

setModelRotation

setModelRotation 動作會指定模型的旋轉。旋轉順序為 ZYX。

• 使用 x、y 和/或 z 引數指定 x、y 和/或 z 軸的旋轉值。此動作接受介於 0 到 1 之間的數字。預設值為先前的值。
• 使用 xMin、xMax、yMin、yMax 和/或 zMin、zMax 引數指定以弧度為單位的旋轉角度。使用最小值和最大值來定義目標範圍。角度範圍預設為 0 / pi * 2。

以下動作會在觸發時將組件 x 軸的旋轉變更為 1.57。

setModelRotation((x = 0.5), (xMin = 0), (xMax = 3.14))

樣式

以下是一些樣式方面需要注意的事項

• alpha 屬性指定透明度。
• clearColor 屬性指定背景色彩 (如果背景不是透明的)。
• 如果您未指定背景色彩，amp-3d-gltf 預設為白色背景。

驗證

請參閱 AMP 驗證器規格中的 amp-3d-gltf 規則。