<model-viewer> は HTML を記述するのと同じくらい簡単です。ウェブサイトに 3D モデルを追加するのは難しい場合があります。
ウェブサイトに 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>
のドキュメントをご覧ください。たとえば、地面投影スカイボックスの追加、アニメーション テクスチャ、ホットスポットの作成が可能です。