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 ( <> - +