Bump banknotes

src/components/scene/banknote.tsx

@@ -3,11 +3,7 @@ import { useLoader } from "@react-three/fiber";
 import { CoinProps } from "@/types/coin";
 import { useMemo } from "react";
 
-export const BanknoteInstance = ({
-  color,
-  obverse,
-  reverse,
-}: CoinProps) => {
+export const BanknoteInstance = ({ obverse, reverse }: CoinProps) => {
   const obverseTexture: THREE.Texture = useLoader(
     THREE.TextureLoader,
     obverse.picture,
@@ -17,60 +13,77 @@ export const BanknoteInstance = ({
     reverse.picture,
   );
 
+  const obverseBumpTexture: THREE.Texture = useLoader(
+    THREE.TextureLoader,
+    "/photos/seamless-paper-normal-map.jpg",
+  );
+
+  obverseBumpTexture.repeat = new THREE.Vector2(1, 0.25);
+  obverseBumpTexture.wrapS = THREE.RepeatWrapping;
+  obverseBumpTexture.wrapT = THREE.RepeatWrapping;
+  obverseBumpTexture.offset = new THREE.Vector2(Math.random(), Math.random());
+
+  const reverseBumpTexture = obverseBumpTexture.clone();
+  reverseBumpTexture.repeat = new THREE.Vector2(-1, 0.25);
+
   const width = useMemo(() => {
     try {
-      return 2*obverseTexture.source.data.width/obverseTexture.source.data.height
+      return (
+        (2 * obverseTexture.source.data.width) /
+        obverseTexture.source.data.height
+      );
     } catch {
-      return 4
+      return 4;
     }
-  }, [obverseTexture])
+  }, [obverseTexture]);
 
   return (
     <>
-      <boxGeometry
-        attach="geometry"
-        args={[width,2,0.01]}
-      />
+      <boxGeometry attach="geometry" args={[width, 2, 0.005]} />
 
       <meshStandardMaterial
-        color={color}
+        color={"#888"}
         metalness={0}
         roughness={0.5}
         attach="material-0"
       />
 
       <meshStandardMaterial
-        color={color}
+        color={"#888"}
         metalness={0}
         roughness={0.5}
         attach="material-1"
       />
 
       <meshStandardMaterial
-        color={color}
+        color={"#888"}
         metalness={0}
         roughness={0.5}
         attach="material-2"
       />
 
       <meshStandardMaterial
-        color={color}
+        color={"#888"}
         metalness={0}
         roughness={0.5}
         attach="material-3"
       />
 
       <meshStandardMaterial
-        color={'#888'}
+        color={"#888"}
         map={obverseTexture}
+        bumpMap={obverseBumpTexture}
+        bumpScale={0.1}
         metalness={0}
         roughness={0.5}
         attach="material-4"
       />
 
       <meshStandardMaterial
-        color={'#888'}
+        color={"#888"}
         map={reverseTexture}
+        bumpMap={reverseBumpTexture}
+        bumpScale={0.1}
         metalness={0}
         roughness={0.5}
         attach="material-5"