AMP

amp-3d-gltf

GL Transmission Format(glTF)の 3D モデルを表示します。

必須のスクリプト<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>
サポートされるレイアウトfill、fixed、fixed-height、flex-item、responsive
AMP By Example の amp-3d-gltf サンプルをご覧ください。

使用方法

amp-3d-gltf コンポーネントは、glTF 形式の 3D モデルを表示します。

: このモデルを表示するには、WebGL 対応ブラウザが必要です。

<amp-3d-gltf
    layout="responsive"
    width="320"
    height="240"
    alpha="true"
    antialiasing="true"
    src="path/to/model.glb"></amp-3d-gltf>

制限事項

現在のところ、対応しているのは glTF 2.0 だけに限られます。

サポートされていない機能:

  • embeded cameras
  • animation

CORS

amp-3d-gltf は、オリジンの https://<random>.ampproject.net から fetch リクエストを作成します。そのため、エンドポイントのレスポンス ヘッダーで access-control-allow-origin: *.ampproject.netsrc として指定する必要があります。オリジンにはランダムなサブドメイン コンポーネントがあるため、ワイルドカードが必要です。

属性

src(必須)gltf ファイルの URL を指定する必須属性。
alpha(省略可)キャンバスの空きスペースを透明にするかどうかを指定するブール値属性。デフォルトでは、空きスペースは黒色で塗りつぶされます。 デフォルト値は false です。
antialiasing(省略可)アンチエイリアスをオンにするかどうかを指定するブール値属性。デフォルト値は false です。
clearColor(省略可)キャンバスの空きスペースを塗りつぶす際に使用する有効な CSS 色を格納した文字列。
maxPixelRatio(省略可)pixelRatio レンダリング オプションの上限を指定する数値。デフォルトは window.devicePixelRatio です。
autoRotate(省略可)モデルの中央を中心にしてカメラを自動的に回転するかどうかを指定するブール値属性。デフォルト値は false です。
enableZoom(省略可)ズームをオンにするかどうかを指定するブール値属性。デフォルト値は true です。

アクション

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax)モデルの回転を設定します。回転順序は ZYX です。
  • x / y / z - 0~1 の数値で指定します。デフォルトは、直前のモデル回転値です。
  • min / max - 角度をラジアンで指定します。デフォルトは 0 / pi * 2 で、ターゲット範囲を定義します。
たとえば、setModelRotation(x=0.5, xMin=0, xMax=3.14) は、回転の x 成分を 1.57 に変更します。

検証

AMP 検証ツール仕様の amp-3d-gltf ルールをご覧ください。

ご不明な点がある場合

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub