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.
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