を使用した拡張現実

<model-viewer> ウェブ コンポーネントを使用すると、ウェブ上で 3D モデルを表示、操作でき、3D モデルを拡張現実で配置して操作できます。

ARCore 対応の Android デバイスで ar 属性を持つ <model-viewer> コンポーネントを表示すると、次の例のようなボタンが表示されます。

モデルビューアのスクリーンショット

ARCore 対応デバイスでこのボタンをタップすると、ar-modes 属性の値に応じて、Chrome の WebXR 機能または Scene Viewer アプリを使用してモデルが表示されます。

AR ボタンの外観は、ウェブ コンポーネント スロットを使用してカスタマイズできます。例として <model-viewer> documentation を参照してください。Android アプリやブラウザから AR でインタラクティブな 3D モデルを表示する方法については、Scene Viewer もご覧ください。

<model-viewer> のスタートガイド

ウェブページで <model-viewer> の利用を開始する手順は次のとおりです。

<model-viewer> の依存関係を追加する

unpkg CDN から

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

npm から

npm install @google/model-viewer

次に、優先バンドラを使用して node_modules/model-viewer/dist/model-viewer.min.js に <model-viewer> を追加します。

<model-viewer> タグを含める

HTML ドキュメントに <model-viewer> ウェブ コンポーネントを追加します。

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

<model-viewer> タグを設定する

モデルの表示は、<model-viewer> タグの属性を変更することで設定できます。これらのプロパティは、カメラの移動、モデルのアニメーション、環境情報などのオプションを公開します。<model-viewer> のドキュメントには、設定可能なすべての属性が記載されています。Model Editor ユーティリティでは、<model-viewer> HTML タグを生成して、カメラの位置や照明などのプロパティを設定できます。

モデルエディタのスクリーンショット

モデルの互換性

<model-viewer> では、gltf および glb ファイル形式のモデルがサポートされます。サポートされている glTF 拡張機能の一覧については、three.js GLTFLoader documentation をご覧ください。

モデルが適切に表示されるようにするには、モデルエディタでモデルを確認します。

ブラウザとデバイスのサポート

<model-viewer> を使用してウェブページに 3D モデルを表示する機能は、すべてのエバーグリーン ブラウザでサポートされています。要素がフォーカスされたときにフォーカス リングを非表示にするには、:focus-visible ポリフィルを使用することをおすすめします。

AR 機能を使用するには、ARCore 対応デバイスと Google Play 開発者サービス（AR）のインストールが必要です。webxr AR モードについては、WebXR ブラウザのサポートをご覧ください。デフォルトでは、WebXR がサポートされていない場合、代わりに Scene Viewer が使用されます。

次のステップ