Our 3D objects can respond to pointer events and if anytime their props or state was changed.
In this example we can see that our boxes respond to events indicating when your pointer is down, up, over and out. The information is logged to the console.
There are many events that you add to your Threejs objects, See the list on the official documentation.
Note that when we capture an event, a lot of information about the event is passed into the callback. Example, if an object was clicked, then we can get information about that object, the 3D vector where the click occurred, the distance from the camera of the click, which face of the object was clicked, the UV coordinate of the click, and many things.
The pointer events rely on a raycaster that is automatically created when the React Three Fiber
Canvas is instantiated.
Since the information about the event is passed into the callback, we don't need to create any dedicated useRef hook for our object to read that data. All the required information referencing our object is present in case we want to use that data or inspect it further in the console.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git cd React-Three-Fiber-Boilerplate git checkout events npm install npm start