glTF2.0 in three.js

hankuro

License: MIT License

Fork
1
Fav
3
View
405
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 94 lines
  • HTML 18 lines
  • CSS 10 lines
Sketchfab
https://sketchfab.com/models/8c0746e3d1304ed283a3bb4772a8d2cc
Sketchfabからダウンロードしてアニメション化しました。
さすがに描写ではSketchfabにかなわないけど、
thrre.jsは動的にアニメションできるからそれなりに楽しい。
もともとはglTFでダウンロードできたけどthree.js R87のGLTFLoaderでは描写できなかった(手順ミス大だけど)

https://github.com/KhronosGroup/glTF-Blender-Exporter

BlenderにはFBX形式でInporterできたから、上記サイトのdocsを参考にマテリアルを作成してみた。
でも、glTF 2.0からMetallic Roughnessというマテリアルが導入されたらしく、結局はよくわからなかった。
とくにスペキュラーマップが分らなかった。今回ダウンロードで得たスペキュラーマップを使用したが、
スペキュラーマップが効かなくてマネキン状態になった。しかたなく、スペキュラーマップをAll Blackにしらた、
なんとか見られるようになった。

Metallic Roughnessというマテリアルの勉強が必要のようだ。
  • glTF2.0 in three.js
  • glTF2.0 in three.js

play

Complete!

Description どんなゲームですか?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

実行画面をスマートフォンで確認できます。

Discussion

このコードについて質問してみる!

Tags

Favorite by

Forked