javascript で　.glb を表示

JavaScript で .glb を表示するには、最も一般的で強力なのが Three.js を使う方法です。Three.js には .glb ファイルを読み込むための GLTFLoader が用意されています。

✅ 基本的な表示コード（Three.js + GLTFLoader）

🔧 必要なライブラリ

CDNでOK：

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>

📄 HTML + JavaScript例（ローカル表示用）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>GLB Viewer</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/loaders/GLTFLoader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
  <script>
    // シーン・カメラ・レンダラー
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // ライト
    const light = new THREE.HemisphereLight(0xffffff, 0x444444);
    scene.add(light);

    // コントロール
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 1, 0);
    controls.update();

    camera.position.set(2, 2, 2);

    // GLTFLoaderで.glbを読み込む
    const loader = new THREE.GLTFLoader();
    loader.load(
      'model.glb', // ファイルパス
      (gltf) => {
        scene.add(gltf.scene);
      },
      (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      },
      (error) => {
        console.error('Error loading GLB:', error);
      }
    );

    // アニメーションループ
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }

    animate();

    // リサイズ対応
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth/window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>

🔄 `.glb` ファイルを表示する方法（ローカルファイルの場合）

model.glb をこのHTMLと同じフォルダに配置する
ローカルではセキュリティ制限があるため、ローカルサーバーで起動するのがベスト

ローカルサーバー起動例（Python簡易サーバー）

# Python 3.x
python -m http.server

その後、ブラウザで http://localhost:8000 にアクセスして表示できます。

🧠 補足

.glb は GLTFLoader でそのまま読み込めます（gltfと同様）。
OrbitControls を使うことでマウス操作（回転・拡大・移動）が可能です。
アニメーション付き .glb も gltf.animations を処理することで再生できます。

必要なら：

.glb アニメーション再生付きサンプル
UI付きのモデルビューワー
複数ファイル表示切り替え

なども用意できますよ！どうしましょうか？

よかったらシェアしてね！

javascript で .glb を表示