4.2 MouseCube3D

  Launch example    View color-coded source

The Cube3D has grown up. Now we can move and drag the mouse to rotate the cube.

Modulator
The modulators help us to bundle recurring transformations and decouple mouse events from the rendering process. The 3dhtml toolkit includes three examples: the MouseModulator, the MouseScaleModulator, and the HeartBeatModulator.
See also 5.1 3dhtml # Modulator.

The following MouseModulator returns a rotation matrix depending on mouse interactions. When a mouseUp event occurs the rotation will fade to null (spins the object).
// modulator to rotate the model dependent on mouse interactions
var myMouseModulator = new MouseModulator("myMouseModulator", 0);
A good place to use the modulators is the animate() method (see also 4.1 Transformation).
Let's have a look ..
/*
 * The main animate method. Calls itself repeatedly.
 */
function animate() {
	var delay = 10;
	
	// animates cube model ----------------------------------------

	// animates the modulator to spin the cube
	myMouseModulator.animate();
	// transforms the cube depending on mouse movements.
	cubeModel.transform(myMouseModulator.getMatrix());
	
	// updates display
	cubeModel.draw();
	
	// calls itself with an delay to decouple client computer speed from the animation speed.
	// result: the animation is as fast as possible.
	setTimeout("animate()", delay);
}
[..] You can create your own modulators to match your individual transformation wishes. Om.

Mouse interaction & event handling
The mouse handlers in this document must call the modulator's handlers to pass trough the events. So it's possible to use a mouse modulator and own mouse stuff together.
function mouseMoveHandler(e) {
	// calls move handler of the mouse modulator
	myMouseModulator.move(e);

	/*
	// other stuff, e.g.
	if (ns || ie) {
		mouseX = (ns) ? e.pageX : event.x;
		mouseY = (ns) ? e.pageY : event.y;
	}
	*/

	return !ie;
}

function mouseDownHandler(e) {
	// calls down handler of the mouse modulator
	myMouseModulator.down(e);
}

function mouseUpHandler(e) {
	// calls up handler of the mouse modulator
	myMouseModulator.up(e);
}

Material
When viewing the example, you probably noticed that the points look a bit different from those in the previous tutorial. This is because we're not using the simple material - which was just a string in a layer - anymore, but a more complex one, a colored box that adjusts its size depending on its z coordinate.
For a deeper explanation of materials in 3dhtml, read the next tutorial, 4.3 Molecule3D.

Links