Add texture filters to sidebar

src/components/filters/index.tsx

@@ -7,9 +7,11 @@ import { Sidebar, SidebarProps } from 'primereact/sidebar';
 import { Slider } from 'primereact/slider';
 import { useEffect, useMemo, useReducer } from 'react';
 import { useRouter } from 'next/router';
+import { useShowcaseStore } from '@/components/showcase/store';
 
 type Props = SidebarProps & {
   filterBanknotes?: boolean;
+  filterTextures?: boolean;
   query: ParsedUrlQuery;
 };
 
@@ -188,8 +190,12 @@ const getDefaultParams = (query: ParsedUrlQuery) => {
   };
 };
 
-export const Filters = ({ filterBanknotes, query, ...sidebarProps }: Props) => {
+export const Filters = ({ filterBanknotes, filterTextures, query, ...sidebarProps }: Props) => {
   const router = useRouter();
+  const setTextureBase = useShowcaseStore(state => state.setTextureBase);
+  const setTextureBump = useShowcaseStore(state => state.setTextureBump);
+  const textureBase = useShowcaseStore(state => state.textureBase);
+  const textureBump = useShowcaseStore(state => state.textureBump);
   const [state, dispatch] = useReducer(reducer, getDefaultParams(query));
 
   const [validFaceValue, stringifiedState] = useMemo(() => {
@@ -211,6 +217,25 @@ export const Filters = ({ filterBanknotes, query, ...sidebarProps }: Props) => {
   return (
     <Sidebar position={'right'} {...sidebarProps}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+        {filterTextures && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <MultiToggleFilter
+              baseName={'texture'}
+              items={[
+                {
+                  name: 'base',
+                  set: payload => setTextureBase(!!payload),
+                  value: textureBase
+                },
+                {
+                  name: 'bump',
+                  set: payload => setTextureBump(!!payload),
+                  value: textureBump
+                }
+              ]}
+            />
+          </div>
+        )}
         {!filterBanknotes && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
             <MultiToggleFilter

src/components/pile/index.tsx

@@ -7,6 +7,7 @@ import { Physics, PlaneProps, usePlane } from '@react-three/cannon';
 import { StageLightModel } from './stage-light-model';
 import { Suspense, useMemo, useRef } from 'react';
 import { useNumistaTypes } from '@/core/hooks/use-types';
+import { useShowcaseStore } from '@/components/showcase/store';
 import styles from './index.module.css';
 
 const Plane = (props: PlaneProps) => {
@@ -40,6 +41,8 @@ const StageLight = (
 };
 
 export const Pile = () => {
+  const hasTextureBase = useShowcaseStore(state => state.textureBase);
+  const hasTextureBump = useShowcaseStore(state => state.textureBump);
   const coins = useNumistaTypes({ filterBanknotes: true });
   const count = useMemo(() => {
     return coins?.reduce((total, coin) => total + (coin.count ?? 1), 0) ?? 0;
@@ -83,7 +86,7 @@ export const Pile = () => {
           <Plane position={[0, -2, 0]} rotation={[-Math.PI / 2, 0, 0]} />
           {count < 200 &&
             coins?.map(coinProps => (
-              <Suspense fallback={null} key={coinProps.id}>
+              <Suspense fallback={null} key={`${coinProps.id}-${hasTextureBase}-${hasTextureBump}`}>
                 <CoinInstances {...coinProps} />
               </Suspense>
             ))}

src/components/showcase/index.tsx

@@ -14,6 +14,8 @@ export const Showcase = () => {
   const previousIndex = useShowcaseStore(state => state.previousIndex);
   const toggleSpin = useShowcaseStore(state => state.toggleSpin);
   const setOrbitControlsRef = useShowcaseStore(state => state.setOrbitControlsRef);
+  const hasTextureBase = useShowcaseStore(state => state.textureBase);
+  const hasTextureBump = useShowcaseStore(state => state.textureBump);
 
   useNumistaTypes({ onSuccess: setTypes });
 
@@ -44,8 +46,7 @@ export const Showcase = () => {
       <Canvas className={styles.canvas}>
         <ambientLight />
         <directionalLight position={[0, 0.125, 1]} />
-        <directionalLight position={[0, 0.125, -1]} />
-        <Row />
+        <Row key={`${hasTextureBase}-${hasTextureBump}`} />
         <OrbitControls
           enablePan={false}
           enableRotate={!isSpinning}

src/components/showcase/store.ts

@@ -14,7 +14,11 @@ interface ShowcaseStore {
   orbitControlsRef: MutableRefObject<OrbitControls | null>;
   previousIndex: () => void;
   setOrbitControlsRef: (ref: OrbitControls | null) => void;
+  setTextureBase: (value: boolean) => void;
+  setTextureBump: (value: boolean) => void;
   setTypes: (types?: NumistaType[] | null) => void;
+  textureBase: boolean;
+  textureBump: boolean;
   toggleSpin: () => void;
   types: NumistaType[];
 }
@@ -59,6 +63,14 @@ export const useShowcaseStore = create<ShowcaseStore>((set, get) => ({
     set(() => ({
       orbitControlsRef: { current: instance }
     })),
+  setTextureBase: value =>
+    set(() => ({
+      textureBase: value
+    })),
+  setTextureBump: value =>
+    set(() => ({
+      textureBump: value
+    })),
   setTypes: types =>
     set(() => ({
       currentIndex: 0,
@@ -66,6 +78,8 @@ export const useShowcaseStore = create<ShowcaseStore>((set, get) => ({
       isTransitioning: true,
       types: Array.isArray(types) ? types : []
     })),
+  textureBase: true,
+  textureBump: true,
   toggleSpin: () =>
     set(state => {
       if (!state.isSpinning) {

src/pages/pile.tsx

@@ -26,6 +26,7 @@ const PilePage: NextPage<Props> = ({ query }) => {
       <Filters
         className={styles.sidebar}
         filterBanknotes
+        filterTextures
         onHide={() => setDrawerVisible(false)}
         query={query}
         visible={drawerVisible}

src/pages/showcase.tsx

@@ -25,6 +25,7 @@ const ShowcasePage: NextPage<Props> = ({ query }) => {
 
       <Filters
         className={styles.sidebar}
+        filterTextures
         onHide={() => setDrawerVisible(false)}
         query={query}
         visible={drawerVisible}