Khối lập phương tự quay

[JavaScriptBank]

Tám điểm tròn tự xoay theo các quĩ đạo khác nhau được qui định trước, tạo nên một hình vuông tự động quay quanh một trục cố định....

You must be registered for see links

tại

You must be registered for see links

You must be registered for see links

Demo:

You must be registered for see links

|

You must be registered for see links

Cách cài đặt

Bước 1: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript

<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, [email protected] & Rene Sander, [email protected]

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

// creates cube model with name and (a simple) material
var cubeModel = new Model("cube", new Material("°"));

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

Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML

<DIV id=fixnetscape style="POSITION: absolute; VISIBILITY: hidden"></DIV>
<SCRIPT language=JavaScript type=text/javascript>
	<!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]
	
	// 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>

Bước 3: Tải các file bên dưới về
Files

You must be registered for see links

You must be registered for see links

You must be registered for see links

You must be registered for see links

Đoạn mã tương tự
-

You must be registered for see links

-

You must be registered for see links

Một vài nhãn tương tự:

You must be registered for see links

,

You must be registered for see links

,

You must be registered for see links

,

You must be registered for see links

,

You must be registered for see links

,

You must be registered for see links

,

You must be registered for see links

,

You must be registered for see links

,

You must be registered for see links

Bạn có thể xem thêm nhiều JavaScript khác về

You must be registered for see links

You must be registered for see links

-

You must be registered for see links

-

You must be registered for see links