THREE.TextureのneedsUpdate

ローダを使わずに自力でテクスチャを生成する時は、needsUpdateをtrueにすることを忘れずに。

texture = new THREE.Texture(img); // img要素 or canvas要素
texture.needsUpdate = true;

内部的にどうなっているかというと、最終的にrenderer.setTextureが呼ばれ、ここでneedsUpdateフラグがチェックされます。

メモ

テクスチャの更新

新しく生成する手法。

// update background
bgSprite.texture.image = img
bgSprite.texture.needsUpdate = true;
scene2d.remove(bgSprite);
var w = img.width, h = img.height;
var texture = new THREE.Texture(img);
texture.needsUpdate = true; // IMPORTANT!
var material = new THREE.SpriteMaterial({map: texture});
bgSprite = new THREE.Sprite(material);
bgSprite.position.set(w*0.5, h*0.5, -0.99998);
bgSprite.scale.set(w, -h, 1);
scene2d.add(bgSprite);

テクスチャ部分だけ更新する手法。

if (!bgSprite) {
  // create background sprite
  var w = img.width, h = img.height;
  bgSprite = new THREE.Sprite(new THREE.SpriteMaterial({
    map: new THREE.Texture(img)
  }));
  bgSprite.material.map.needsUpdate = true;
  bgSprite.position.set(w*0.5, h*0.5, -0.99998);
  bgSprite.scale.set(w, -h, 1);
  scene2d.add(bgSprite);
} else {
  // update background texture
  bgSprite.material.map.image = img;
  bgSprite.material.map.needsUpdate = true;
}