2 月に <model-viewer> ウェブ コンポーネントを導入しました。このコンポーネントを使用すると、独自のサイトでモデルをホストしながら、宣言型の方法でウェブページに 3D モデルを追加できます。未対応だった機能の 1 つが拡張現実でした。つまり、コンポーネントのソース画像をデバイスのカメラフィード上にレンダリングできませんでした。
そのために、Magic Leap と iOS の Quick Look がサポートされるようになりました。このたび、ar 属性が追加され、Android で 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> タグを使用してコンポーネントをインポートしていると考えられます。改善を続けています。アップグレードとデプロイを意図的に行う前に新機能をテストする場合は、特定のバージョンの <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 にお寄せください。