googleが3Dモデルの共有ライブラリPolyを公開しましたね。 このライブラリでは数多くのモデルがOBJ形式でダウンロードできるようになっています。

ただ、googleにしては意外だったのはglTF形式に対応してないこと。 まだ時期尚早だと判断したのかな？？

glTFってのは3Dモデルの標準化を狙った次世代の3Dモデルフォーマットで、このところ注目のモデル形式なのです。 今後はglTFが標準になってくることを祈って、Polyから拾ってきたモデルをglTFに変換してThree.jsで表示してみます。

前提 ・webpackでビルドできる環境ができてる ・前の投稿のようにsceneに別の形式でモデルを描画できている

サンプルとして使わせてもらうのは↓の恐竜
T-Rex scanned with Qlone

ここからダウンロードしたファイルを展開（解凍）して
[projectroot]/src/3dmodels/t_rex
の中に保存しておきます。
※“model_T Rex_20171104_194215374.obj"ってファイル名なんですけど、あとあと面倒なので"t_rex.obj"にリネームしておいてください。
　 　

んで、このOBJ形式のモデルをglTFに変換するのですが、obj2gltf を使わせてもらいます。
https://github.com/AnalyticalGraphicsInc/obj2gltf

公式サイトにある通り、プロジェクトのルートディレクトリで
$ npm install --save obj2gltf を行います。
package.jsonにobj2gltfが追加されましたね？？

んで、npmのスクリプトでPolyから落としてきたモデルをglTFに変換しましょう。
下記のようにスクリプトを追記して

package.json

{
  "scripts": {    
    "gltf:rex": "obj2gltf -b -i 'src/3dmodels/t_rex/t_rex.obj' -o 'public/t_rex/t_rex.glb'"
  },  
  ・・省略・・
}

※ -oで指定するのが出力先ファイル名なのですが、ファイル名は無視されてしまうっぽいです。入力されたobjと同じ名前で出力されてしまいます。

obj2gltfを実行

$ npm run gltf:rex

そしたら public/t_rex/t_rex.glb ってのが作成されたかと思います。
　 　 　

次にこのglTF形式のモデルを表示してみましょう。
全部のコードを載せるのは冗長なので端折って説明しますね。
（それ以外のコードは前の投稿を見てください）

glTFのローダーはOBJと同じようにexamplesに保存されていますのでそれをインポートします。

import 'imports-loader?THREE=three!../../node_modules/three/examples/js/loaders/GLTFLoader'	

で先ほど作ったglTFモデルを読みこんでsceneに追加します。

var loader = new THREE.GLTFLoader();
var url = "t_rex/t_rex.glb";
loader.load( url, function(data) {
    var object = data.scene;
    scene.add( object );
}, undefined, function ( error ) {
    console.error( error );
} );

こんな感じ。