4.3 Molecule3D

  Launch example    View color-coded source

Three molecules with different materials spinning around their axes.

Material
Every single Point3D has a Material defining its consistence. Its appearance may change depending on other factors such as the z coordinate.

A material basically contains a string with HTML code which will make up the content of a point's DIV. Additionally it has a JavaScript statement - the refresh() method - that is called when drawing the points, so the material appearance may change.
See also 5.1 3dhtml # Material.
See also 5.5 Materials if you just want to use one of the supplied materials.

A simple text without refresh as used in the example 4.1 Cube3D.
var simpleTextMaterial = new Material("°");
In this Molecule3D example we use some ClipButtonMaterials.
// 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);
Obviously we can assign a material to several models:
var aModel = new Model("aModel", hydrogen);
var anotherModel = new Model("anotherModel", hydrogen);
Furthermore we can assign more than one material to a single model. Each Point3D has a reference to its material via an index to the material array of its model. [...]
// creates water model with materials
var waterModel = new Model("water", hydrogen);
waterModel.materials[1] = oxygen;
// defines model points.
waterModel.setPoints(createWaterModelPoints());


function createWaterModelPoints() {
	var H = 0;
	var O = 1;
	// the water model (H2O)
	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)
	);
}


Scene Model & Pivot
A scene model helps to build a complete scene, e.g. if you build all objects in their respective model coordinate system and scale the whole scene model all your objects will scale, too.
// the scene model to link the molecules to
var mySceneModel = new Model("mySceneModel");
mySceneModel.setPoints( new Array( new Point3D(0, 0, 0) ) );


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

// connects benzene model to the (scaled) scene model
benzeneModel.linkTo(mySceneModel);
Since we want to rotate each molecule model around its own point - the so called pivot - we must set them in parent coordinate system.
// sets the pivot in parent coordinates
benzeneModel.setPivot(new Point3D(15, 0, 0));
The Point3D in the example above lies at 15 in parent coordinate system which is 150 in world coordinate system due to the ten times enlarged scene model coordinate system (the parent).

Links