Raycasting & Interaction in Three.js 3D WebGL

So far, our 3D worlds have been purely visual. But what if you want to click on a 3D object to select it or trigger an event?

A WebGL canvas is just a single <canvas> element containing a flat grid of colored pixels — there's no way to attach a native onClick handler to an individual mesh the way you would to a DOM element, because as far as the browser is concerned, the cube and the background are all just pixels drawn by the GPU.

To make 3D objects clickable, you need to work backwards: given a 2D click position on the canvas, figure out which 3D object (if any) exists behind that pixel. That's the job of raycasting, which we'll build in this lesson.

You can't just attach an 'onClick' event to a WebGL canvas easily, because it's just a flat 2D image of pixels. We need to cast a Ray.

THREE.Raycaster is the class built specifically for this: given an origin point and a direction, it can test for intersections against any object (or array of objects) in your scene, returning the ones the ray actually passes through. THREE.Vector2 is just a lightweight (x, y) container used to hold the mouse's normalized coordinates before they're handed to the raycaster.

You typically create one Raycaster instance and reuse it every frame or on every click, rather than instantiating a new one each time — there's no need to recreate it since setFromCamera() simply overwrites its origin and direction.

Here is how it works: you convert the mouse's 2D screen coordinates into normalized device coordinates (-1 to +1).

Browser mouse events give you clientX/clientY in pixels, but the Raycaster expects coordinates in NDC space, where (-1, -1) is the bottom-left of the canvas and (1, 1) is the top-right, with (0, 0) at dead center. Dividing by innerWidth/innerHeight and remapping to the -1..1 range performs that conversion.

Notice the Y axis is inverted (the leading minus sign) — screen coordinates increase downward while NDC/clip space Y increases upward, so without that flip your raycasts would be vertically mirrored from where the user is actually pointing.

Then, you tell the Raycaster to shoot a ray from the camera through that mouse coordinate. It returns an array of all objects the ray hit!

setFromCamera(mouse, camera) computes the ray's origin and direction using the camera's position and projection, effectively projecting a line from the eye through that point on the near plane and out into the scene. intersectObjects() then tests that ray against every object you pass in (optionally recursing into children) and returns an array of intersection results, sorted from nearest to farthest.

Each entry in that array is more than just the object — it also includes the exact intersection point in world space, the distance from the ray origin, and (for meshes) the face that was hit, which is useful for things like placing decals or reading UV coordinates at the click point.

Doing this in vanilla Three.js requires a lot of boilerplate. React Three Fiber handles ALL of this for you automatically!

In vanilla Three.js you're responsible for wiring up the mousemove/click listeners, converting coordinates to NDC, creating and updating the Raycaster every frame, and manually diffing which object was previously hovered versus currently hovered to fire enter/leave-style events yourself.

R3F builds a single shared raycaster into its render loop and automatically tests it against every mesh registered in the scene graph, so it can dispatch familiar-feeling pointer events without you writing any raycasting code by hand.

In R3F, you can attach standard React event listeners like onClick, onPointerOver, and onPointerOut directly to your meshes!

Under the hood these aren't real DOM events — R3F's internal raycaster runs each frame, determines which mesh (if any) is currently under the pointer, and synthesizes a React-like event object that gets passed to your handler, complete with things like intersection point and distance.

Because these props live directly on the JSX element, event handling stays colocated with the object it affects, which is a big ergonomic win over manually cross-referencing intersected objects against a lookup table in vanilla Three.js.

In React Three Fiber, if you want an action to occur when the user clicks on a 3D sphere, which prop do you use on the <mesh> tag?

The answer is onClick, which behaves like its DOM namesake: it fires once the raycaster determines a pointer-down-then-up sequence happened over that specific mesh. There's no onIntersect or onRaycast prop — R3F deliberately mirrors familiar DOM event names (onClick, onPointerOver, onPointerOut, onPointerMove, onWheel, and more) so you can reuse existing React mental models instead of learning a raycasting-specific API.

Because these are just props, you can pass any function reference — an inline arrow function, a memoized callback, or a handler shared across multiple meshes — exactly as you would with a regular DOM element.

Let's see it in action! Below is a fully interactive 3D scene. Hover over the boxes to see them change color, and click them to make them jump!

The InteractiveBox component tracks hovered and active as local React state, driven entirely by onPointerOver, onPointerOut, and onClick — no manual raycasting code appears anywhere in this component, because R3F's internal picking system handles all of it behind the scenes.

Notice that scale and color are derived directly from that state rather than imperatively mutated, which is the idiomatic R3F pattern: let React re-render the mesh's props declaratively whenever pointer interaction changes the underlying state.

R3F passes an 'Event' object to these handlers just like the DOM. event.stopPropagation() stops the ray from passing through the object to hit objects behind it.

By default, a single ray can intersect and report multiple overlapping objects along its path, and R3F will fire the corresponding handler on the nearest one first, then continue notifying handlers on objects further behind it unless you explicitly stop that propagation.

Calling event.stopPropagation() inside your handler halts this bubbling-through-depth behavior, ensuring only the frontmost object the user actually clicked responds — this mirrors how stopPropagation() works for nested DOM elements, just applied to 3D depth instead of the DOM tree.

Amazing! You can now build fully interactive 3D interfaces, games, and data visualizations. We are reaching the advanced stages!

With raycasting under your belt, you have the core primitive behind object picking, drag-and-drop in 3D, hover tooltips, and click-to-select UI patterns — nearly every interactive Three.js application relies on the same setFromCamera / intersectObjects pattern you learned here, whether written by hand or abstracted away by React Three Fiber.

In the next lesson, we'll build on this interactivity foundation and look at shaders, which control exactly how the pixels of these objects get colored on the GPU.

So far, our 3D worlds have been purely visual. But what if you want to click on a 3D object to select it or trigger an event?

You can't just attach an 'onClick' event to a WebGL canvas easily, because it's just a flat 2D image of pixels. We need to cast a Ray.

Which Three.js class is used to shoot an invisible laser beam from the camera into the 3D scene to figure out which objects the mouse is hovering over?

• →MousePicker
• →ClickDetector
• →Raycaster

Here is how it works: you convert the mouse's 2D screen coordinates into normalized device coordinates (-1 to +1).

Then, you tell the Raycaster to shoot a ray from the camera through that mouse coordinate. It returns an array of all objects the ray hit!

The Raycaster returns an array of intersected objects. Which element in the array is the object closest to the camera (the one the user actually clicked on)?

• →The last element
• →0 (The first element)
• →It is random

Doing this in vanilla Three.js requires a lot of boilerplate. React Three Fiber handles ALL of this for you automatically!

In R3F, you can attach standard React event listeners like onClick, onPointerOver, and onPointerOut directly to your meshes!

In React Three Fiber, if you want an action to occur when the user clicks on a 3D sphere, which prop do you use on the <mesh> tag?

• →onIntersect
• →onClick
• →onRaycast

Let's see it in action! Below is a fully interactive 3D scene. Hover over the boxes to see them change color, and click them to make them jump!

R3F passes an 'Event' object to these handlers just like the DOM. event.stopPropagation() stops the ray from passing through the object to hit objects behind it.

Amazing! You can now build fully interactive 3D interfaces, games, and data visualizations. We are reaching the advanced stages!