3Dモデル（例：model.glb）をWebでホスティング（公開）する方法を、初心者向けにわかりやすく解説します。
目次
✅ そもそも「ホスティング」って何？
3DモデルをWeb上で表示するには、**インターネット上にファイルを置く場所（=ホスティング）**が必要です。
これにより、<model-viewer> や Three.js などのWeb技術からそのファイルを読み込めるようになります。
🔰 無料で使えるホスティングサービス3選 + 使い方
1. GitHub Pages
- 無料・広告なし・信頼性高
- GitHubにコードやモデルをアップして、静的Webサイトとして公開
- HTML + GLBファイルを一緒にアップロード可能
手順（簡易版）：
- GitHubにアカウント作成（https://github.com）
- 新しいリポジトリ作成（例：
3d-model-demo） - HTMLファイルと
model.glbをアップロード - 設定 → 「Pages」 → ソースを「main」に設定
- 公開URLが表示される（例：
https://yourname.github.io/3d-model-demo/）
✅ ここにindex.htmlを置けば、Webで3Dモデルが見れる！
2. Netlify
- ドラッグ＆ドロップで超簡単デプロイ
- Git連携も可能、フォーム機能などもあり
手順（ドラッグ＆ドロップ方式）：
- https://app.netlify.com/drop にアクセス
- フォルダをZIPにまとめてドラッグ
- 中に
index.htmlとmodel.glbを入れておく
- 中に
- 自動でホスティングされ、URLが発行される
✅ ログイン不要でもOK（ただし管理機能はログイン後）
3. Vercel
- 開発者向けに人気、Next.jsと相性が良いが静的HTMLもOK
手順（GitHub連携）：
- GitHubにコードをプッシュ（
index.htmlとmodel.glb） - https://vercel.com/ にログイン（GitHubアカウントでOK）
- 「New Project」→ 対象リポジトリを選択
- 自動でデプロイ＆公開URLが表示される
✅ 複数の環境（preview, production）も使える
📦 フォルダ構成例（HTML＋GLB）
/3d-model-demo ├── index.html └── model.glb
index.html で以下のように読み込めばOK：
<model-viewer src="model.glb" auto-rotate camera-controls></model-viewer> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
📎 注意点
- ファイル名の大文字小文字は区別される（例：
Model.glb≠model.glb） - Webサーバー上では
model.glbのMIMEタイプが適切でないと読み込めない場合あり（上記3サービスなら大丈夫）
✨ おすすめは？
- とにかく早く試したい → ✅ Netlifyのドロップ方式
- 自分でコード管理したい → ✅ GitHub Pages
- アプリ連携やCI込みでやりたい → ✅ Vercel
気になるサービスがあれば、実際にアップロードして表示するサンプルを一緒に作ることもできますよ。
どの方法を試してみたいですか？それとも今あるHTMLとモデルで公開してみますか？
