three.js学習note #2

three.jsのOBJloaderとSTLloaderがよくわからないので、コード整理します。

コード全部

function loadOBJ() {
   // obj mtl を読み込んでいる時の処理
   var onProgress = function ( xhr ) {
       if ( xhr.lengthComputable ) {
           var percentComplete = xhr.loaded / xhr.total * 100;
           console.log( Math.round(percentComplete, 2) + '% downloaded' );
           }
   };
   // obj mtl が読み込めなかったときのエラー処理
   var onError = function ( xhr ) {    };
   // obj mtlの読み込み
   var mtlLoader = new THREE.MTLLoader();
   mtlLoader.setPath( 'models/obj/male02/' );              // this/is/obj/path/
   mtlLoader.load( 'male02.mtl' , function( materials ) {
     materials.preload();
     var objLoader = new THREE.OBJLoader();
     objLoader.setMaterials( materials );
     objLoader.setPath( 'models/obj/male02/' );            // this/is/obj/path/
     objLoader.load( 'male02.obj', function ( object ) {
       objmodel = object.clone();
       objmodel.scale.set(5, 5, 5);      // 縮尺の初期化
       objmodel.rotation.set(0, 0, 0);         // 角度の初期化
       objmodel.position.set(0, 0, -15);         // 位置の初期化
   // objをObject3Dで包む
       obj = new THREE.Object3D();
       obj.add(objmodel);
       scene.add(obj);                         // sceneに追加
     }, onProgress, onError );
   }, onProgress, onError);
}

解読

function loadOBJ() {

ここでは後で実行するので関数宣言で書いてみた

流れとしてはTHREE.MTLLoaderを入れたmtlloaderをloadしたいが

なのでonLoad関数、onProgress関数、onError関数を準備していきたい

【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ！【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

var onProgress = function ( xhr ) {

ちなみにこっちの書き方だと関数式の書き方

引数のxhrは任意指定らしいので自由に決められるみたい

if ( xhr.lengthComputable ) {
           var percentComplete = xhr.loaded / xhr.total * 100;
           console.log( Math.round(percentComplete, 2) + '% downloaded' );
           }
   };

lengthComputableは読み込みが完了しているかどうかをbooleanで返すのでif(){の中身は「もし読み込みが完了していなかったらダウンロードの％を表示する」という意味

JavaScriptの変数って何? varで宣言や初期化をしてみよう!JavaScriptの変数って何? varで宣言や初期化をしてみよう! | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

 obj mtl が読み込めなかったときのエラー処理

   var onError = function ( xhr ) {    };

obj mtlの読み込み

   var mtlLoader = new THREE.MTLLoader();

THREE.MTLLoaderはthree.jsを読み込んだ時についてきた便利グッズ

three.js docs

mtlLoader.setPath( 'models/obj/male02/' ); 

setPathはモデルを読み込む前にできるだけ、ファイル指定が長くならないように下準備している感じなので、なくてもloadの時のパスが長くなるだけで問題ない

mtlLoader.load( 'male02.mtl' , 

ここが.loadのurl指定で次がonLoad関数の指定なのだけれど、この中でonLoad関数を作る、しかも中でobjLoader関数も作りながらという

function( materials ) {
materials.preload();

onLoad関数を作っていく、関数の引数は任意で決められるがmtlファイルのloadingができ次第、onLoad関数の引数に代入されているようだ。

     var objLoader = new THREE.OBJLoader();

     objLoader.setMaterials( materials );
     objLoader.setPath( 'models/obj/male02/' ); 
     objLoader.load( 'male02.obj', function ( object ) {
       objmodel = object.clone();
       objmodel.scale.set(5, 5, 5);      // 縮尺の初期化
       objmodel.rotation.set(0, 0, 0);         // 角度の初期化
       objmodel.position.set(0, 0, -15);         // 位置の初期化

細かい設定が多くて悩むがとりあえず必要な時に変更すればいいのがほとんど

three.js docs

       obj = new THREE.Object3D();
       obj.add(objmodel);

object3D()を使うと複数のオブジェクトを扱う際に簡単になるみたいだけど、今回はあまり必要ないかも、とりあえず管理しやすいから覚えとく

three.js docs

ICS MEDIA

       scene.add(obj); 
     }, onProgress, onError );
   });
}

あとはシーンに目的のobjを追加して完成

最初は本当意味わからないけど、こうして部分ごとに考えていくと結構わかって良い（全然わかってない）