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 規則。