「WebGL を使って 3D モデルを表示したいけれど、Three.js のコードを書くのは難しそう…」
そんな悩みを解決してくれるのが model-viewer（モデルビューア） です。
目次
1.model-viewer とは？
model-viewer は、Google が開発・公開している Web Components ベースの 3D / AR モデル表示用ライブラリ です。
内部的には WebGL を利用していますが、開発者は WebGL や Three.js のような低レベル API を直接扱う必要はありません。
<model-viewer> というカスタム HTML タグを使用することで、数行のマークアップだけで 3D モデルをブラウザ上に描画できます。
これにより、従来は専門知識が必要だった 3D 表示を、フロントエンド開発の延長線上で導入することが可能になります。
2.model-viewer のメリット
2-1.EC サイトと相性が良い
ユーザーは商品の見本を 3D で確認でき、実際に手に取るような感覚で細部までチェックできます。
静止画像だけでは伝わりにくい 立体構造・厚み・質感 を直感的に理解できるため、、購入前の不安を軽減し、コンバージョン率の向上にもつながります。
2-2.コードが圧倒的に簡単
Three.js のようにシーン作成、ライト設定、カメラ設定…といった工程が不要。
HTML タグを置くだけで 3D モデルが表示できます。
<script type="module" src="https://cdn.jsdelivr.net/npm/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="model.glb" auto-rotate camera-controls></model-viewer>
これだけで 3D 表示が完成。
2-3.スマホ対応・AR対応が標準機能
model-viewer には、モバイル向けの操作性が最初から組み込まれています。
- Pinch（ピンチ）で拡大縮小
- スワイプでモデルを回す
- Android・iOS の AR 表示にも対応
といった機能が最初から備わっています。
2-4.読み込めるフォーマットがわかりやすい
model-viewer が主に対応しているフォーマットは以下の 2 種類です。
- gltf (.gltf)
- glb (.glb)
Web標準となっているフォーマットなので、安定性と互換性も高いです。
3.model-viewer と Three.js の違い
| 項目 | model-viewer | Three.js |
|---|---|---|
| 実装難易度 | とても簡単（HTMLだけ） | 高い（JSで1から構築） |
| カスタマイズ性 | 標準機能内での調整に限られる | 完全カスタマイズ可能 |
| 表現力 | 手軽だが自由度は低め | 高度な3D表現・アニメーション可 |
| 向いている用途 | 3D商品表示・簡易ビュー | 3D演出・パーティクル・ゲームなど |
4.どんな人に向いている？
- コーディング初心者で3Dを触ってみたい人
- ECサイトで3D商品を掲載したい人
- Webサイトに軽く3Dを追加したい人
- AR を簡単に導入したい人
より複雑なパーティクル・流体・シェーダーなどの高度な表現や制御をしたい場合は Three.js が必要です。
まとめ
model-viewer は「WebGL 表現を圧倒的に簡素化したツール」 で、
複雑なJavaScriptを書かずに 3D・AR をサイトに導入したい場合に最適です。
Three.js のような高度な表現力はありませんが、
シンプルさと手軽さでは現状トップクラスの選択肢です。