diff --git a/src/components/scene/banknote.tsx b/src/components/scene/banknote.tsx
index 8a068ba..c8fc313 100644
--- a/src/components/scene/banknote.tsx
+++ b/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 (
<>
-
+