glTF Viewer [3DCG]

glTF Viewer

glTF 2.0 モデルを WebGL (three.js) で表示するビューワー。モデルのファイル (.gltf / .glb) をドラッグアンドドロップするだけで使用できる。Web アプリあるいは、デスクトップアプリ (Windows / Mac / Linux) として利用できる。

参考：

donmccurdy/three-gltf-viewer: Drag-and-drop preview for glTF 2.0 models in WebGL using three.js – GitHub

概要

参考：

glTF Viewer – WebGLを使った glTFビューワー | MOONGIFT

使い方

ドラッグアンドドロップで glTF ファイル (.gltf / .glb) を開く。

左マウスボタンのドラッグ：モデルの回転

右マウスボタンのドラッグ：モデルの移動

中マウスボタンのドラッグ / マウスホイール：モデルの拡大縮小

アプリをビルドする

Windows の場合

1. Node.js をインストールする。
2. リポジトリを ZIP ファイルでダウンロードして展開する。あるいは、Git でリポジトリをクローンする。
3. npm パッケージをインストールする。(npm install を実行)
4. Parcel で index.html をビルドする。(npm run build を実行)
5. パッケージ化前のアプリを起動する。(npm start を実行)
6. Windows 用に Electron パッケージをビルドする。(npm run package:windows を実行)
7. packageディレクトリ内に gltf-viewer-win32-ia32 ディレクトリが作成されるのでディレクトリを丸ごと必要な場所にコピーして使用する。

ファイル拡張子の制限

• .gltf
• .glb

参考：

three-gltf-viewer/app.js at v1.5.1 · donmccurdy/three-gltf-viewer – GitHub

オンラインビューワー

参考：

glTF Viewer | Don McCurdy (gltf-viewer.donmccurdy.com)

glTF Viewer | InSimo