How can I pass an array of textures into react-three-fiber mesh?

Question

I am trying to recreate something like a virtual tour of a room given 6 sides of it, (front, back, top, bottom, left and right).

In the other code...

let loader = new THREE.TextureLoader();

    // array for holding all texutre
    let textureArray = [];

    // all texture
    let frontTexture = loader.load(front_texture);
    let backTexture = loader.load(back_texture);
    let topTexture = loader.load(top_texture);
    let bottomTexture = loader.load(bottom_texture);
    let leftTexture = loader.load(left_texture);
    let rightTexture = loader.load(right_texture);

    textureArray.push(new THREE.MeshBasicMaterial({ map: frontTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: backTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: topTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: bottomTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: leftTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: rightTexture }));

    for (let i = 0; i < textureArray.length; i++) {
      textureArray[i].side = THREE.BackSide;
    }

    // making cube
    let cubeGeometry = new THREE.BoxGeometry(100, 100, 100);

    //Assign cube geometry and texture to the mesh
    let mesh = new THREE.Mesh(cubeGeometry, textureArray);

    //Return the mesh
    return mesh;

In the new code...

let loader = new TextureLoader();

  // array for holding all texutre
  let textureArray = [];

  // all texture
  const frontTexture = useLoader(TextureLoader, front_texture);
  const backTexture = useLoader(TextureLoader, back_texture);
  const topTexture = useLoader(TextureLoader, top_texture);
  const bottomTexture = useLoader(TextureLoader, bottom_texture);
  const leftTexture = useLoader(TextureLoader, left_texture);
  const rightTexture = useLoader(TextureLoader, right_texture);

  textureArray.push(new MeshBasicMaterial({ map: frontTexture }));
  textureArray.push(new MeshBasicMaterial({ map: backTexture }));
  textureArray.push(new MeshBasicMaterial({ map: topTexture }));
  textureArray.push(new MeshBasicMaterial({ map: bottomTexture }));
  textureArray.push(new MeshBasicMaterial({ map: leftTexture }));
  textureArray.push(new MeshBasicMaterial({ map: rightTexture }));

  for (let i = 0; i < textureArray.length; i++) {
    textureArray[i].side = BackSide;
  }

  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshBasicMaterial map={frontTexture}  />
    </mesh>
  );

I want to achieve the same result as the code above, but using react-three-fiber or react-three-drei.

score 0 · Answer 1 · answered Nov 25 '22 at 05:08

For R3F, according to discussion here now you should do like this:

<mesh>
  <boxGeometry args={[10, 10, 10]} />
  <meshBasicMaterial attach="material-0" color="0xffffff" /> {/* px */}
  <meshBasicMaterial attach="material-1" color="0xffffff" /> {/* nx */}
  <meshBasicMaterial attach="material-2" color="0xffffff" /> {/* py */}
  <meshBasicMaterial attach="material-3" color="0xffffff" /> {/* ny */}
  <meshBasicMaterial attach="material-4" color="0xffffff" /> {/* pz */}
  <meshBasicMaterial attach="material-5" map={texture} transparent /> {/* nz */}
</mesh>

score 0 · Answer 2 · answered Mar 14 '23 at 16:01

                let loader = new TextureLoader(); 
                // all texture 
                const texture =useLoader(TextureLoader, '/images/front_texture'); 
                const texture1 =useLoader(TextureLoader, '/images/back_texture'); 
        
        return (
        <mesh>
          <boxGeometry args={[1, 1, 1]} />
          <meshBasicMaterial attach="material-0" color="0xffffff" />
          <meshBasicMaterial attach="material-1" color="0xffffff" />
          <meshBasicMaterial attach="material-2" color="0xffffff" />
          <meshBasicMaterial attach="material-3" color="0xffffff" />
          <meshBasicMaterial
            attach="material-4"
            map={texture1}
            color="0xffffff"
          />
          <meshBasicMaterial attach="material-5" map={texture} />
        </mesh>
        );

no need use array

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 20 '23 at 00:20

How can I pass an array of textures into react-three-fiber mesh?

2 Answers2