3D モデルをウェブサイトに追加するのは難しい場合がありますが、<model-viewer> は HTML を記述するのと同じくらい簡単です。

Joe Medley
Joe Medley

ウェブサイトに 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> のドキュメントで、より高度な機能のデモを確認する。たとえば、地面に投影されたスカイボックスを追加したり、アニメーション テクスチャホットスポットを作成したりできます。