3D モデルをウェブサイトに追加するのは難しい場合がありますが、<model-viewer> は HTML を記述するのと同じくらい簡単です。
ウェブサイトに 3D モデルを追加するのは難しい作業です。3D モデルは、スマートフォン、パソコン、新しいヘッドマウント ディスプレイなど、すべてのブラウザでレスポンシブに動作できるビューアで表示するのが理想的です。ビューアは、パフォーマンスとレンダリング品質の向上のために、プログレッシブ エンハンスメントをサポートする必要があります。古い低電力のスマートフォンから、拡張現実をサポートする新しいデバイスまで、すべてのデバイスでユースケースをサポートする必要があります。最新のテクノロジーに沿って更新する必要があります。パフォーマンスが高く、アクセスしやすい必要があります。ただし、このようなビューアを構築するには、特別な 3D プログラミング スキルが必要です。サードパーティのホスティング サービスを使用するのではなく、独自のモデルをホストしたいウェブ デベロッパーにとっては、難しい作業になる可能性があります。
一方、<model-viewer>
ウェブ コンポーネントを使用すると、独自のサイトでモデルをホストしながら、ウェブページに宣言的に 3D モデルを追加できます。このコンポーネントの目的は、基盤となるテクノロジーとプラットフォームを理解しなくても、3D モデルをウェブサイトに追加できるようにすることです。このウェブ コンポーネントは、レスポンシブ デザインと、一部のデバイスでの拡張現実などのユースケースをサポートしています。アクセシビリティ、レンダリング品質、インタラクティビティの機能が含まれています。
ウェブ コンポーネントとは
ウェブ コンポーネントは、標準のウェブ プラットフォーム機能から構築されたカスタム HTML 要素です。ウェブ コンポーネントは、すべてのインテントと目的に対して標準要素と同様に動作します。独自のタグがあり、プロパティとメソッドを持ち、イベントを発生させて応答できます。つまり、<model-viewer>
はもちろん、任意のウェブ コンポーネントを使用するのに特別な知識は必要ありません。
この記事では、<model-viewer>
に固有の機能について説明します。ウェブ コンポーネントについて詳しくは、webcomponents.
<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>
のドキュメントで、より高度な機能のデモを確認する。たとえば、地面に投影されたスカイボックスを追加したり、アニメーション テクスチャやホットスポットを作成したりできます。