Full version: jsB@nk » 3D » 3D self-revolving MoleCubes
URL: https://www.javascriptbank.com/examples-molecube3d.html
This JavaScript code generate three molecules with different materials. It imitate the molecele models. Beside, these molecubes can revolve by itself.
Full version: jsB@nk » 3D » 3D self-revolving MoleCubes
URL: https://www.javascriptbank.com/examples-molecube3d.html
<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]// ---------------------------------------------------------------------------// some atom materialsvar 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 matrixvar scaleMatrix = new Matrix();scaleMatrix.scale(10, 10, 10);// the scene model to link the molecules tovar mySceneModel = new Model("mySceneModel");mySceneModel.setPoints( new Array( new Point3D(0, 0, 0) ) );mySceneModel.transform(scaleMatrix);// ---------------------------------------------------------------------------// creates water model with materialsvar waterModel = new Model("water", hydrogen);waterModel.materials[1] = oxygen;// defines model points.waterModel.setPoints(createWaterModelPoints());// creates benzene model with materialsvar benzeneModel = new Model("benzene", hydrogen);benzeneModel.materials[1] = carbon;// defines model points.benzeneModel.setPoints(createBenzeneModelPoints());// creates nitroglycerin model with materialsvar 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 withvar 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 modelwaterModel.linkTo(mySceneModel);// connects benzene model to the (scaled) scene modelbenzeneModel.linkTo(mySceneModel);// sets the pivot in parent world coordinatebenzeneModel.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 modelnitroglycerinModel.linkTo(mySceneModel);// sets the pivot in parent world coordinatenitroglycerinModel.setPivot(new Point3D(30, 0, 0));// >> first draw of the model (recommended)waterModel.draw();benzeneModel.draw();nitroglycerinModel.draw();// starts animationanimate();}/* * 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 displaywaterModel.draw();// transforms the water depending on mouse movements.benzeneModel.transform(staticRotationMatrix);// updates displaybenzeneModel.draw();// transforms the water depending on mouse movements.nitroglycerinModel.transform(staticRotationMatrix);// updates displaynitroglycerinModel.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 modelreturn 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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=initOnLoad()><!-- layer to bugfix netscape --><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 methodwaterModel.createPointCode();benzeneModel.createPointCode();nitroglycerinModel.createPointCode();// --></SCRIPT></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/3d/js/LyrObj.jshttp://javascriptbank.com/javascript/3d/js/3dhtml.jshttp://javascriptbank.com/javascript/3d/js/ClipButton.jshttp://javascriptbank.com/javascript/3d/js/materials.js