Important: this documentation is not applicable to your currently selected format stories!

amp-3d-gltf

Description

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

Required Scripts

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

Supported Layouts

fill fixed fixed-height flex-item responsive

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.net を src として指定する必要があります。オリジンにはランダムなサブドメインコンポーネントがあるため、ワイルドカードが必要です。

属性

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 ルールをご覧ください。

さらに支援が必要ですか？

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする

バグや不足している機能がありますか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする