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}
>

<directionalLight
color={colors.ambientLight}
position={[-1, 2, 30]}
intensity={0.3}
/>

<cylinderGeometry
attach="geometry"
args={[
coinGeometryParams.radiusTop,
coinGeometryParams.radiusBottom,
coinGeometryParams.height,
coinGeometryParams.radialSegments,
]}
/>





);
};
export default Coin3D;