Web上で3Dモデルを公開する方法

Web上で3Dモデルを公開する方法はいくつかあります。用途や技術レベルによって選べますが、ここでは一般的な手段をいくつか紹介します：

---

✅ 1. 専用プラットフォームを使う（手軽）

Sketchfab

• 3Dモデルをアップロードするだけで、Web上でインタラクティブに表示できる。
• 自動でビューワーが生成され、他のサイトに埋め込みも可能（YouTubeの動画のように）。
• GLB、OBJ、FBXなどの形式に対応。
• 無料プランあり。

p3d.in

• 簡易的な3Dビューワーを提供。
• ファイルをアップロードするだけ。
• 軽量でシンプル、ブログやポートフォリオサイト向け。

---

✅ 2. 自前でWebページに埋め込む（カスタマイズ自由）

【Three.js】を使う

• JavaScriptライブラリで、WebGLを使って3Dモデルを表示。
• 完全に自由にカスタマイズ可能（ズーム、回転、アニメーションもOK）。
• GLB / glTF の読み込みに対応。

<!-- HTML例：Three.js + GLB -->
<script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.152.0/examples/js/loaders/GLTFLoader.js"></script>

<canvas id="webgl"></canvas>
<script>
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({canvas: document.getElementById('webgl')});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const loader = new THREE.GLTFLoader();
  loader.load('model.glb', function (gltf) {
    scene.add(gltf.scene);
    camera.position.z = 5;
    renderer.setAnimationLoop(() => {
      gltf.scene.rotation.y += 0.01;
      renderer.render(scene, camera);
    });
  });
</script>

---

✅ 3. WordPressなどCMSで表示

• WordPress用のプラグイン（例: Model Viewer for WordPress）を使えば、HTMLやショートコードで埋め込みが可能。
• <model-viewer> タグを使う方法が一般的。

<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>

---

✅ 4. Unity / Babylon.js / PlayCanvas などのエンジンを使う

• より高機能な3D体験（ゲームやシミュレーション）を提供したい場合。
• ただし学習コストは少し高め。

---

🔧補足：ホスティングについて

• モデルファイル（例：model.glb）はWebサーバーやCDNにアップロードする必要あり。
  • GitHub Pages、Netlify、Vercelなどで無料ホスティングも可。

---

必要なら、具体的な例（Three.jsでのGLBモデル表示など）も一緒に作成できますよ。どの方向が気になってますか？