Three.jsで3Dモデルを表示！Meshyで作ったGLBをWebに組み込む方法
最近話題の3Dモデル生成ツール「Meshy」を使って作成したGLBファイルを、Three.jsでWeb上に表示する方法を紹介します。Web制作初心者でも、HTML/CSS/JSの3ファイルで簡単に表示できます。
🧾 用意するもの
Meshyで生成した .glb モデル（例：fantasy.glb）
HTML/CSS/JavaScriptの3ファイル
Three.js（ES Modules版）
🧱 ファイル構成
project/
├── index.html
├── style.css
├── script.js
└── assets/
└── fantasy.glb
💡 ポイント解説
✅ モジュール形式（ES Modules）でThree.jsを読み込む
Three.jsはr150以降、従来の three.min.js は非推奨に。
そのため、以下のようにモジュール形式で読み込みます：
<script type="module" src="script.js"></script>
✅ script.jsの構成
Three.js本体、OrbitControls、GLTFLoaderを読み込む
WebGLレンダラーを初期化
カメラとライトを設置
fantasy.glbを読み込んでシーンに追加
アニメーションループで回転＋操作可能に
🧪 実行結果
ブラウザ上でキャラクターが自動回転
マウスで拡大・回転も自由自在
GLBファイル1つで超軽量＆高精度な3D表示！
✍️ まとめ
Three.jsとMeshyを組み合わせることで、誰でも簡単に自作の3Dキャラをブラウザに表示できます。
ポートフォリオ、販売サイト、ゲーム紹介など様々な用途に活用できますよ！
