How can I use onClick on mesh?

[kaeltran16]

Hi guys,
I just started using react-three-fiber and three.js. I read the document and there are events on mesh but when I tried it on simple example, it didn't seem to work. Can anyone help me, thanks.

My example:

<Canvas className="canvas" orthographic
             camera={{ zoom: state.zoom, position: [0, 0, 500] }}>
       <Suspense
         fallback={<Dom center className="loading" children="Loading..."/>}>
         <mesh
           onClick={(e) => console.log('click')}>
           <planeBufferGeometry attach="geometry"/>
           <meshBasicMaterial attach="material" color="#dfdfdf" transparent/>
         </mesh>
       </Suspense>
</Canvas>

[drcmda]

the basic demo on the GH front has click events: https://codesandbox.io/s/r3f-basic-demo-rrppl0y8l4

if yours doesnt work then thats most likely a css issue, maybe your canvas is behind another div, maybe it has pointer-events: none, etc.

btw suspense is for async assets, when you have something that needs useLoader. otherwise it will do nothing, the mesh alone doesn't have a delay.