How to have multiple materials in one mesh.

[cmd-save]

Hi have a <mesh> and works perfectly with one material. However, what I want to do is to have 2 materials for this mesh. Ideally one for the front and one for the back side. Think of a cloth where in the front side has the clear print and on the back side has lesser or faded image of the front. I tried material.side=THREE.FrontSide and material2.side=THREE.BackSide and then assigning these materials to the <mesh> like so <mesh material={[material, material2]}/>. This does not have any effect. Anyone has any idea?

[gsimone]

To my understanding multiple materials in threejs get applied to different faces, not necessarily to the whole mesh. For what you need, I'd suggest using two meshes, one with FrontSide and one with BackSide.

If you are making the assumption based on a three.js example, maybe link it here.

[MustSeeMelons]

What is the point for passing in an array of materials for a mesh then? 🤔

[cmd-save]

Yes- that's exactly what we did. At the end, we end up with two meshes for each side. My understanding was because there are materials for FrontSide and BackSide we can just attach it to a single mesh. In addition, having two meshes might increase the file. In turns out, it's not really the case. Anyhow- thank you.

[drcmda]

i dont think threejs can do that. you can have one material per face. and all you need to do is write an array into mesh.material.

<mesh>
  <meshBasicMaterial attachArray="material" color="red" />
  <meshBasicMaterial attachArray="material" color="green" />
  <meshBasicMaterial attachArray="material" color="blue" />

if threejs can do it somehow, then r3f can as well, in the same exact way you'd make it.

[DonHuskini]

on R3F, can do:

import { useLoader } from "@react-three/fiber";
import { TextureLoader } from "three";

const [map1, map2] = useLoader(TextureLoader, ["/image.jpg", "/image2.png"]);

<mesh>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial attachArray="material" map={map1} />
  <meshStandardMaterial attachArray="material" map={map2} />
  <meshBasicMaterial attachArray="material" color="yellow" />
  <meshBasicMaterial attachArray="material" color="pink" />
  <meshBasicMaterial attachArray="material" color="black" />
  <meshBasicMaterial attachArray="material" color="blue" />
</mesh>

** make sure to have 6 meshes for a boxGeometry
** For showing color only, use meshBasicMaterial and for showing a custom texture use meshStandardMaterial

[linonetwo]

Seems things changed:

Property 'attachArray' does not exist on type 'ExtendedColors<Overwrite<Partial<MeshBasicMaterial>, NodeProps<MeshBasicMaterial, [MeshBasicMaterialParameters]>>>'.ts(2322)

[linonetwo]

Due to https://github.com/pmndrs/react-three-fiber/blob/484c6787bd4862d50a6fd38e436413f06f394fdb/docs/tutorials/v8-migration-guide.mdx#unified-attach-api

It will be like this now:

      <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" color="0xffffff" />
      {/* <meshBasicMaterial attach="material-5" color="0xffffff" /> */}
      <meshBasicMaterial attach="material-5" map={texture} transparent />

[spsitherTCRC]

That worked for me. Thanks !

[jjalonso]

I think I can reuse the same post to ask the same, What i want is to apply to a sphere the look of meshToonMaterial (like cell shading ish) with the MeshDistortMaterial jelly animation.