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

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">

レスポンシブ デザイン

このコンポーネントは、一部のタイプのレスポンシブ デザインを処理し、モバイルとパソコンの両方にスケーリングします。また、1 つのページ上の複数のインスタンスを管理することもできます。また、モデルが表示されていないときは Intersection Observer を使用して、バッテリーの電力と GPU サイクルを節約できます。

前述のエディタを使用してポスター画像を作成すると、<model-viewer> のアスペクト比がさまざまな画面サイズに対応する場合でも、1 つの画像を 3D レンダリングと一致させることができます。

反応性を表す複数の宇宙服の画像。
反応性を表す複数の宇宙服の画像。

その他の機能

より高度な機能のデモについては、<model-viewer> のドキュメントをご覧ください。たとえば、地面投影スカイボックスの追加、アニメーション テクスチャホットスポットの作成が可能です。