Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 1.2.0 version
The raycaster component does general intersection testing with a raycaster. Raycasting is the method of extending a line from an origin towards a direction, and checking whether that line intersects with other entites. The raycaster component is a wrapper on top of the three.js raycaster. It checks for intersections at a certain interval against a list of objects, and will emit events on the entity when it detects intersections or clearing of intersections (i.e., when the raycaster is no longer intersecting an entity).
The raycaster component is what the cursor component is built upon.
<a-entity id="player" collider-check>
|far||Maximum distance under which resulting entities are returned. Cannot be lower then
|interval||Number of milliseconds to wait in between each intersection test. Lower number is better for faster updates. Higher number is better for performance.||100|
|near||Minimum distance over which resuilting entities are returned. Cannot be lower than 0.||0|
|objects||Query selector to pick which objects to test for intersection. If not specified, all entities will be tested.||null|
|recursive||Checks all children of objects if set. Else only checks intersections with root objects.||true|
The raycaster component is useful because of the events it emits on entities. It will emit events on both the raycasting entity and the intersected entities.
|raycaster-intersected||Emitted on the intersected entity. Entity is intersecting with a raycaster. Event detail will contain
|raycaster-intersected-cleared||Emitted on the intersected entity. Entity is no longer intersecting with a raycaster. Event detail will contain
|raycaster-intersection||Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain
|raycaster-intersection-cleared||Emitted on the raycasting entity. Raycaster is no longer intersecting with an entity. Event detail will contain
|intersectedEls||Entities currently intersecting the raycaster.|
|objects||three.js objects to test for intersections. Will be
|raycaster||three.js raycaster object.|
|refreshObjects||Refreshes the list of objects based off of the
The raycaster has an origin, where its ray starts, and a direction, where the ray goes.
The origin of the raycaster is at the raycaster entity’s position. The origin of the raycaster can be changed by setting the position component of the raycaster entity (or parent entities of the raycaster entity).
The direction of the raycaster is in “front” of the raycaster entity (i.e.,
0 0 -1, on the negative Z-axis). The direction of the raycaster can be changed by setting the rotation component of the raycaster entity (or parent entities of the raycaster entity).
For example, here is applying a raycaster along the length of a rotated bullet:
<!-- Bullet, rotated to be parallel with the ground. -->
We usually don’t want everything in the scene to be tested for intersections (e.g., for collisions or for clicks). It is also good for performance to limit the number of entities to test for intersection since it is an operation that will usually run many times per second.
To select or pick the entities we want to test for intersection, we can use the
objects property. If this property is not defined, then every object in the
scene will be tested for intersection.
objects takes a query selector value:
<a-entity raycaster="objects: .clickable" cursor></a-entity>
When using with the cursor, note there is currently a bug that requires the raycaster component be defined before the cursor component.