3D self-revolving cube

This is a spinning three dimensional cube. Eight dots revolve by itself to create a motional cube.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript 3D self-revolving cube

How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript

Code:

<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 name and (a simple) material
var cubeModel = new Model("cube", new Material("&deg;"));

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


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

// the matrix to transform the model with
var staticRotationMatrix = new Matrix();
staticRotationMatrix.rotateX(0.05);
staticRotationMatrix.rotateY(0.1);

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

function initOnLoad() {
	fixNetscape();
	
	// assign layer (only for Netscape 4.x, for all other browsers
	// this is done automatically when writing the point code)
	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 ----------------------------------------

	// rotates the cube
	cubeModel.transform(staticRotationMatrix);
	
	// 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);
}



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

function createCubeModelPoints() {
	// the cube model
	return new Array(
		//  Point3D( x,  y,  z, m)
		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>

Step 2: Place HTML below in your BODY section
HTML

Code:

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

Step 3: downloads
Files
LyrObj.js
3dhtml.js
ColorUtil.js
materials.js

JavaScript Spotlight - JavaScript Validate E-Mail - AJAX Page Content Loader