現在では、拡張現実（AR）と仮想現実（VR）に対応したデバイスをポケットに入れて持ち歩くのが一般的になっています。これらのデバイスで共有するコンテンツは、ますます 3D になっています。この Codelab では、<model-viewer> というウェブ コンポーネントを使用して、ウェブサイトやプログレッシブ ウェブアプリ（PWA）に 3D コンテンツを HTML で画像を追加するのと同じくらい簡単に組み込む方法を学びます。
作業内容
AR ホログラムを表示できるインタラクティブな 3D モデルを含むウェブサイト
学習内容
- ウェブサイトに
<model-viewer>ウェブ コンポーネントをインストールする方法 <model-viewer>を使用して標準のウェブ レイアウトで 3D モデルを表示する方法<model-viewer>をカスタマイズしてプレゼンテーションに個性を加える方法
必要なもの
- ウェブブラウザ。Chrome をおすすめしますが、最新のブラウザ（Firefox、Safari、Edge）でも動作します。
- Node.js とテキスト エディタ、または Glitch へのアクセス。
- HTML、CSS、JavaScript、Chrome DevTools に関する基本的な知識。
この Codelab では、<model-viewer> と 3D モデルを中心に説明します。関連のない概念やコードブロックについては詳しく触れず、コードはコピーして貼るだけの状態で提供されています。
オプション 1 - Glitch
Glitch などのオンライン コード編集ツールを使用して、プロジェクトをホストし、変更を確認できます。
Glitch を始めるには、次のボタンをクリックします。
ここからは、Glitch のコードエディタを使用してファイルを変更できます。準備ができたら、[Show Live] ボタンを使用してアプリケーションの配信を開始します。今すぐ試してみましょう。次のページが表示されます。
オプション 2 - ローカル サーバー
ローカルサーバーを使用すると、お好みのコードエディタを使用できます。
サーバーをインストールする
ローカル ウェブページを配信する方法が必要です。簡単な方法は、Node.js とシンプルな静的コンテンツ サーバーである serve を使用することです。
オペレーティング システムにインストールする方法については、Node.js のウェブサイトをご覧ください。Node.js をインストールしたら、次のコマンドを実行して serve をインストールします。
npm install -g serve
コードをダウンロードする
スターター テンプレートとすべてのサンプル アセットはダウンロードできます。次のリンクをクリックし、コンテンツをプロジェクトを格納するディレクトリに解凍します。
または、git を使用してリポジトリのクローンを作成します。
git clone https://github.com/googlecodelabs/model-viewer-codelab.git
サーバーの実行
上記で抽出したテンプレート ディレクトリ（または git を使用した場合はクローンされたディレクトリ内）から、serve コマンドを実行してウェブサーバーを起動します。
そのアドレス（上のスクリーンショットでは http://localhost:5000 ですが、お使いのマシンでは異なる場合があります）にアクセスすると、次のような非常にシンプルな開始点が表示されます。
まず、Glitch ウェブ エディタまたは（ローカル サーバーを使用している場合は）お気に入りのコードエディタを使用して、index.html ファイルを編集します。
<model-viewer> ライブラリを追加する
<model-viewer> を使用するには、一連の JavaScript ファイルを含める必要があります。
次のセクションでは、<model-viewer> ライブラリをページに追加します。<body> の最後に次のコードを貼り付けます。
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>ライブラリを追加しただけで、コンテンツは変更していません。ページを更新すると、同じコンテンツが表示されます。DevTools コンソールを開くと、WebXR API が見つからないという警告が表示されることがありますが、この API が完全にリリースされるまでは想定される動作です。
互換性を最大限に高める
<model-viewer> は、多くの最新ブラウザをすぐにサポートしています。ただし、ページでサポートできるブラウザの数を増やしたい場合は、追加のポリフィルを含めることができます。
推奨される完全なセットは次のとおりです。これらは、すべての最新ブラウザで優れたエクスペリエンスをサポートするのに役立ちます。詳細については、<model-viewer> ポリフィルのドキュメントをご覧ください。
次のコードを <head> に貼り付けます。
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>--><model-viewer> を追加する
それでは、実際の <model-viewer> タグをページに追加して、3D を表示してみましょう。既存の <p> 要素を次のコードに置き換えます。
<model-viewer src="third_party/Astronaut/Astronaut.glb"
alt="A 3D model of an astronaut">
</model-viewer>ここで言及すべき属性は 2 つだけです。
src属性は、3D モデルの読み込み元を指定します。この例では、CC-BY ライセンスに基づいて利用可能になっている Poly の Astronaut モデルを使用しています。alt属性には、アクセシビリティのためのモデルの代替テキストの説明が含まれています。
これらの属性は、どちらも img タグの属性とよく似ています。
再読み込みすると、宇宙飛行士が表示されます。
良い傾向です。ウェブ上に 3D モデルが表示されます。
次のステップでは、インタラクティビティとモーションをさらに試したり、要素の外観を変更したり、AR を試したりします。
モデルにインタラクティブ機能を追加してみましょう。モデルがインタラクティブであることをユーザーに知らせる（また、モデルをアピールする）ために、デフォルトでモデルを回転させます。その後、ユーザーがマウスまたはタッチでモデルを自分で動かせるように、コントロールを有効にします。
これを行うには、<model-viewer> 要素に auto-rotate 属性と camera-controls 属性を追加します。
<model-viewer src="third_party/Astronaut/Astronaut.glb"
auto-rotate camera-controls
alt="A 3D model of an astronaut">
</model-viewer>ページを更新すると、宇宙飛行士がゆっくりと回転します。モデルをドラッグ（マウスをクリックして移動するか、タッチ対応デバイスの場合は指でドラッグ）すると、モデルが回転します。
これらの機能を組み合わせることで、ユーザーはこれが単なる静止画像ではないことを認識し、インタラクティブな感覚を得て、モデルの背面を見ることができます。
動きができたので、外観を調整してモデルを魅力的にしてみましょう。
モデルを更新する
これらの変更（特に照明の変更）の一部は、特定のモデルで最も効果を発揮します。まず、src 属性を新しいモデル third_party/DamagedHelmet/DamagedHelmet.gltf（Sketchfab でクリエイティブ・コモンズ表示 - 非営利ライセンスでリリース）を参照するように更新します。要素全体のソースは次のようになります。
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
auto-rotate camera-controls
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>このモデルは、これから行う変更の一部を示しています。
背景色を変更する
まず、背景色を変更して、モデルがページ上で目立つようにします。<model-viewer> タグに次の属性を追加します。
background-color="#70BCD1"
環境マップを設定する
環境マップは、モデルに反映される囲まれたシーンを提供し、照明構成を指定するために使用されます。デフォルトの照明は優れています（ARCore の Scene Viewer の照明と互換性があります）。ただし、カスタム環境を使用している場合や、達成しようとしている結果に固有の照明が必要な場合があります。環境画像属性を指定します（studio_small_07_1k.hdr は hdrihaven.com から取得したものです）。
environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"
影を追加する
オブジェクトに影を付けると、シーンに奥行きが生まれます。次の属性を <model-viewer> 要素に追加すると、影が付きます。
shadow-intensity="1"
照明の強度を変更する
モデルが少し暗いので、少し明るくして、詳細を確認できるようにしましょう。デフォルトのステージ照明と、追加した環境マップの照明は、それぞれ個別に調整できます。以下のコードを追加するだけで済みます。
stage-light-intensity="3" environment-intensity="2"これらの変更はそれぞれごくわずかですが、モデルは大幅に改善されました。
次に、代替の表示モードを見ていきましょう。
拡張現実（AR）を利用できるデバイスが増えています。これらのモードの中には、トリガーが難しいものや特別なコードが必要なものもありますが、<model-viewer> はそうした複雑さをすべて処理できます。
ARCore の Scene Viewer
サポートされているデバイスでは、<model-viewer> で ARCore の Scene Viewer をトリガーできます。<model-viewer> 要素に ar 属性を追加します。これで完了です。
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
ar
auto-rotate camera-controls
background-color="#70BCD1"
shadow-intensity="1"
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>最新の ARCore を搭載した対応デバイスでこのページを表示すると、追加のアイコンが表示されます（下の画像を参照）。クリックすると、シーン エクスプローラでモデルが開きます。
その他のデバイス - iOS Quick Look、Magic Leap、WebXR
他の多くのデバイスでは、もう少し作業が必要になります。
iOS では、ios-src 属性を使用すると、3D モデルの追加の USDZ バージョン（iOS で必要）を指定できます。この属性を指定すると、対応する iOS デバイスのモデルに標準の AR クイックルック アイコンが表示されます。USDZ について詳しくは、Apple のデベロッパー向けドキュメントをご覧ください。
Magic Leap デバイスでは、magic-leap 属性により AR サポートが有効になります。また、prismatic.js ライブラリ（オプションのポリフィルに含まれていますが、コメントアウトされています）を含める必要があり、3D モデルは .glb ファイル（.gltf ではない）である必要があります。
<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>カメラの初期角度と位置を制御できます。この制御により、ヘルメットのデフォルト ビューをユーザーに適切に表示できます。<model-viewer> タグに次のスニペットを追加します。
camera-orbit="-20deg 75deg 2m"
もちろん、これらのモデルはレスポンシブ ページなど、他のコンテンツでも使用できます。レスポンシブ ウェブページの作成はこの Codelab の範囲外ですが、詳しくは、レスポンシブ ウェブデザインの基礎をご覧ください。
リポジトリにサンプルページが含まれています。ワイドスクリーン（パソコンなど）で responsive.html を確認します。
同じページを狭いビューポート（モバイル デバイスなど）で表示した場合:
ウェブに 3D コンテンツを埋め込みました。お疲れさまでした。
次のステップ
他にも多くの構成オプションがあります。詳細については、オンライン ドキュメントまたはコードをご覧ください。
モデルを特定したら、次のステップについて検討します。
- 一部のモデルは非常に大きくなる可能性があります。このような場合でも、<model-viewer> には優れたエクスペリエンスを提供するためのいくつかの方法が用意されています。詳しくは、遅延読み込みのドキュメント ページをご覧ください。
- アニメーション モデルはとても楽しいものです。モデルで定義されたアニメーションの有効化（および切り替え）について詳しくは、アニメーションのページをご覧ください。
- これはウェブであり、モデルをウェブページに埋め込んでコンテンツを補完できます。
開発プロセスは GitHub で公開されています。皆様からのご意見、ご感想をお待ちしております。