Posted at

複数の画像をループ処理でシーンに追加する

More than 3 years have passed since last update.

簡単なことなのに,探してもでてこず悩んでしまった事案なのでメモ

ローカルにある画像ファイルをfor文でループさせてたくさん表示させる時のコードの書き方です

for(var i in array){  // arrayには画像URLなどが入っている

var imageUrl = array[i].imageURL;
var texture = THREE.ImageUtils.loadTexture(imageUrl);
var materialImg = new THREE.SpriteMaterial({map: texture, color: 0xFFFFFF});
var w = 416, h = 227.5;
spriteImage[i] = new THREE.Sprite(materialImg);
scene.add(spriteImage[i]);
}

よく落ちているコードは,textureのcallback関数部分にマテリアルの定義とかシーンへの追加が書いてあるんですが,それだと,for文が終了した後に実行されてしまうので,この書き方でないと,1枚しか画像が表示されません.

callbackじゃないとこに書けばいいだけなのに,中々思いつかなかったのがなんとも悔しいのでメモです.

これだとうまく動かないこととかあるのだろうか...もしそこら辺知っていらっしゃる方がいたらコメントにてご教示いただければと思います.