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
実例
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 です。
setModelRotation(x=0.5, xMin=0, xMax=3.14) は、回転の x 成分を 1.57 に変更します。 |
検証
AMP 検証ツール仕様の amp-3d-gltf ルールをご覧ください。
さらに支援が必要ですか？
このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。
Stack Overflow にアクセスする バグや不足している機能がありますか？AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub にアクセスする