3dhtml Example :: SolarSystem3D

<!--
/*
 * 3dhtml Example :: SolarSystem3D
 * Version 1.0, 20/11/2001
 * 
 * Copyright (c) 2001 by Netzministerium.de
 * Written by Till Nagel and René Sander.
 * Distributed under the terms of the GNU Lesser General Public. (See licence.txt for details)
 */
-->
<html>
<head>
<title>3dhtml Example :: SolarSystem3D</title>

<!-- helper libs -->
<script language="JavaScript" src="../js/LyrObj.js"></script>
<script language="JavaScript" src="../js/ClipButton.js"></script>
<script language="JavaScript" src="../js/ColorUtil.js"></script>
<!-- core 3dhtml lib -->
<script language="JavaScript" src="../js/3dhtml.js"></script>
<!-- modulators -->
<script language="JavaScript" src="../js/MouseModulator.js"></script>
<!-- materials -->
<script language="JavaScript" src="../js/materials.js"></script>

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

// ---------------------------------------------------------------------------
// MATERIALS

var sunMaterial = new Material('<img src="images/sun.gif" width="20" height="20" alt="" border="0">');
var mercuryMaterial = createClipButtonMaterial("images/mercury.gif", 20, 180, 20, 20, 9);
var venusMaterial = createClipButtonMaterial("images/venus.gif", 20, 180, 20, 20, 9);
var earthMaterial = createClipButtonMaterial("images/earth.gif", 20, 180, 20, 20, 9);
var moonMaterial = createClipButtonMaterial("images/moon.gif", 20, 180, 20, 20, 9);
var marsMaterial = createClipButtonMaterial("images/mars.gif", 20, 180, 20, 20, 9);

// ---------------------------------------------------------------------------
// MODELS

// A Planet object to capsule planet properties
function Planet(name, material, distance, rotation) {
	this.name = name;
	this.distance = distance;
	this.rotation = rotation;
	this.toString = PlanetToString;
	
	// creates new planet model
	this.model = new Model(name, material);
	this.model.setPoints( new Array( new Point3D(0, 0, 0, 0) ) );
	
	// moves the planet to its position
	var myMatrix = new Matrix();
	myMatrix.translate(this.distance, 0, 0);
	this.model.transform(myMatrix);

	// assign animate method
	this.animate = PlanetAnimate;
	// renders animation matrix
	this.rotationMatrix = new Matrix();
	this.rotationMatrix.rotateY(this.rotation);
}
function PlanetAnimate() {
	this.model.transform(this.rotationMatrix);
}
function PlanetToString() {
	return this.name + " @ " + this.distance + " with " + this.rotation + ".";
}


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

// the planets
var planets = new Array(
	new Planet("mercury", mercuryMaterial, 0.387, 0.235), // 47.8725 km/s
	new Planet("venus", venusMaterial, 0.72, 0.175), // 35.0214 km/s
	new Planet("earth", earthMaterial, 1, 0.145), // 29.7859 km/s
	new Planet("mars", marsMaterial, 1.5, 0.12) // 24.1309 km/s
	//new Planet("saturn", saturnMaterial, -0.8, 0.05)
);

// the special objects

// sun
var sunModel = new Model("sun", sunMaterial);
sunModel.setPoints( new Array(new Point3D(0, 0, 0, 0)) );

// moon of the earth
var moonModel = new Model("moon", moonMaterial);
moonModel.setPoints( new Array(new Point3D(0, 0, 0, 0)) ); // 1.023 km/s
var moonInitMatrix = new Matrix();
moonInitMatrix.translate(0.1, 0, 0);
//moonModel.setPivot(0.1, 0, 0);
moonModel.transform(moonInitMatrix);


// ---------------------------------------------------------------------------
// MODULATORS

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

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

function initOnLoad() {
	fixNetscape();
	
	// creates and inits matrix to initialize the solar system
	var initMatrix = new Matrix();
	initMatrix.scale(180, 180, 180);
	initMatrix.rotateX( degToRad(-90) );

	sunModel.assignLayers(); // NS bug fix
	sunModel.transform(initMatrix);
	sunModel.draw();
	
	// links all planets to the sun
	for (i = 0; i < planets.length; i++) {
		planets[i].model.assignLayers(); // NS bug fix
		planets[i].model.linkTo(sunModel);
		planets[i].model.draw();
	}

	// links moon to the earth
	moonModel.assignLayers(); // NS bug fix
	moonModel.linkTo(planets[2].model);
	moonModel.draw();
	
	
	// starts animation
	animate();
}

/*
 * The main animate method. Calls itself repeatedly.
 */
function animate() {
	var delay = 1;
	
	// animates modulators ------------------------------------------
	myMouseModulator.animate();
	mouseModMatrix = myMouseModulator.getMatrix();
	
	// animates models ----------------------------------------------

	// transforms the solar system depending on mouse movements.
	sunModel.transform(mouseModMatrix);
	// updates display
	sunModel.draw();

	// rotates every planet
	for (planetIndex = 0; planetIndex < planets.length; planetIndex++) {
		var p = planets[planetIndex];
		if (p.animate) p.animate();
		p.model.draw();
	}
	
	// rotates the moon
	var staticRotateMatrix = new Matrix();
	
	staticRotateMatrix = new Matrix();
	staticRotateMatrix.rotateY(0.4);
	staticRotateMatrix.rotateZ(0.4);
	moonModel.transform(staticRotateMatrix);
	moonModel.draw();
	
	
	// loop ---------------------------------------------------------
	
	// 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);
}


// event handling
document.onmousemove = mouseMoveHandler;
document.onmousedown = mouseDownHandler;
document.onmouseup = mouseUpHandler;
if (ns) 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);
	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);
}


// -->
</script>
</head>

<body onload="initOnLoad()" bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" style="height:100%" bgcolor="black">
<!-- layer to bugfix netscape -->
<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	

sunModel.createPointCode();
moonModel.createPointCode();

for (i = 0; i < planets.length; i++) {
	planets[i].model.createPointCode()
}
// -->
</script>

</body>
</html>
Syntax highlighted by Code2HTML, v. 0.9, modified by Netzministerium, 2001.