LoginSignup
1

More than 5 years have passed since last update.

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

Posted at

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

ローカルにある画像ファイルを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じゃないとこに書けばいいだけなのに,中々思いつかなかったのがなんとも悔しいのでメモです.

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1