We noticed that usage of cursor in 3D is a bit cumbersome in Three.js because you need to wrap that functionality (project the cursor in 3D coordinates with camera) so decided to provide a wrapper for it.

DOM-like events

The event listeners are not added to each component by default, for performance reason. To enable them, invoke .track().

const mouse = new WHS.VirtualMouseModule();

const app = new WHS.App([
  // ...

// ... <- there you define sphere


sphere.on('mouseover', () => {

sphere.on('mousemove', () => {

sphere.on('mouseout', () => {

sphere.on('click', () => {


Tracks mouse events on this component.

Events list

  • mouseover - when your cursor was out of component and moved to it.
  • mouseout - when your cursor left component.
  • mousemove - when your cursor moves in component area.
  • click - click & (cursor is in component area)
  • mousedown - mousedown & (cursor is in component area)
  • mouseup - mouseup & (cursor is in component area)

Move event

// const world = ...

const mouse = new WHS.VirtualMouseModule(world);

const app = new WHS.App([
  // ...

mouse.on('move', () => {

This example makes the box fly to mouse position to the cursor projected on a math plane (see .project()).


It returns a 3D vector that is your cursor projected on a math plane with normal that looks at your camera.

plane - math plane that is used for projection (.projectionPlane by default).


Find intersection between cursor ray and component. (Returns object as in THREE.Raycaster)


Similar to .intersection, but returns a boolean (true if ray intersected component).


As :hover pseudo-selector in CSS.