Search code examples
three.jswebgl

Can't clone() Texture

Basicly,

this works:

var expl1 = new THREE.ImageUtils.loadTexture( 'images/explodes/expl1.png' );
this.material = new THREE.MeshBasicMaterial({ map: expl1, transparent:true, blending:THREE.AdditiveBlending });

And this doesnt...

var expl1 = new THREE.ImageUtils.loadTexture( 'images/explodes/expl1.png' );
this.material = new THREE.MeshBasicMaterial({ map: expl1.clone(), transparent:true, blending:THREE.AdditiveBlending });

The problem is, i have multiple objects with this texture. I want to be able to change the texture offsets of 1 of the objects without the others changing also. That's why i need clone, but the cloned texture seems to be empty.

var expl1 = new THREE.ImageUtils.loadTexture( 'images/explodes/expl1.png' );

this is only loaded once in a global variable. I could load a new texture each time i'm creating a new object, but because it's 700KB, it creates lag when loading the image.

Solution

  • EDIT: THREE.ImageUtils.loadTexture() has been replaced by loader = new THREE.TextureLoader(); loader.load().

    This is likely because new THREE.TextureLoader().load() sets the needsUpdate flag for you, while cloning does not.

    Do this, instead

    const texture2 = texture1.clone();
texture2.needsUpdate = true;
const material = new THREE.MeshBasicMaterial( { map: texture2, ... } );

    three.js r.75