VirtualMouse of Whitestorm framework. Picking objects in 3D apps

Tutorial that explains how to use WHS.VirtualMouse tool

This article will be useful for those, who are going to make a new 3D web application or just a nice game with unique controls and user interaction.

If you are new to Three.js and Whitestorm framework (a superset of Three.js) it’s better to see what are them first. Find Whitestorm’s API to deep in you can by the following link

Let’s start.

How is it implemented in 3D?

Mouseover

Our main goal is to make the app understand when a mouse is moving over the 3D object. To do that we should start from a 3D ray.

The logic is simple:

1. Create a ray from 2D coordinates and camera properties (direction, perspective and other).
2. Check if a ray intersects specific object.
3. If intersects — mouse is over this object, if not — it isn’t.

Wrapping this process you can make mouseout and mousemove events.

Visualization of projected cursor (ray)

Handle mouse events in Whitestorm framework

In Whitestorm Framework there is a class called VirtualMouse. It wraps the process above into DOM-like API.

In performance reasons, simulated events will work only with “tracked” objects. With mouse.track() we add a sphere to this tracked objects list.

Supported events are:

• mouseover
• mouseout
• mousemove
• click
• mousedown
• mouseup

Picking an object (Drag)

There is a bit different process of moving an object with a participation of math plane, this plane is infinite.

• Create a math plane (THREE.Plane)
• Create a ray (as in the previous example)
• Get their intersection

softbody / ropes

Check this demo

Default math plane will always look at world.camera position. If you want to use a custom one — pass it as a parameter: mouse.project(plane);

Implementation in code

Cause Whitestorm provides you physics support, there are two different ways of picking object.

I want to have collisions (i use physics)

You need to change object’s velocity into mouse direction.

.multiplyScalar() speeds up sphere velocity. The bigger number you pass — the more realistic it will be (use at your own risk).

I don’t want to have collisions (i don’t use physics)

Overwrite sphere’s position with mouse 3D coordinates.

For more information and other mouse methods see an official VirtualMouse documentation.