Phiên bản đầy đủ: jsB@nk » 3D » Phân tử 3D
URL: https://www.javascriptbank.com/examples-molecube3d.html
Mô phỏng cấu trúc các phân tử đang chuyển động qua góc nhìn ba chiều trong không gian, hiệu ứng tạo ra các phân tử có cấu trúc đối xứng hay hỗn độn chuyển động liên tục.
Phiên bản đầy đủ: jsB@nk » 3D » Phân tử 3D
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, 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--><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-->
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