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>