みなさんこんにちは!おさかなです!
今回は「glTF Viewer」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・glTFデータの表示を確認したい方
・glTFをブラウザ表示したい方
・作成した「3Dモデル」を確認したい方
「glTF Viewer」って何?
「glTF Viewer」とは、「glTFファイル」をWebブラウザ上で開けるサイトのことです。three.jsが用いられており、WebGLでも3Dモデルの表示を実現!構文ミスがある場合は、エラーも検出してくれる優れものとなっています。(便利〜)
glTFとは?
glTF (GL Transmission Format) はJSONによって3Dモデルやシーンを表現するフォーマットである。「3DにおけるJPEG」と表現されることもある。
Wikipediaより引用
![](https://osakanav.com/wp-content/uploads/2022/07/kalidoface-top-160x90.png)
実際に使ってみよう!
アップロードしよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/08/gltf-viewer.png)
画面中央の「Upload」を押して、データをアップします!(よし!)
![](https://osakanav.com/wp-content/uploads/2022/08/gltf-viewer-upload.png)
アップロードする際は、下記の3点が揃っていることをご確認ください。
- gltfファイル
- binファイル
- 使用するテクスチャ画像
ちなみにglTFの構文ミスがある場合は、エラー検出してくれます。(助かる〜)
![](https://osakanav.com/wp-content/uploads/2022/08/rectangle_large_type_2_978194c1af33dbcabb8921c5c017f14c-300x157.webp)
↓今回使用するglTFデータ
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/e536560b5654197e19cfa6654dcf3ceb.jpeg)
こんな感じで、無事にアップロードできました!(わーい✨)
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel.png)
マウスをクリックしながら、カーソルを動かすと「視点変更」が可能です。
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel.gif)
![](https://osakanav.com/wp-content/uploads/2022/08/kimito-robot-ten-top-160x90.png)
(もうすぐ秋ですね…🍁)
カスタマイズしよう!
右上にあるメニューから「Display」を選択すると…?
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-play.png)
「背景」や「グリッド(方眼状のもの)」を表示したり、色を変更したりできます!(おお〜!)
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-paneru.gif)
メニュー「Lighting」を押すと…?
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-lights.png)
「陰影」を付けられます。(雰囲気ガラッと変わる🌄)
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-kage.gif)
(ビビットピンクのような、お花になりました🌸)
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-pink-1.png)
メニュー「Performance」を押すと…?
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-p.png)
こんな感じで「フレームレート(FPS)」「ミリセカンド(MS)」などが表示されます。
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-g.png)
こちらの値が、小さければ小さいほど「処理速度が速い」ということになります!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-g.gif)
最後に、左下の「g hints」もチェックしてみましょう!(ゴー🚩)
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-btn.png)
こちらでは「検証レポート」が確認できます。
みなさんも「glTF」で作られた3Dモデルの挙動を確認したいときは、ぜひご活用ください…✨
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-report.png)
(お疲れ様でした🍵)
![](https://osakanav.com/wp-content/uploads/2022/08/gmodel-report1.png)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/b79edbc44ef1e2df193b3f4cc20ac353.jpg)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
目が回る…👀
(←この前、浮かれてたら階段から落ちた人)
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
3Dモデル回転させすぎー!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/07/thang-top-160x90.jpg)