2025.07.02

【WebAR】マーカーレスARの実装方法【model-viewer】

今回はGoogle製のWebコンポーネント <model-viewer> を使って、WebARを実装する方法を解説します。
オープンソースで、iOS・Android両方に対応したマーカーレスWebARが気軽に実装できます！

公式サイト:
https://modelviewer.dev/

対応状況
Android:
iOS:
共通要件:
モデルの準備
glTF / glb(Android用)
USDZ (iOS用)
実装例

対応状況

Android:

Chromeブラウザで動作
ar-modes="scene-viewer" を指定
.glb ファイル形式が必要
Android 7.0以降推奨
Google Play Services for AR（旧ARCore）が必要

iOS:

Safariブラウザで動作
ar-modes="quick-look" を指定
.usdz ファイル形式が必要
iOS 12以降で対応

共通要件:

Webサイトは HTTPS で提供されている必要があります
<model-viewer> はモバイルでのみAR機能が利用可能（PCブラウザでは非対応）

モデルの準備

glTF / glb(Android用)

.glb はバイナリ形式で、最も一般的な形式です。Blender や 3Dツールでエクスポート可能です。

USDZ (iOS用)

.usdz はAppleの形式。以下のサイトから変換することができます。

https://modelviewer.dev/editor/

Macユーザーは Reality Converter.app を利用することで作成可能です。

Blenderで3Dモデルを書き出す際に、Universal Scene Description(.usd*)を選択して、

拡張子をusdzにして書き出すこともできます。

実装例

head内に、以下のスクリプトを読み込みます。

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

html内に以下を記述します。

<model-viewer src="model.glb" ios-src="model.usdz" ar ar-modes="scene-viewer quick-look" auto-rotate camera-controls>

主な属性:
src：モデルファイルへのパス（.glb と .usdz）
ar：AR機能を有効化
ar-modes：使用するARモードを指定（Android: scene-viewer, iOS: quick-look）
auto-rotate, camera-controls：モデルの回転やカメラ操作を有効化

公式ドキュメントにも属性は色々記載されていますので、
用途に応じてカスタマイズしてみてください。
https://modelviewer.dev/docs/

例：

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
    <model-viewer src="3d.glb" ios-src="3d.usdz" ar ar-modes="scene-viewer quick-look" auto-rotate camera-controls>
    </model-viewer>
</body>
</html>

サーバーにアップ後、URLにアクセスすると、モデルビューアーが立ち上がります。
画面右下の丸いボタンを押すと、AR画面に遷移します。
何も設定していないととても小さく表示されますので、大きさは調整した方が良いです。