PATTERNS
3D活用パターン
同じ doGATE モデルを、見せ方を変えて3パターン用意しました。トップページや製品ページに組み込む際の判断材料にどうぞ。
B
インタラクティブビューア
ユーザーがドラッグで回転、ピンチ/ホイールでズーム。背景はライトで、製品ページの「仕様」セクション向き。
- マウス・タッチ操作対応
- ARボタン（対応端末ではAR起動）
- カメラ初期位置・露出を細かく調整可
C
カード型ミニビューア
事業内容やサービス一覧のカードに、サムネ画像の代わりに小さな3Dを配置。スクロール内に複数並べることも可能。
- マウスオーバーで自動回転
- 1枚あたりロード負荷を抑制（lazy）
- カード3〜6枚並べてサービス紹介に
doGATE
福岡県IoT認定の主力ソリューション
製品B
（実装時はGLB差替）
（実装時はGLB差替）
製品B
同様に3D表示が可能です
TECH COMPARISON
技術選定の比較
| 項目 | model-viewer（本デモ採用） | three.js | Spline |
|---|---|---|---|
| 用途 | 単一プロダクトの表示・回転・AR | シーン構築・アニメ・パーティクル・背景演出 | デザイン重視の3Dシーン（ノーコード制作） |
| 導入工数 | 最小（HTMLタグ1行） | 中〜大（コード必要） | 小（埋め込み） |
| JSバンドル | 約50KB（CDN/lazy可） | 約150KB〜（必要モジュールのみ） | iframe方式が中心、サイト本体は軽量 |
| SEO/SSR | Astro静的サイトと相性◎ | 同左、ただしハイドレ設計が必要 | iframe内のためSEO影響軽微 |
| 得意な見せ方 | 製品3D、AR表示、ヒーロー商品ショット | 背景アニメ、ビル外観の俯瞰、データ可視化 | UI連動の凝った演出、3Dランディング |
| 運用 | GLB差し替えだけ | コード修正が必要 | Splineエディタで編集 |
推奨パス
- Step 1: トップヒーロー or 製品セクションに
model-viewerでdoGATEを表示（本デモ通り）。導入1日以内。 - Step 2: 背景にうっすら three.js のワイヤーフレーム建物 or グリッドラインを追加して「スマートビルディング感」を強調。
- Step 3: 凝った演出が必要になった段階で Spline を限定的に活用。
現在のGLBファイル（約1MB）はWeb表示に十分軽量です。トップに置く場合はファーストビューの遅延を避けるため lazy読み込み + ポスター画像の組み合わせを推奨します。