2 月に、<model-viewer> ウェブ コンポーネントを導入しました。これにより、モデルを独自のサイトでホストしながら、3D モデルをウェブページに宣言的に追加できるようになりました。拡張現実はサポートされていませんでした。つまり、デバイスのカメラフィード上にコンポーネントのソース画像をレンダリングすることはできませんでした。
そのために、iOS 版に Magic Leap と Quick Look のサポートを追加しました。このたび、Android での AR のサポートに ar 属性が追加されたことをお知らせいたします。この属性は、3D モデルを表示するための外部アプリである Scene Viewer という新しい ARCore 機能上に構築されています。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 で受け付けています。