Different Materials for Front and Back Sides in Three.js

In Three.js, the THREE.DoubleSide setting only determines which sides of a face are rendered, but it doesn't allow you to assign different materials to each side. However, there are a few approaches you can use to achieve different appearances for the front and back of your tiles:

Approach 1: Use Two Separate Meshes

The most straightforward approach is to create two separate meshes that are positioned back-to-back:

JSXCopied
function DoubleSidedTile({ position, onClick }) {
  // Create a group to hold both sides
  const groupRef = useRef();
  const [flipped, setFlipped] = useState(false);
  
  const handleClick = () => {
    setFlipped(!flipped);
    // You could also animate this rotation
  };
  
  useFrame(() => {
    if (groupRef.current) {
      // Animate the flip if needed
      groupRef.current.rotation.y = flipped ? Math.PI : 0;
    }
  });
  
  return (
    <group ref={groupRef} position={position} onClick={handleClick}>
      {/* Front face */}
      <mesh position={[0, 0, 0.01]}>
        <planeGeometry args={[1, 1]} />
        <meshStandardMaterial color="blue" side={THREE.FrontSide} />
      </mesh>
      
      {/* Back face */}
      <mesh position={[0, 0, -0.01]} rotation={[0, Math.PI, 0]}>
        <planeGeometry args={[1, 1]} />
        <meshStandardMaterial color="red" side={THREE.FrontSide} />
      </mesh>
    </group>
  );
}

Approach 2: Use ShaderMaterial

For more advanced control, you can use a ShaderMaterial to determine which side is being rendered and apply different colors/textures accordingly:

JSXCopied
function DoubleSidedTile({ position, onClick }) {
  const meshRef = useRef();
  const [flipped, setFlipped] = useState(false);
  
  // Custom shader material that handles different sides
  const material = useMemo(() => {
    return new THREE.ShaderMaterial({
      side: THREE.DoubleSide,
      uniforms: {
        frontTexture: { value: new THREE.TextureLoader().load('front-texture.jpg') },
        backTexture: { value: new THREE.TextureLoader().load('back-texture.jpg') },
      },
      vertexShader: `
        varying vec2 vUv;
        varying float vSide;
        
        void main() {
          vUv = uv;
          // Determine if this is front or back based on normal direction
          vSide = dot(normalize(normalMatrix * normal), vec3(0.0, 0.0, 1.0)) < 0.0 ? 1.0 : 0.0;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
      `,
      fragmentShader: `
        uniform sampler2D frontTexture;
        uniform sampler2D backTexture;
        varying vec2 vUv;
        varying float vSide;
        
        void main() {
          if (vSide > 0.5) {
            gl_FragColor = texture2D(backTexture, vUv);
          } else {
            gl_FragColor = texture2D(frontTexture, vUv);
          }
        }
      `
    });
  }, []);
  
  const handleClick = () => {
    setFlipped(!flipped);
  };
  
  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.y = flipped ? Math.PI : 0;
    }
  });
  
  return (
    <mesh ref={meshRef} position={position} onClick={handleClick}>
      <planeGeometry args={[1, 1]} />
      <primitive object={material} />
    </mesh>
  );
}

Approach 3: Use a Box Geometry Instead of a Plane

If your tiles have some thickness, you could use a box geometry and assign different materials to different faces:

JSXCopied
function DoubleSidedTile({ position, onClick }) {
  const meshRef = useRef();
  const [flipped, setFlipped] = useState(false);
  
  const handleClick = () => {
    setFlipped(!flipped);
  };
  
  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.rotation.y = flipped ? Math.PI : 0;
    }
  });
  
  // Create an array of materials for each face of the box
  const materials = [
    new THREE.MeshStandardMaterial({ color: 'gray' }), // right side
    new THREE.MeshStandardMaterial({ color: 'gray' }), // left side
    new THREE.MeshStandardMaterial({ color: 'blue' }), // top side
    new THREE.MeshStandardMaterial({ color: 'red' }),  // bottom side
    new THREE.MeshStandardMaterial({ color: 'gray' }), // front side
    new THREE.MeshStandardMaterial({ color: 'gray' })  // back side
  ];
  
  return (
    <mesh ref={meshRef} position={position} onClick={handleClick}>
      <boxGeometry args={[1, 1, 0.1]} />
      {materials.map((material, index) => (
        <primitive key={index} object={material} attach={`material-${index}`} />
      ))}
    </mesh>
  );
}

Each of these approaches has its own advantages depending on your specific requirements for the tiles. The first approach is the simplest, while the second gives you the most control over the appearance.