【model-viwer】WEBページで3Dモデルを操作する方法

3Dモデルを扱う機会があったので、その備忘として記載します。

そもそもWEBブラウザではどの拡張子を利用すればいいのか？

iOSはAppleの規格である「USDZ」を見せ、それ以外の端末では「GLB/GLTF」を参照させるのが良いそうです。

3Dモデルを操作させるには、Three.jsを利用するものと思っていましたが、model-viewerを利用した方が楽に操作することができるそうです。

"model-viewer"とThree.jsの違いについて説明します。
Three.jsは、WebGLを用いて3DグラフィックスをWeb上で表示するためのJavaScriptライブラリです。非常に柔軟で強力なライブラリであり、3Dモデルの読み込み、シーンの作成、ライティング、アニメーション、物理エンジンの統合など、幅広い3Dグラフィックスの機能を提供します。Three.jsは、WebGLの複雑さを抽象化し、開発者が直接的なWebGLコードを扱うことなく、より簡単に3Dコンテンツを作成できるように設計されています。
一方で、model-viewerは、Webページに3Dモデルを簡単に組み込むことができるカスタムWebコンポーネントです。内部的にはThree.jsを使用しており、Three.jsの機能の一部をよりシンプルなAPIとして提供しています。"model-viewer"は特に、ウェブ開発者が3DモデルをHTML要素として直接埋め込むことができるようにすることを目的としています。インタラクションや視覚的なカスタマイズも可能ですが、Three.jsほどの深いカスタマイズや複雑な3Dシーンの構築は想定されていません。
違いの要点:
目的と使いやすさ: "model-viewer"は3DモデルをWebページに簡単に組み込むことを主な目的としており、Three.jsはより複雑な3Dグラフィックスの作成とカスタマイズを目的としています。
機能性: Three.jsはより広範な3Dグラフィックスの機能を提供し、"model-viewer"はその機能のサブセットをよりアクセスしやすい形で提供します。
依存性: "model-viewer"は内部的にThree.jsを使用していますが、ユーザーがThree.jsの詳細を直接扱う必要はありません。
要するに、"model-viewer"はThree.jsの能力を活用しながらも、特定のユースケース（簡単な3Dモデルの埋め込みと表示）に特化して設計されているため、使い分けが可能です。より複雑な3Dアプリケーションやゲームを開発したい場合はThree.js、簡単に3DモデルをWebページに表示したい場合は"model-viewer"が適しています。
chatGPT

利用するモデル

USDZはAppleが配布しているので、それを利用します。

GLBはASPOSEさんのコンバーターにて、上記を変換して用意します。

利用するコード

操作サンプル

ディレクトリ構造

Root
├ toy_biplane_idle.usdz
├ toy_biplane_idle.glb
└ index.html

コード

画面全体にモデルを描画し、見やすいようにグレイ系の背景色を設定しています。

また正常にモデルが読み込まれているかも判定するコードを入れています。

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <title>モデル表示テスト</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        overflow: hidden;
      }
      .view {
        width: 100%;
        height: 100%;
        background-color: #3b423d;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      model-viewer {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <!-- 3Dモデル表示セクション -->
    <div class="view">
      <model-viewer
        src="./toy_biplane_idle.glb"
        ios-src="./toy_biplane_idle.usdz"
        quick-look-browsers="safari chrome"
        alt="3D Model"
        exposure="1"
        camera-controls
        auto-rotate
        ar
        ar-scale="auto"
        camera-orbit="auto auto auto"
        interaction-prompt="auto"
        style="width: 100%; height: 100%"
      >
      </model-viewer>
    </div>

    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@google/model-viewer@latest/dist/model-viewer.min.js"
    ></script>

    <!-- モデルが読み込んでいるかのチェック用 -->
    <script>
      document.addEventListener("DOMContentLoaded", (event) => {
        const modelViewer = document.querySelector("model-viewer");
        if (modelViewer) {
          modelViewer.addEventListener("load", () => {
            console.log("3D model loaded successfully.");
          });
          modelViewer.addEventListener("error", (e) => {
            console.error("Error loading 3D model:", e);
          });
        }
      });
    </script>
  </body>
</html>