Events

Video Lecture

Section	Video Links
Events

Description

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.

`./src/Box.jsx`

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'

export default function Box(props) {
  const ref = useRef()

  useFrame((_, delta) => {
    ref.current.rotation.x += 1 * delta
    ref.current.rotation.y += 0.5 * delta
  })

  return (
    <mesh
      {...props}
      ref={ref}
      onPointerDown={(e) => console.log('pointer down ' + e.object.name)}
      onPointerUp={(e) => console.log('pointer up ' + e.object.name)}
      onPointerOver={(e) => console.log('pointer over ' + e.object.name)}
      onPointerOut={(e) => console.log('pointer out ' + e.object.name)}
      onUpdate={(self) => console.log(self)}
    >
      <boxGeometry />
      <meshBasicMaterial color={0x00ff00} wireframe />
    </mesh>
  )
}

Note that If two meshes are overlapping each other, then the mouse event will also be captured by the object behind. You can prevent this behavior by using the stopPropagation() method in your event handler.

E.g.,

  onPointerDown={e => {
    e.stopPropagation()
    // ...
  }}

Useful Links


Events	docs.pmnd.rs
Pointer Events	docs.pmnd.rs
THREE.Raycaster	threejs.org

Working Example

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout events
npm install
npm start

	Zabbix
	Grafana
	Prometheus
	React Three Fiber
	Threejs and TypeScript
	SocketIO and TypeScript
	Blender Topological Earth
	Sweet Home 3D
	Design Patterns Python
	Design Patterns TypeScript

	Course Coupon Codes

Three.js and TypeScript
		Kindle Edition Paperback
Design Patterns in TypeScript
		Kindle Edition Paperback
Design Patterns in Python
		Kindle Edition Paperback