VirtualMouseModule

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().

JavaScript

const mouse = new WHS.VirtualMouseModule();

const app = new WHS.App([
  // ...
  mouse
]);

// ... <- there you define sphere

mouse.track(sphere);

sphere.on('mouseover', () => {
  sphere.material.color.set(0xffff00);
  console.log('mouseover');
});

sphere.on('mousemove', () => {
  console.log('mousemove');
});

sphere.on('mouseout', () => {
  sphere.material.color.set(0xF2F2F2);
  console.log('mouseout');
});

sphere.on('click', () => {
  alert('click!');
});

.track(component)

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

JavaScript

// const world = ...

const mouse = new WHS.VirtualMouseModule(world);

const app = new WHS.App([
  // ...
  mouse
]);

mouse.on('move', () => {
  box.setLinearVelocity(mouse.project().sub(box.position));
});

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

.project(plane)

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).

.intersection(component)

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

.hovers(component)

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

📘

As :hover pseudo-selector in CSS.