ウェブサイトに 3D モデルを追加するのは難しい場合がありますが、<model-viewer> を使用すれば HTML を記述するのと同じくらい簡単です。
ウェブサイトに 3D モデルを追加するのは簡単ではありません。3D モデルは、スマートフォン、デスクトップ、新しいヘッドマウント ディスプレイなど、すべてのブラウザでレスポンシブに動作するビューアで表示するのが理想的です。ビューアは、パフォーマンスとレンダリング品質のプログレッシブ エンハンスメントをサポートする必要があります。古い低電力のスマートフォンから、拡張現実をサポートする新しいデバイスまで、すべてのデバイスのユースケースをサポートする必要があります。最新のテクノロジーに対応している必要があります。パフォーマンスが高く、アクセスしやすいものである必要があります。しかし、そのようなビューアを構築するには、専門的な 3D プログラミング スキルが必要であり、サードパーティのホスティング サービスを使用する代わりに独自のモデルをホストしたいウェブ デベロッパーにとっては、課題となる可能性があります。
一方、<model-viewer> ウェブ コンポーネントを使用すると、3D モデルをウェブページに宣言的に追加しながら、モデルを独自のサイトでホストできます。このコンポーネントの目的は、基盤となるテクノロジーやプラットフォームを理解していなくても、ウェブサイトに 3D モデルを追加できるようにすることです。ウェブ コンポーネントは、レスポンシブ デザインと、一部のデバイスでの拡張現実などのユースケースをサポートしています。ユーザー補助、レンダリング品質、インタラクティブ性に関する機能が含まれています。
ウェブ コンポーネントとは
ウェブ コンポーネントは、標準のウェブ プラットフォーム機能から構築されたカスタム HTML 要素です。ウェブ コンポーネントは、あらゆる目的で標準要素のように動作します。一意のタグがあり、プロパティとメソッドを持つことができ、イベントを発生させて応答できます。つまり、ウェブ コンポーネント（<model-viewer> を含む）を使用するために特別な知識は必要ありません。
この記事では、<model-viewer> に固有の機能について説明します。ウェブ コンポーネントについて詳しく知りたい場合は、webcomponents.org をご覧ください。
<model-viewer> ができること
次の例は、<model-viewer> の機能の一部を示しています。
基本的な 3D モデル
3D モデルの埋め込みは、次のマークアップのように簡単です。glb ファイルを使用することで、このコンポーネントはすべての主要なブラウザで動作します。
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
id="mv-shark"
src="shark.glb"
camera-controls
></model-viewer>
このコードは次のように表示されます。
モーションとインタラクティブ機能を追加する
auto-rotate 属性と camera-controls 属性は、モーションとユーザー コントロールを提供します。これらは、使用可能な属性の一部にすぎません。属性の完全なリストについては、ドキュメントをご覧ください。
<model-viewer src="shark.glb" auto-rotate camera-controls>
ポスター画像を使用して読み込みを遅らせる
すべての 3D モデルは読み込みに時間がかかります。poster 属性を追加すると、モデルが使用可能になるまで画像が表示されます。3D レンダリングと同じように見えるポスター画像は、エディタを使用して生成できます。
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
レスポンシブ デザイン
このコンポーネントは、一部のタイプのレスポンシブ デザインを処理し、モバイルとパソコンの両方に対応します。また、ページ上の複数のインスタンスを管理することもできます。モデルが表示されていない場合は、Intersection Observer を使用してバッテリー消費と GPU サイクルを節約します。
前述のエディタを使用してポスター画像を作成すると、<model-viewer> のアスペクト比がさまざまな画面サイズに対応している場合でも、その 1 つの画像を 3D レンダリングに一致させることができます。
その他の機能
より高度な機能のデモについては、<model-viewer> のドキュメントをご覧ください。これには、地面に投影されたスカイボックスを追加する機能、アニメーション テクスチャを作成する機能、ホットスポットを作成する機能が含まれます。