4. Events

The following code briefly shows how to handle events occurring in a 3D model. As you can see from the example below, it is very clear and simple. The table below describes the events handled by threefy.

Event	Occurs When
onClick	The user clicks on a 3D element
onContextMenu	The user right-clicks on a 3D element
onDoubleClick	The user double-clicks on a 3D element
onWheel	The mouse wheel is rolled over a 3D element
onPointerMove	The pointer is moving over a 3D element
onPointerOver (or onPointerEnter)	The mouse pointer is moved over a 3D element
onPointerOut (or onPointerLeave)	The mouse pointer moves out of a 3D element
onPointerDown	The mouse button is pressed over a 3D element
onPointerUp	The mouse button is released over a 3D element

<mesh scale={10}
    onClick={(e, mesh)        => console.log( e.type, mesh ) }
    onContextMenu={(e, mesh)  => console.log( e.type, mesh ) }
    onDoubleClick={(e, mesh)  => console.log( e.type, mesh ) }
    onWheel={(e, mesh)        => console.log( e.type, mesh ) }
    onPointerMove={(e, mesh)  => console.log( e.type, mesh ) }
    onPointerEnter={(e, mesh) => console.log( e.type, mesh ) }
    onPointerLeave={(e, mesh) => console.log( e.type, mesh ) }
    onPointerDown={(e, mesh)  => console.log( e.type, mesh ) }
    onPointerUp={(e, mesh)    => console.log( e.type, mesh ) }
>
    <boxGeometry/>
    <meshStandardMaterial color={'red'}/>
</mesh>