[WEB App] 3D Model Viewer — assimpjs WASM による40+フォーマット対応ブラウザ完結型3Dモデルビューア＆GLBコンバーター

3D Model Viewer — Universal 3D Model Viewer & GLB Converter

FBX・OBJ・DAE・3DS・STL・PLY・DXF・X3D・IFC・STEP等 40以上の3Dファイルフォーマットをブラウザ内でGLBに変換し、Three.jsで3D表示するユニバーサル3Dモデルビューアです。

Open Asset Import Library（assimp）のWASMビルド「assimpjs」を変換エンジンとして使用し、サーバーへのファイルアップロードは一切不要で、すべてブラウザ内で完結します。変換後のGLBファイルはそのままダウンロードでき、3Dフォーマットコンバーターとしても機能します。

GitHub - kovacsv/assimpjs: The emscripten interface for the assimp library that allows you to import 40+ 3D file formats in the browser.

The emscripten interface for the assimp library that allows you to import 40+ 3D file formats in the browser. - kovacsv/assimpjs

github.com

ツール

3D Model Viewer

40+フォーマット対応の3Dモデルビューア。ファイルをドロップして3D表示、GLBエクスポート対応。

lain-lab.com

スクリーンショット

3DSファイルの表示:

OBJファイルの表示:

動画 (GIF)

特徴

40+フォーマット対応

Open Asset Import Library（assimp）のWASMビルドにより、FBX、OBJ、DAE/Collada、3DS、STL、PLY、DXF、STEP、IFC、X3D、3MF等の主要フォーマットから、MD2、MD3、MD5、LWO、AC3D、BVH等のゲーム・DCC系フォーマットまで幅広く対応。

ブラウザ完結・GLB変換

ドロップされたファイルはassimpjs WASMエンジンがブラウザ内でGLB（glTF Binary）に変換。サーバーへのアップロードは一切不要。プライバシーが完全に保護されます。

GLBダウンロード

変換後のGLBファイルをそのままダウンロード可能。3DフォーマットコンバーターとしてFBX→GLB、OBJ→GLB、3DS→GLB等の変換に使えます。

ZIP対応

ZIPファイルをドロップすると自動展開し、モデルファイル・テクスチャ・MTL等をまとめてassimpjsに渡します。テクスチャ参照が自動解決されます。

アニメーション再生

変換後のGLBに含まれるアニメーションクリップを自動検出。再生/停止操作に対応し、アニメーション付きモデルの確認ができます。

フォールバック安全網

assimpjs WASM初期化に失敗した場合でも、FBX・OBJ・STL・PLY・3DS・DAEはThree.jsのネイティブローダーで表示されます。

自動カメラフレーミング

モデルサイズを自動検出し、カメラ位置・near/farクリッピングを自動調整。ミリメートル単位から100メートル級のモデルまで適切に表示します。

広告なし・トラッキングなし

広告、トラッキング、外部サーバーへのデータ送信は一切ありません。静的ファイルのみで構成されています。

使い方

1. ファイルをドロップ

   • 左パネルのドロップゾーンまたはビューポートに3Dモデルファイルをドラッグ＆ドロップします。クリックでファイル選択も可能です。
   • ZIPファイル（モデル+テクスチャ）にも対応しています。

2. 3Dプレビュー

   • 変換が完了すると自動的に3D表示されます。マウスドラッグで回転、スクロールでズーム、右ドラッグで平行移動。

3. ファイル情報確認

   • 左パネルにフォーマット、三角形数、頂点数、メッシュ数、アニメーション数、変換前後のファイルサイズが表示されます。

4. GLBダウンロード

   • 「DOWNLOAD GLB」ボタンで変換後のGLBファイルをダウンロードします。

5. アニメーション再生

   • アニメーションを含むモデルの場合、右パネルにクリップ一覧が表示されます。クリックで再生、Play/Stopで操作。

対応フォーマット

CAD・交換フォーマット: FBX, DAE/Collada, OBJ, 3DS, STL, PLY, DXF, STP/STEP, IFC-STEP, 3MF, X3D, glTF 1.0/2.0, GLB

ゲーム・エンジン系: MDL, MD2, MD3, MD5, B3D, IQM, M3D, SMD, VTA, ASE, X, OGEX, OFF, NDO

DCC・モデリングツール系: AC/AC3D, LWO (LightWave), LWS, LXO, COB, MS3D, NFF, CSM, BVH, IRR/IRRMESH

その他: HMP, RAW, TER, SCN, PMX, XGL, ZGL, USD 等

技術スタック

• Astro — ページ構築
• assimpjs — assimp C++ライブラリのEmscripten WASMビルド（40+フォーマット→GLB変換）
• Three.js r160 — GLTFLoader, OrbitControls, WebGL描画
• JSZip — ZIP展開
• vanilla JavaScript — DOM操作、ドラッグ＆ドロップ、ファイル処理

開発の経緯

FBX Viewerの拡張として「assimpjsによる40+フォーマット対応」を検討していたが、FBX Viewer自体がFBX特有の機能（Mixamoリターゲット、テクスチャ手動パッチ、DDS/TGAデコード、修復ZIP出力等）を持つ専用ツールであるため、汎用ビューアは別プロジェクトとして新規に作成する方針とした。

assimpjsのWASM初期化でCDN経由のlocateFileパス解決に苦戦。public/libs/にローカル配置することで解決。ネイティブThree.jsローダーへのフォールバック機構を追加し、assimpjs初期化失敗時も主要フォーマットは表示可能な設計とした。

関連ツール

FBX Viewer

FBXファイルの表示・テクスチャ修復・GLBエクスポート。Mixamoアニメーション対応。

lain-lab.com

STEP / IGES 3D Viewer

CADファイルをブラウザで3D表示。occt-import-js WASM使用。

lain-lab.com

GLB Compressor

GLBモデルの解析・軽量化・アニメーション再生。Draco/Meshopt圧縮対応。

lain-lab.com

更新履歴

• [2026/09/02]: v1.0
  
  • assimpjs WASM統合、40+フォーマット対応
  • GLBエクスポート
  • ネイティブローダーフォールバック（FBX/OBJ/STL/PLY/3DS/DAE）
  • アニメーション再生
  • ZIP展開・テクスチャ自動解決
  • 公開