Multiple Texture mapping

Questions
,
1

I have a cube where I have applied a texture on all sides. I want to apply different texture on different sides of the cube.

const textureLoader = new THREE.TextureLoader();

    textureLoader.load(imagePath, (texture) => {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();
      texture.colorSpace = THREE.SRGBColorSpace;

      if (this.mesh && this.mesh.material && this.mesh.material.map) {
        this.mesh.material.map.dispose();
      }


      const newMaterial  = new THREE.MeshPhongMaterial({ map: texture }); // Use MeshPhongMaterial for lighting.

      
      const backMaterial = new THREE.MeshPhongMaterial({ map: textureLoader.load('/assets/outerSpace.jpg') });
      //this.mesh.material = material;
      const materials = [newMaterial, newMaterial, backMaterial, newMaterial, newMaterial, newMaterial];


      this.mesh = new THREE.Mesh(this.geometry, materials); // If a single material is placed in the parameter instead of array, it works but when an array is placed, it gives error 
      this.scene.add(this.mesh);

      this.animate(); // Start the animation loop after everything is set up.

This gives an error “test.component.ts:150 ERROR TypeError: Cannot read properties of undefined (reading ‘identity’)”.

2

Your error sounds like a typscript issue but your code is vanilla.

Can you paste line 150 of test.component.ts so we can see what the error is?

3

Line 150 is the “textureLoader.load (…” which is already pasted in the snippet above.
It is an angular app with threejs in it.

The error occurs as I try to pass an array “materials” in the this.mesh parameter.

4

I just tried:


  let mat1 = new THREE.MeshBasicMaterial({ map: tex })
  let mat2 = new THREE.MeshBasicMaterial({color:'red'})
  
  let mats = [mat1,mat1,mat2,mat1,mat2,mat1];
  
  let bx = new THREE.Mesh(
    new THREE.BoxGeometry(),
    mats
  );
  scene.add(bx);

and it worked fine:

image
image1344×1030 231 KB

We’ll probably need to see more code to figure out the problem. Ideally a reproduction in codepen or glitch.

Here’s a glitch template you can “remix” to show your issue… dunnno how to turn on typescript in there but theres prolly a way… Once u repro your issue in there you can “Share->Code” and paste us the link.

Good luck!

1 Like
5

Thanks for the help. I fixed it. The error was elsewhere on another function where it was attempting to access properties on the texture.matrix object. but the texture or texture.matrix was undefined at the time the function being called.

1 Like