3dhtml Example :: Molecule3D

<!--
/*
 * 3dhtml Example :: Molecule3D
 * 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 :: Molecule3D</title>
<!-- helper libs -->
<script language="JavaScript" src="../js/LyrObj.js"></script>
<script language="JavaScript" src="../js/ClipButton.js"></script>
<!-- core 3dhtml lib -->
<script language="JavaScript" src="../js/3dhtml.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

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

// some atom materials
var nitrogen = createClipButtonMaterial("images/balls_blue.gif", 20, 180, 20, 20, 9);
var hydrogen = createClipButtonMaterial("images/balls_gray.gif", 20, 180, 20, 20, 9);
var oxygen = createClipButtonMaterial("images/balls_red.gif", 20, 180, 20, 20, 9);
var carbon = createClipButtonMaterial("images/balls_green.gif", 20, 180, 20, 20, 9);

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

// the transformation matrix
var scaleMatrix = new Matrix();
scaleMatrix.scale(10, 10, 10);

// the scene model to link the molecules to
var mySceneModel = new Model("mySceneModel");
mySceneModel.setPoints( new Array( new Point3D(0, 0, 0) ) );
mySceneModel.transform(scaleMatrix);

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

// creates water model with materials
var waterModel = new Model("water", hydrogen);
waterModel.materials[1] = oxygen;
// defines model points.
waterModel.setPoints(createWaterModelPoints());

// creates benzene model with materials
var benzeneModel = new Model("benzene", hydrogen);
benzeneModel.materials[1] = carbon;
// defines model points.
benzeneModel.setPoints(createBenzeneModelPoints());

// creates nitroglycerin model with materials
var nitroglycerinModel = new Model("nitroglycerin", hydrogen);
nitroglycerinModel.materials[1] = carbon;
nitroglycerinModel.materials[2] = nitrogen;
nitroglycerinModel.materials[3] = oxygen;
// defines model points.
nitroglycerinModel.setPoints(createNitroglycerinModelPoints());


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

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

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

function initOnLoad() {
	fixNetscape();
	
	// assign layers (only for Netscape 4.x, for all other browsers
	// this is done automatically when writing the point code
	waterModel.assignLayers();
	benzeneModel.assignLayers();
	nitroglycerinModel.assignLayers();
	
	// >> begin to work with the model etc.

	// connects water model to the (scaled) scene model
	waterModel.linkTo(mySceneModel);
	
	// connects benzene model to the (scaled) scene model
	benzeneModel.linkTo(mySceneModel);
	// sets the pivot in parent world coordinate
	benzeneModel.setPivot(new Point3D(15, 0, 0));
	
	// translates the points to rotate about the geometrical center of gravity.
	var m = new Matrix();
	m.translate(-29.853, -9.303, 18.481);
	nitroglycerinModel.transform(m);
	// connects nitro model to the (scaled) scene model
	nitroglycerinModel.linkTo(mySceneModel);
	// sets the pivot in parent world coordinate
	nitroglycerinModel.setPivot(new Point3D(30, 0, 0));

	
	// >> first draw of the model (recommended)
	waterModel.draw();
	benzeneModel.draw();
	nitroglycerinModel.draw();
	
	// starts animation
	animate();
}



/*
 * The main animate method. Calls itself repeatedly.
 */
function animate() {
	var delay = 10;
	
	// animates models ----------------------------------------

	// transforms the water depending on mouse movements.
	waterModel.transform(staticRotationMatrix);
	// updates display
	waterModel.draw();
	
	// transforms the water depending on mouse movements.
	benzeneModel.transform(staticRotationMatrix);
	// updates display
	benzeneModel.draw();

	// transforms the water depending on mouse movements.
	nitroglycerinModel.transform(staticRotationMatrix);
	// updates display
	nitroglycerinModel.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 createWaterModelPoints() {
	var H = 0;
	var O = 1;
	// the water model
	return new Array(
		new Point3D( 0.000,  0.000,  0.000, O),
		new Point3D(-0.928, -0.013, -0.246, H),
		new Point3D( 0.263,  0.899,  0.209, H)
	);
}

function createBenzeneModelPoints() {
	var H = 0;
	var C = 1;
	return new Array(

		new Point3D( 0.739, -1.193,  0.007, C),
		new Point3D(-0.614, -1.212, -0.352, C),
		new Point3D(-1.352,  0.029, -0.352, C),
		new Point3D(-0.739,  1.185, -0.359, C),
		new Point3D( 0.614,  1.204, -0.007, C),
		new Point3D( 1.353,  0.015,  0.358, C),
		
		new Point3D( 1.309, -2.110,  0.012, H),
		new Point3D(-1.088, -2.144, -0.623, H),
		new Point3D(-2.397, -0.038, -0.635, H),
		new Point3D(-1.309,  2.102, -0.013, H),
		new Point3D( 1.088,  2.136,  0.622, H),
		new Point3D( 2.397,  0.030,  0.635, H)
	);
}

function createNitroglycerinModelPoints() {
	var H = 0;
	var C = 1;
	var N = 2;
	var O = 3;

	return new Array(
		new Point3D(30.941,  10.276, -17.565, O),
		new Point3D(29.729,  10.673, -18.355, C),
		new Point3D(29.818,  10.071, -19.769, C),
		new Point3D(29.887,   8.536, -19.670, C),
		new Point3D(31.099,   8.139, -18.881, O),
		new Point3D(28.606,  10.468, -20.559, O),
		new Point3D(31.093,  10.732, -16.165, N),
		new Point3D(32.289,  10.340, -15.386, O),
		new Point3D(30.178,  11.475, -15.620, O),
		new Point3D(31.391,   6.708, -18.642, N),
		new Point3D(32.586,   6.316, -17.863, O),
		new Point3D(30.597,   5.795, -19.117, O),
		new Point3D(28.314,  11.899, -20.797, N),
		new Point3D(27.119,  12.291, -21.577, O),
		new Point3D(29.108,  12.812, -20.322, O),
		new Point3D(28.833,  10.301, -17.857, H),
		new Point3D(29.680,  11.760, -18.425, H),
		new Point3D(30.714,  10.443, -20.267, H),
		new Point3D(28.991,   8.164, -19.173, H),
		new Point3D(29.950,   8.110, -20.672, H)
	);
}
// -->
</script>
</head>

<body onload="initOnLoad()" bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" style="height:100%">

	<!-- 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	
	waterModel.createPointCode();
	benzeneModel.createPointCode();
	nitroglycerinModel.createPointCode();
	// -->
	</script>

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