Three.jsのテクスチャ読み込み

Question

Three.jsでテクスチャを貼りつけた物体を表示させようと思っています。
多数のテクスチャを読み込みたいので「loadqueue」を用いて一気に読み込んでから表示させようと思ったのですが、実際に実行したところ
texleft_center is not defined
というエラーが出て画面が黒いままになってしまいました。
変数が定義されていないため発生しているらしいのですが、最初のloadQueue.on内の変数を使っているはずという認識で、どのように直せばいいのか見当がついていない状態です。

let loadQueue = new createjs.LoadQueue();

function init() { 
 let manifest = [
    {id: 'left_center', src: './texture_petro/center_left.jpg'},
    //{id: 'left_center', src: 'http://localhost/center_left.jpg'},
    {id: 'center_center', src: './texture_petro/center_center.jpg'},
    {id: 'right_center', src: './texture_petro/center_right.jpg'},
 ];

 function getTexture(name) {
    let image           = loadQueue.getResult(name);
    let texture         = new THREE.Texture(image);
    texture.needsUpdate = true;
    return texture;
 }

 loadQueue.on('complete', function(){
    var image           = loadQueue.getResult('left_center');
    var texleft_center         = new THREE.Texture(image);
    texleft_center.needsUpdate = true;
 });


 loadQueue.loadManifest(manifest);

  //（略）
  //オブジェクト群
  var obj = new THREE.Group();

   const GSquare = new THREE.BoxGeometry(1000,1000,1000);
   
   const MSquare = new THREE.MeshPhongMaterial({ // 材質     
        map: texleft_center,//ここでエラーが発生
        //map:getTexture('left_center'),
        side: THREE.DoubleSide // 裏からも見えるようにする
      })
   const Square =  new THREE.Mesh(GSquare, MSquare);

   obj.add(Square);

Comments

[gentaro]

[緊急]とかつけると嫌がられるよ。急いでるならお金払って仕事としてやってくれる人を探したほうが良い。

[MrDAUSX]

すみませんでした。卒論に関わることなので焦っていました。

Answer 1

エラーの起こっているコードの時点で、loadQueueのcompleteイベントがまだ発火していないからだと考えられます。

  var obj = new THREE.Group();

   const GSquare = new THREE.BoxGeometry(1000,1000,1000);

   const MSquare = new THREE.MeshPhongMaterial({ // 材質     
        map: texleft_center,//ここでエラーが発生
        //map:getTexture('left_center'),
        side: THREE.DoubleSide // 裏からも見えるようにする
      })
   const Square =  new THREE.Mesh(GSquare, MSquare);

   obj.add(Square);

を

 loadQueue.on('complete', function(){
    var image           = loadQueue.getResult('left_center');
    var texleft_center         = new THREE.Texture(image);
    texleft_center.needsUpdate = true;
 });

の中に入れれば解決すると思います。

Comments

[MrDAUSX]

//オブジェクト群
の上にloadqueueの下りを記述したら成功しました！
サイズの問題なのか立方体のうち3つの面が黒いままですが、おそらくサイズの問題かと思われます。
（BoxGeometry(1000,1000,1000)に182×557のテクスチャ）
ありがとうございました！