The texture is not applied to the second side, or it is applied, but the model becomes flat

[igorklyopov]

Hi all!

I'm trying to make something like a coin that will spin in Next.js.
I have a problem, I can't figure it out. Studying the documentation and searching the Internet has not yet yielded results. I would appreciate any help.

The texture is not applied to the second side, or it is applied, but the model becomes flat.
If you number the material (attach="material-1", attach="material-2 and the like) - I tried different numbering options - the texture is applied, but without color and the volume is lost (the edge of the coin (side faces of the cylinder) disappears)

this is what it looks like:
https://drive.google.com/file/d/1YEslbDb4vEbyIq_9TTNOhIQkR1DBkVIR/view?usp=sharing

"dependencies": {
    "@react-spring/web": "^9.4.3",
    "@react-three/drei": "^9.76.0",
    "@react-three/fiber": "^8.13.3",
    "next": "^13.4.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.49.7",
    "three": "^0.153.0"
  },

код компонента:

import { Canvas, useLoader } from '@react-three/fiber';
import { degToRad } from 'three/src/math/MathUtils';
import * as THREE from 'three';
import { TextureLoader } from 'three/src/loaders/TextureLoader';
import { CameraControls } from '@react-three/drei';

const Coin3D = () => {
  const cameraParams = {
    fov: 45,
    near: 0.1,
    far: 1000,
    positionX: 0,
    positionY: 0,
    positionZ: 120,
  };

  const colors = {
    ambientLight: '#ffffff',
    primaryBgDarkShade: '#4d5561', // #55616b
    primaryBgDark: '#434b57',
  };
  const coinGeometryParams = {
    radiusTop: 40,
    radiusBottom: 40,
    height: 4,
    radialSegments: 32,
  };

  const coinHeadImg = 'assets/images/coin-head-bg.png';
  const coinTailImg = 'assets/images/coin-tail-bg.png';

  const colorMap_1 = useLoader(TextureLoader, coinHeadImg);
  const colorMap_2 = useLoader(TextureLoader, coinTailImg);

  return (
    <Canvas
      camera={{
        fov: cameraParams.fov,
        near: cameraParams.near,
        far: cameraParams.far,
        position: [
          cameraParams.positionX,
          cameraParams.positionY,
          cameraParams.positionZ,
        ],
      }}
      color={colors.primaryBgDark}
    >
      <ambientLight intensity={0.1} />
      <directionalLight
        color={colors.ambientLight}
        position={[-1, 2, 30]}
        intensity={0.3}
      />
      <mesh rotation-x={degToRad(90)} rotation-y={degToRad(90)}>
        <cylinderGeometry
          attach="geometry"
          args={[
            coinGeometryParams.radiusTop,
            coinGeometryParams.radiusBottom,
            coinGeometryParams.height,
            coinGeometryParams.radialSegments,
          ]}
        />
        <meshPhongMaterial
          attach="material-1"
          flatShading
          shininess={150}
          map={colorMap_1}
        />
        <meshPhongMaterial
          attach="material-2"
          flatShading
          shininess={150}
          map={colorMap_2}
        />
      </mesh>
      <CameraControls />
    </Canvas>
  );
};
export default Coin3D;

[CodyJasonBennett]

See Material.side, you'd want to set it as side={THREE.DoubleSide} in your case.