Zenn
👑

1行で3DモデルをWeb上で表示・操作する

2022/08/13に公開
Web Components
JavaScript
WebGL
modelviewer
tech

TL;DR

[ Three.js ] 3D猫はいかがですか？という記事を見かけたので、
glTFを表示するだけなら、three.jsやWebGLの知識がなくても、<model-viewer /> というGoogleが開発しているWeb Componentsのライブラリを使えば、1行で簡単に実装することができます。

↓せっかくなので元記事の3D猫を <model-viewer /> を使って表示してみました。

  <model-viewer alt="cat" src="scene.gltf" camera-controls></model-viewer>

元記事の最後の感想にあった

3Dモデルを入れたmixerを再生するだけではなく、requestAnimationFrameを利用して定期的に描画しないといけないところがややこしかったです。

という問題はライブラリの中で解消されているので、まるで魔法かのように宣言的な記述のみでその恩恵にあずかることができます。

もちろん、Web ComponentsはWeb標準の仕組みなので、React, Vue, AngularなどのSPAライブラリの中でも問題なく使用することができます。

また、PCはもちろんモバイルでも問題なく動作します。

使い方

非常に簡単です。

  1. CDNを使う場合

公式のトップページに載っているCDNリンクを利用して、htmlのheadタグ内でmodel-viewerをダウンロードさせます。

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  1. npmを使う場合
npm i @google/model-viewer

でプロジェクトにパッケージをインストールして、
使用したい箇所で


// Reactプロジェクトを例とします。
import '@google/model-viewer'

export function Gallery() {
  return (
    <ModelViewer {/* あとは好きなattributeを渡す */} />
  )
}

Is it production ready?

筆者の手前味噌になるのですが、KOKUYO DESIGN AWARD 2022の表彰サイト上において、バーチャルトロフィーの表示をこのライブラリを使って実装しました。

このプロジェクトは、TypeScript & Next.jsで書いていたのですが、非常にスムーズにほしい場所に取り入れることができました。

  • Web Components自体はCanIUseでもトータルで96.2%の対応状況
  • 筆者が使用したサイト公開から数ヶ月経過したが、今のところ特に不具合の報告はない
  • model-viewerのgithubも比較的アクティブに更新されている

感想

筆者の極めて個人的な感想としては、たとえばもしReactアプリケーション内でちょっとした3Dモデルのプレビューが行いたい という程度のニーズであれば、three.jsやcanvasのAPIを使って書くよりは<model-viewer /> を推奨したいなと思います。

理由としては、非同期での3Dモデルの読み込み、カメラ位置の調整、ユーザーのクリック・スクロールなどのインタラクションとの繋ぎ込み・モバイル対応などを考慮しつつ、それらをReactのライフサイクルの中で自然に書くのは、難易度が低い実装とは言えず、また記述量も多くなり、テストを書くのも難しいからです。

もちろん <model-viewer />がサポートしていないattributeやeventに対応することはできないので、その場合は諦めるしかないのですが、少なくとも筆者が実務で触った範囲では、3D系のプロジェクトで普通ほしくなるような機能（例：ローディング状態の制御・ユーザーインタラクションのイベント発火・テキスチャーの差し替えなど）は全て揃っているように感じました。

Discussion