Â« Â»

Cet Le code JavaScript fait une auto-renouvelable de cube, qui fonde le drag & drop état des utilisateurs. Huit points qui ont de petites ou de grande taille, dépendent de la position de la création d'un cube de spin si l'utilisateur peut cliquer et faire glisser la souris.

Label: 3D cube tournant avec la souris

Rapport ï¿½ nous de cette erreur JavaScript

Demo
Agrandir
Recharger
Nouvelle fenï¿½tre

Code
Files
JavaScript
HTML
Imprimer

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