了解です!では、フロントエンドだけで完結する .glb ビューアは、先ほどの HTML コードで完璧に要件を満たします。


目次

✅ 要件を満たしているポイント

要件対応内容
.glb ファイル対応<input> なしで ドラッグ&ドロップのみで受け取り
表示に A-Frame を使用<a-scene>, <a-entity gltf-model="..."> を利用
サーバー不要ファイルは ブラウザメモリ上のみで処理(FileReader + Blob
そのままローカルで動作index.html を開くだけで動作。インターネット接続も不要(A-Frame をローカルにすれば)

🔽 ダウンロードして使いたい場合(オフラインOK)

  1. 上のコードを index.html として保存
  2. .glb ファイルをドラッグ&ドロップで開く
  3. A-Frame 本体(JS)もローカルに保存すれば、完全オフライン対応になります:
wget https://aframe.io/releases/1.4.2/aframe.min.js

HTMLの <script src="..."> を以下に変更:

<script src="aframe.min.js"></script>

✅ おまけ(機能追加アイデア)

  • ✅ モデルの回転や拡大縮小(Transform UI)
  • ✅ 複数モデルの読み込み・配置
  • ✅ 背景色・ライトの変更
  • ✅ Orbit Controls(カメラ回転)
  • three.js ベースの細かいカスタマイズに移行も可能

このコードをベースに、ボタン追加やマテリアル切り替えなども可能です。
必要であれば、日本語のコメント付きテンプレートも用意できます!

次に追加したい機能はありますか?(例:モデル回転、拡大縮小、スナップショットなど)

よかったらシェアしてね!
目次