« »

This JavaScript code generate a colorful cubikcube which can revolve on centre point by itself. Beside, it can be enlarged if user do left-clicking mouse on web page.

Label: 3D Opening Hex Cube

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
HTML
Print

Copy All x2

<SCRIPT language=javascript>
<!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de

/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

/*
 * OpeningHexCube3D
 *
 * Inspired by this Colorcube (http://www.proce55ing.net/examples/colorcube/index.html)
 *
 */

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

// creates scene model (without material)
var sceneModel = new Model("scene");
sceneModel.setPoints( new Array(new Point3D(0, 0, 0)) );

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

// creates hexcolored cube model
var cubeModel = new Model("cube", new Material('??'));
cubeModel.setPoints(createCubeModelPoints());
// setting the other materials beneath

// ---------------------------------------------------------------------------
xb=new Array("00", "7F", "FF")
var hc = 0;
for (r = 0; r < 3; r++) {
	for (g = 0; g < 3; g++) {
		for (b = 0; b < 3; b++) {
			var hex = "#" + xb[r] + xb[g] + xb[b]; // or with: new Color(RGBToHex(r, g, b)) ?
			var hexMaterial = createColorRectMaterial(new Color(hex), new Color("#FFFFFF"), "images/space.gif");
			hexMaterial.refresh = function myColorRectMaterialRefresh(p) {
				with (p.lyr.ref) {
					backgroundColor = this.myColorBlend.getColor(normalize(p.z, -70, 70, 0, 1)).getHex();
					height = width = normalize(p.z, -70, 70, 10, 50);
				}
			}
			//hexMaterial.body = '<a href="javascript://" onclick="alert(\"' + hex + '\")"><img src="images/space.gif" width="1" height="1" alt="" border="0"></a>';
			
			// assigns the created hexColorRectMaterials to the cube
			cubeModel.materials[hc] = hexMaterial;
			
			hc++;
		}
	}
}


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

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

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

// modulator to scale the cube if mouseDown
var myMouseScaleModulator = new MouseScaleModulator("myMouseScaleModulator", MouseScaleModulator.MODE_UNIFORM);

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

function initOnLoad() {
	fixNetscape();
	
	cubeModel.assignLayers();
	
	// creates and inits matrix to initialize the model
	var initMatrix = new Matrix();
	initMatrix.scale(50, 50, 50);
	
	// transforms the scene model instead of the cube
	// to be able to perform the nonuniform scale transformation correctly
	sceneModel.transform(initMatrix);
	
	cubeModel.linkTo(sceneModel);
	cubeModel.draw();
	
	// starts animation
	animate();
}

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

/*
 * The main animate method. Calls itself repeatedly.
 */
function animate() {
	
	// rotates the complete scene
	sceneModel.transform(staticRotationMatrix);


	// renders next step
	myMouseScaleModulator.animate();
	// scales the cube
	cubeModel.transform(myMouseScaleModulator.getMatrix());

	cubeModel.draw();
	
	
	setTimeout("animate()", 1);
}

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

// event forwarding
function mouseDownHandler(e) { myMouseScaleModulator.down(e); return !ie;}
function mouseUpHandler(e) { myMouseScaleModulator.up(e); return !ie;}


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

function createCubeModelPoints() {
	var tmpArray = new Array();
	var c = 0;
	
	for (x = -1; x <= 1; x+=1) {
		for (y = -1; y <= 1; y+=1) {
			for (z = -1; z <= 1; z+=1) {
				//alert(c + "= Point(" + x + " " + y + " " + z + ")");
				tmpArray[c] = new Point3D(x, y, z, c);
				c++;
			}
		}
	}
	return tmpArray;
}

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

Copy All x2

<BODY onload=initOnLoad()>
<!-- layer to bugfix netscape -->
<DIV id=fixnetscape style="VISIBILITY: hidden; POSITION: absolute"></DIV>
<SCRIPT language=JavaScript type=text/javascript>
	<!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de
	cubeModel.createPointCode();
	// -->
	</SCRIPT>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->