VSCode で glTF 形式の 3D モデルを確認する方法を探していたら、良さげな機能拡張を見つけたので紹介したいと思います。
インストール方法
VSCode の「機能拡張」を選んで検索ボックスに "glTF" と入力し、この中の glTF Tools を選択してインストールを行います。
使い方
実際に glTF 形式の 3D モデルを VSCode で確認してみます。
glTF 形式のファイルは以下の Github リポジトリから取得できるので、こちらから拝借したいと思います。
https://github.com/KhronosGroup/glTF-Sample-Models
今回は「DamagedHelmet」という 3D モデルを拝借しました。
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/DamagedHelmet/glTF
.gltf
だけでなく .bin
や .jpg
など全てのファイルをダウンロードしてきます。
ダウンロードが終わったら VSCode で開き、VSCode 上で glTF ファイルを開きます。
そして、画面右上辺りに表示されている円錐っぽいアイコンをクリックします。
すると、画面右側に 3D のモデルが表示されるかと思います。
glTF ファイルの中身を編集するとダイレクトにその結果が表示されるので、ちょっとした編集なんかの際に便利かなと思います。
Debug モード
3D モデル表示中は、円錐っぽいアイコンがあったところに Debug モードに移行する虫のアイコンが表示されています。
これをクリックすると Debug モードに移行でき、ちょっとした確認作業なんかに使えるかと思います。
glb 形式でのエクスポート
コマンドパレットを開いて「glTF」と入力し、glTF: Export to GLB (Binary file) を選択します。
次の画面で glTF ファイルを選択し「Convert to GLB」ボタンを押下します。
次の画面で 出力先の glb ファイル名(と保存先パス)を入力し「保存」ボタンを押下すると、ファイルが保存されます。
ここでは glTF を glb にエクスポートする例を紹介しましたが、逆に、glb から glTF へのエクスポートもできるので、
glTF <-> glb の相互変換ツールとして利用することもできそうです。
さいごに
実は、(筆者が使っている)Windows 10 Pro であれば glTF / glb ともにファイルをダブルクリックすると Windows 標準の 3D ビューワーが立ち上がり 3D モデルの表示確認ができます。
ただ単純に 3D モデルを確認したいのであれば、この方法でも良いと思います。