title: How to assign different click function to each face of the cube in react three fibre
body: <p>Hi I have a simple Cube component made with <em>react three fibre</em>.</p>
  <pre><code> import {useState,useRef} from 'react';
     import { useFrame } from '@react-three/fiber';
     const Box = ({props}) =&gt;{
      const ref = useRef()
      const [hovered, hover] = useState(false)
      
      const boxClick = () =&gt;{
          alert('clicked the object')
      }
      return ( 
        &lt;mesh
          {...props}
          ref={ref}
          onClick={boxClick}
          scale={2}
          onPointerOver={(event) =&gt; hover(true)}
          onPointerOut={(event) =&gt; hover(false)}&gt;
          &lt;boxGeometry args={[1.5, 1.5, 1.5]} /&gt;
          &lt;meshStandardMaterial color={hovered ? 'yellow' : 'orange'} /&gt;
        &lt;/mesh&gt;
      )
    }
    export default Box;
  </code></pre>
  <p>I am importing the Box compoent in App.js and using it this way-</p>
  <pre><code>    function App() {
  
    const [boxes,setBoxes] = useState(0);
    const box1Click = () =&gt;{
      setBoxes(() =&gt;boxes+1)
      alert(boxes)
    }
    return (
     &lt;Canvas className='main-canvas'&gt;
  
        &lt;ambientLight intensity={0.5} /&gt;
        &lt;spotLight position={[5, 155, 10]} angle={0.15} penumbra={1} /&gt;
        &lt;pointLight position={[-100, -200, -100]} /&gt;
        &lt;Box position = {[0 ,0,0]}  /&gt;  
  
      &lt;/Canvas&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Right now I can click the cube and it runs the boxClick function properly. What I want to assign different click function to each face of the cube.</p>