Interactivity in 3D
Screens on mobile and desktop are two dimensional. They have x and y axes. A first step in 3D interactions is to translate the 2D co-ordinates of a touch or mouse position, into 3D space. This is done by casting a ray or line and capturing where it intersects with objects. Three. js has a ‘raycaster’ class that handles this and can return the array of objects intersected. You can analyse the intersected objects and react to the event. This can be triggered on clicks, touches, mouse movements or other events. Dragging, which is a combination of clicking and moving a finger or mouse, is common as well. Also using accelerometer or gyroscope data makes for exciting interactions as well.