»
EnglishFrenchVietnamese

Print - 3D self-revolving MoleCubes - JavaScriptBank.com

Full version: jsB@nk » 3D » 3D self-revolving MoleCubes
URL: https://www.javascriptbank.com/examples-molecube3d.html

3D self-revolving MoleCubes © JavaScriptBank.comThis 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



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, till@netzministerium.de & Rene Sander, rene@netzministerium.de// ---------------------------------------------------------------------------// 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-->


HTML
<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, 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 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-->


Files
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