01　画像認識AR

印刷物をカメラで映して、立体を出す

ポスターやパッケージなど、1枚の画像をきっかけに3Dまたは動画を表示する体験です。エディタは index.html（画像認識）です。

このエディタでできること

カメラで指定の画像を映すと、その面に立体や動画が乗ります。認識前の案内文と、認識後の案内ボタンを付けられます。ターゲットは1枚、出すアイテムは1つです。

ターゲット画像（映す目印）と、表示するアイテムを選びます。対応テンプレートならアイテム画像で絵柄を差し替えます。

中央で画像の上に乗った見え方を確認します。右サイドで向き（壁面／床・机）、位置、動き、質感を整えます。

認識前のメッセージと、任意の案内ボタン（文言・色・URL）を設定します。右上のスマホプレビューで認識前／認識後を切り替えられます。

名前を付けてZIPにするか、URLを発行します。公開後はスマホでHTTPSのURLを開き、ターゲットを映します。

カメラ権限が必要です。印刷サイズ、光の反射、画像の特徴で認識しやすさが変わります。配布前に実物で確認してください。

ステップ	項目	内容	制限・初期
1 AR素材	ターゲット画像	カメラで映すとARが起動する目印。png / jpg。	1枚。未設定だと公開できません。
1 AR素材	アイテム画像	対応テンプレートのテクスチャ一括差し替え。	動画・非対応テンプレでは無効。
1 AR素材	表示するアイテム	テンプレート / 動画 / glTF。	1つ。動画は12 MB推奨、32 MB超は必須圧縮。公開全体40 MB。
2 AR画面の表示	認識前のメッセージ	画像を映す前に画面下へ出す案内。	プレースホルダ「ターゲット画像を映しましょう」。
2 AR画面の表示	CTAボタンを表示する	認識後に出す案内ボタン。	任意。文言、遷移先URL、背景色、文字色。
3 公開	プロジェクト名 / ZIP / URL	共通の公開仕様。	スラッグ3〜30、末尾6桁、履歴40件。

項目	内容
ターゲットの向き	壁面（垂直・ポスター向け）または床/机（水平。プレビューは俯瞰）。
マテリアル設定	NFT面テクスチャ、メダル表/裏、色マテリアルのカラー・メタルネス・ラフネス・不透明度。
位置 / 回転 / 拡大	数値またはギズモ（W / E / R）。拡大は固定／個別。
アニメーション	なし、回転リニア、回転慣性（5秒/周）、ジャンプ（1秒/周）、カスタムキーフレーム。GLBに動きがある場合はその動きのみ。

使い方ガイド、操作説明、「過去に公開したサイト」（共通の一覧ページ）、すべてリセット、ポータルへ戻る。

中央はターゲット上の3D配置です。右上のスマホ風プレビューは次の2状態です。

認識前→認識後

認識前は案内文、認識後は立体と任意CTA、撮影ボタン相当の見た目を確認できます。実撮影は公開サイト側です。

カメラ許可→認識前メッセージ→ターゲット検出→3D/動画＋CTA→ロストでCTA非表示