« »

This JavaScript code makes an self-revolving cube which bases on drag&drop status of users. Eight dots which have small or large size, depend on position of them to create a cube can spin if user click and drag mouse.

Label: 3D revolving cube with mouse

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
HTML
Print

Copy All x2

<SCRIPT language=javascript>
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
<!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de

// ---------------------------------------------------------------------------

// creates cube model with ColorRectMaterial blending from white to bhack
var cubeModel;
cubeModel = new Model("cube", createColorRectMaterial(new Color("000000"), new Color("ffffff"), "images/space.gif"));
// Wow - Netscape really sucks. Remove this comment line and it won't recognize the first point!

// defines model points.
// The model's points have to be defined before the respective code is written into the document.
cubeModel.setPoints(createCubeModelPoints());


// ---------------------------------------------------------------------------

// modulator to rotate the model dependent on mouse interactions
var myMouseModulator = new MouseModulator("myMouseModulator", 0);


// ---------------------------------------------------------------------------

function initOnLoad() {
	fixNetscape();

	cubeModel.assignLayers();
	
	// creates and inits matrix to initialize the model
	var initMatrix = new Matrix();
	initMatrix.scale(50, 50, 50);
	
	// >> begin to work with the model etc.

	// initializes model
	cubeModel.transform(initMatrix);
	
	// >> first draw of the model (recommended)
	 cubeModel.draw();
	
	// starts animation
	animate();
}

/*
 * 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 aw possible.
	setTimeout("animate()", delay);
}


// event handling
document.onmousemove = mouseMoveHandler;
document.onmousedown = mouseDownHandler;
document.onmouseup = mouseUpHandler;
if (ns || ns6) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);

/*
 * The mouse handlers in this document must call the modulator's handlers.
 * To be able to use a mouse modulator and to do your own stuff.
 */
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);
}



// ---------------------------------------------------------------------------

function createCubeModelPoints() {
	// the cube model
	return new Array(
		new Point3D( 1,  1,  1, 0),
		new Point3D( 1,  1, -1, 0),
		new Point3D( 1, -1,  1, 0),
		new Point3D( 1, -1, -1, 0),
		new Point3D(-1,  1,  1, 0),
		new Point3D(-1,  1, -1, 0),
		new Point3D(-1, -1,  1, 0),
		new Point3D(-1, -1, -1, 0)
	);
}

// -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<DIV id=fixnetscape style="POSITION: absolute; VISIBILITY: hidden"></DIV>
<SCRIPT language=JavaScript type=text/javascript>
	<!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de
	
	/* MANDATORY: INSERTION OF HTML PART INTO PAGE
	   creates the HTML code representing the model's points
	   NB: This is written directly into the page from within the method */
	
	cubeModel.createPointCode();
	// -->
	</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->