モデルビューアによる拡張現実(AR)

Google は 2 月に <model-viewer> ウェブ コンポーネントを導入しました。 これにより、ウェブページに 3D モデルを宣言的に追加しながら、 試してみましょう拡張現実には対応していませんでした。 コンポーネントのソースイメージをデバイスの 使用できます。

そのために、iOS 版に Magic Leap と Quick Look のサポートを追加しました。現在 ar の追加により、Android での AR のサポートを発表します 属性です。この属性は、Scene Viewer という新しい ARCore 機能を基に構築されています。 3D モデルを表示するための外部アプリScene Viewer について詳しくは Android ブラウザから AR で 3D モデルを表示するをご覧ください。

火星探査機

<model-viewer> を使用して拡張現実を実行する方法を見てみましょう。

属性

ウェブ コンポーネントについては、特別な知識がなくても使用できます。これは、 標準の HTML 要素と同様に動作し、一意のタグとプロパティを持つ 説明します。変更後 <script> タグを使用してインストールする 他の HTML 要素と同様に使用できます。

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

先ほどの記事とほぼ同じです。ここで、 最後に強調していますこれが新しい属性です。

新しいバージョンのインストール

すでに <model-viewer> を使用している場合は、おそらくコンポーネントをインポートしています。 <script> タグを使用して正確に ドキュメントをご覧ください。 Google は継続的に改善を続けています。テストを開始する前に新機能を アップグレードとデプロイを意図的に行う場合は、特定のバージョンを /<model-viewer>。そのためには、次に示すようにファイルの URL にバージョン番号を追加します。 ご覧ください視聴する リリースページ をご覧ください。

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

<script nomodule
  src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>

まとめ

新しいバージョンの <model-viewer> を試して、ご意見をお聞かせください。 問題とフィードバックは GitHub へようこそ