Cloning texture

Questions
#1

Hello everyone! I have a little problem with texture cloning. I want to use texture with the same image, but different parameters of scale and offset. ‘MapTex’ is working correctly but ‘MapTex2’ without image, just black color.
Here my code:

var loader = new THREE.TextureLoader();
var MainTex =  loader.load('https://i.ibb.co/swNjWWs/Untitled-7-01.png',
  function (  ) {
  MainTex.needsUpdate = true; 
  MainTex.wrapS = THREE.RepeatWrapping;
  MainTex.wrapT = THREE.RepeatWrapping;
  MainTex.repeat.set (1,1);
  MainTex.anisotropy = 50;
  MainTex2.needsUpdate = true;
  });

  var MainTex2 = MainTex.clone();

  var frontMaterial = new THREE.MeshPhongMaterial  ({ map: MainTex });
  var frontMaterial2 = new THREE.MeshPhongMaterial  ({ map: MainTex2 });
#2

You can first clone the texture when its image property was set. That happens in TextureLoader as soon as the image has been loaded. So the solution is to move the clone operation in the onLoad() callback.

#3

Or you can use await loader.loadAsync:

var loader = new THREE.TextureLoader();
var MainTex =  await loader.loadAsync('https://i.ibb.co/swNjWWs/Untitled-7-01.png')

MainTex.needsUpdate = true; 
MainTex.wrapS = THREE.RepeatWrapping;
MainTex.wrapT = THREE.RepeatWrapping;
MainTex.repeat.set (1,1);
MainTex.anisotropy = 50;
MainTex2.needsUpdate = true;

var MainTex2 = MainTex.clone();

var frontMaterial = new THREE.MeshPhongMaterial  ({ map: MainTex });
var frontMaterial2 = new THREE.MeshPhongMaterial  ({ map: MainTex2 });
1 Like