🎓 GLB Viewer を作ろう（A-Frame + Drag & Drop）

🧾 目的

このチュートリアルでは、3Dモデル（.glb形式）をドラッグ＆ドロップで読み込み、A-Frame を使ってブラウザに表示するWebアプリを作成します。

🧰 事前準備

テキストエディタ（例：VS Code）
Webブラウザ（Chrome, Firefox, Edge など）
.glb形式の3Dモデルファイル

📁 フォルダ構成

glb-viewer/
├── index.html
└── aframe.min.js（※オフライン時のみ）

🔧 ステップ1：index.html を作成

以下のコードをコピーし、index.html という名前で保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>GLB Viewer</title>
    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
    <style>
      body { margin: 0; overflow: hidden; }
      #drop-zone {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 300px;
        height: 150px;
        background: rgba(255,255,255,0.8);
        border: 2px dashed #aaa;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        z-index: 100;
      }
    </style>
  </head>
  <body>
    <div id="drop-zone">.glb ファイルをここにドロップ</div>
    <a-scene background="color: #ECECEC">
      <a-entity id="model-container" position="0 1.5 -3"></a-entity>
      <a-light type="directional" position="1 1 1" intensity="0.8"></a-light>
      <a-light type="ambient" color="#FFF"></a-light>
      <a-camera position="0 1.6 0"></a-camera>
    </a-scene>

    <script>
      const dropZone = document.getElementById('drop-zone');
      const modelContainer = document.getElementById('model-container');

      dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = 'green';
      });

      dropZone.addEventListener('dragleave', () => {
        dropZone.style.borderColor = '#aaa';
      });

      dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = '#aaa';

        const file = e.dataTransfer.files[0];
        if (file && file.name.endsWith('.glb')) {
          const reader = new FileReader();
          reader.onload = function (event) {
            const blobUrl = URL.createObjectURL(new Blob([event.target.result]));
            modelContainer.innerHTML = `<a-entity gltf-model="${blobUrl}" scale="1 1 1" animation-mixer></a-entity>`;
          };
          reader.readAsArrayBuffer(file);
        } else {
          alert('.glb ファイルをドロップしてください');
        }
      });
    </script>
  </body>
</html>

🧪 ステップ2：動作確認

index.html をダブルクリックでブラウザで開く
.glb ファイルをページ上にドラッグ＆ドロップ
モデルが表示されれば成功！

🌟 発展機能のアイデア

機能	説明
モデル回転/拡大	スライダーやボタンで操作可能に
背景変更	空の色や背景画像を切り替え
複数モデル表示	ドロップ毎に複数追加
カメラ制御	ドラッグでカメラを回転