Class Raycaster

This class is designed to assist with raycasting

Remarks

Raycasting is used for mouse picking (working out what objects in the 3d space the mouse is over) amongst other things.

Example

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

function onPointerMove(event) {
    // calculate pointer position in normalized device coordinates (-1 to +1) for both components
    pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
    pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function render() {
    // update the picking ray with the camera and pointer position
    raycaster.setFromCamera(pointer, camera);
    // calculate objects intersecting the picking ray
    const intersects = raycaster.intersectObjects(scene.children);
    for (let i = 0; i & lt; intersects.length; i++) {
        intersects[i].object.material.color.set(0xff0000);
    }
    renderer.render(scene, camera);
}
window.addEventListener('pointermove', onPointerMove);
window.requestAnimationFrame(render);

See

Constructors

constructor

Properties

ray near far camera layers params

Methods

set setFromCamera setFromXRController intersectObject intersectObjects

Constructors

constructor

  • new Raycaster(origin?, direction?, near?, far?): Raycaster

  • This creates a new Raycaster object.

    Parameters

    • Optionalorigin: Vector3

      The origin vector where the ray casts from. Default new Vector3()

    • Optionaldirection: Vector3

      The direction vector that gives direction to the ray. Should be normalized. Default new Vector3(0, 0, -1)

    • Optionalnear: number

      All results returned are further away than near. Near can't be negative. Expects a Float. Default 0

    • Optionalfar: number

      All results returned are closer than far. Far can't be lower than near. Expects a Float. Default Infinity

    Returns Raycaster

Properties

ray

ray: Ray

The THREE.RaycasterRay | Ray used for the raycasting.

near

near: number

The near factor of the raycaster. This value indicates which objects can be discarded based on the distance.
This value shouldn't be negative and should be smaller than the far property.

Remarks

Expects a Float

Default Value

0

far

far: number

The far factor of the raycaster. This value indicates which objects can be discarded based on the distance.
This value shouldn't be negative and should be larger than the near property.

Remarks

Expects a Float

Default Value

Infinity

camera

camera: Camera

The camera to use when raycasting against view-dependent objects such as billboarded objects like THREE.Sprites | Sprites.
This field can be set manually or is set when calling setFromCamera.

Default Value

null

layers

layers: Layers

Used by Raycaster to selectively ignore 3D objects when performing intersection tests.
The following code example ensures that only 3D objects on layer 1 will be honored by the instance of Raycaster.

raycaster.layers.set( 1 );
object.layers.enable( 1 );

Default Value

new THREE.Layers() - See THREE.Layers | Layers.

params

params: RaycasterParameters

An data object where threshold is the precision of the Raycaster when intersecting objects, in world units.

Default Value

{ Mesh: {}, Line: { threshold: 1 }, LOD: {}, Points: { threshold: 1 }, Sprite: {} }

Methods

set

  • set(origin, direction): void

  • Updates the ray with a new origin and direction

    Parameters

    • origin: Vector3

      The origin vector where the ray casts from.

    • direction: Vector3

      The normalized direction vector that gives direction to the ray.

    Returns void

    Remarks

    Please note that this method only copies the values from the arguments.

setFromCamera

  • setFromCamera(coords, camera): void

  • Updates the ray with a new origin and direction.

    Parameters

    • coords: Vector2

      2D coordinates of the mouse, in normalized device coordinates (NDC)---X and Y components should be between -1 and 1.

    • camera: Camera

      camera from which the ray should originate

    Returns void

setFromXRController

  • setFromXRController(controller): this

  • Updates the ray with a new origin and direction.

    Parameters

    • controller: XRTargetRaySpace

      The controller to copy the position and direction from.

    Returns this

intersectObject

  • intersectObject<TIntersected>(object, recursive?, optionalTarget?): Intersection<TIntersected>[]

  • Checks all intersection between the ray and the object with or without the descendants

    Type Parameters

    Parameters

    • object: Object3D<Object3DEventMap>

      The object to check for intersection with the ray.

    • Optionalrecursive: boolean

      If true, it also checks all descendants. Otherwise it only checks intersection with the object. Default true

    • OptionaloptionalTarget: Intersection<TIntersected>[]

      Target to set the result. Otherwise a new Array | Array is instantiated.
      If set, you must clear this array prior to each call (i.e., array.length = 0;). Default []

    Returns Intersection<TIntersected>[]

    An array of intersections is returned.

    Remarks

    Intersections are returned sorted by distance, closest first

    See

    .intersectObjects().

intersectObjects

  • intersectObjects<TIntersected>(objects, recursive?, optionalTarget?): Intersection<TIntersected>[]

  • Checks all intersection between the ray and the objects with or without the descendants

    Type Parameters

    Parameters

    • objects: Object3D<Object3DEventMap>[]

      The objects to check for intersection with the ray.

    • Optionalrecursive: boolean

      If true, it also checks all descendants of the objects. Otherwise it only checks intersection with the objects. Default true

    • OptionaloptionalTarget: Intersection<TIntersected>[]

      Target to set the result. Otherwise a new Array | Array is instantiated.
      If set, you must clear this array prior to each call (i.e., array.length = 0;). Default []

    Returns Intersection<TIntersected>[]

    An array of intersections is returned.

    Remarks

    Intersections are returned sorted by distance, closest first

    See

    .intersectObject().

Settings

Member Visibility

On This Page

constructorraynearfarcameralayersparamssetsetFromCamerasetFromXRControllerintersectObjectintersectObjects