Phiên bản đầy đủ: jsB@nk » 3D » Phân tử chuyển động 4
URL: https://www.javascriptbank.com/examples-test-transformation.html
Hiệu ứng tạo ra cấu trúc hai phân tử có thể chuyển động trên trang web, một phân tử chuyển động tự do và phân tử còn lại có thể chuyển động nhanh chậm tùy vào sự di chuyển">di chuyển của chuột.
Phiên bản đầy đủ: jsB@nk » 3D » Phân tử chuyển động 4
URL: https://www.javascriptbank.com/examples-test-transformation.html
<script language="javascript"><!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/// ---------------------------------------------------------------------------// MATERIALSvar redBallMat = createClipButtonMaterial("images/balls.gif", 20, 180, 20, 20, 9);var blueBallMat = createClipButtonMaterial("images/balls_blue.gif", 20, 180, 20, 20, 9);var grayBallMat = createClipButtonMaterial("images/balls_gray.gif", 20, 180, 20, 20, 9);// ---------------------------------------------------------------------------// MODELS// creates child modelvar cubeModel = new Model("cube", blueBallMat);// adds more materials to the modelcubeModel.materials[1] = grayBallMat;cubeModel.materials[2] = redBallMat;// defines model points.cubeModel.setPoints(getCubeModelPoints());// ---------------------------------------------------------------------------// MODULATORS// modulator to rotate the model dependent on mouse interactions// (interaction mode can be set with myMouseModulator.mode = myMode.)var myMouseModulator = new MouseModulator("myMouseModulator", 0);// ---------------------------------------------------------------------------function initOnLoad() {fixNetscape();// Transformation Sequences// ----------------------------------------------------// Example: translates and scales model (1. translation, 2. scaling)// since the model is a unit cube and the translation is in model coord system// a translation with T(-1,-1,-1) should move the model exactly to the point P(-1,-1,-1).// approach #1// matrix sequence (with internal compose)// 1 transformationsvar myMatrix = new Matrix();myMatrix.translate(-1,-1,-1);myMatrix.scale(10,10,10);cubeModel.transform(myMatrix); /*// approach #2// 2 transformations in sequencevar transMatrix = new Matrix();transMatrix.translate(-1,-1,-1);cubeModel.transform(transMatrix);var scaleMatrix = new Matrix();scaleMatrix.scale(10,10,10);cubeModel.transform(scaleMatrix); *//*// approach #3// composition of two matrices// 1 transformationvar firstComMatrix = new Matrix();firstComMatrix.translate(-1,-1,-1);var secondComMatrix = new Matrix();secondComMatrix.scale(10,10,10);secondComMatrix.compose(firstComMatrix);cubeModel.transform(secondComMatrix);*//*// Pivot Setting with coordinates from a parent coord system// ----------------------------------------------------var pivotPoint = new Point3D(1,1,1); // coordinates in current model coord system// transforms the pivot point to the parent model coord systempivotPoint.transform(parentCubeModel.sgMatrix);// sets the pivot in the current modelcubeModel.setPivot(pivotPoint);*/// draws cubecubeModel.draw();// starts animationanimate();}/* * The main animate method. Calls itself repeatedly. */function animate() {var delay = 10;// animates modulators ------------------------------------------// animates the modulator to spin the heartmyMouseModulator.animate();mouseModMatrix = myMouseModulator.getMatrix();// animates models ----------------------------------------------// transforms the model depending on mouse movements.//cubeModel.transform(mouseModMatrix);var rotaM = new Matrix();rotaM.rotateY(0.1);rotaM.rotateY(0.1);rotaM.rotateZ(0.1);var rotbM = new Matrix();rotbM.rotateY(-0.1);rotbM.rotateX(+0.2);// uses one of the rotation matrices. (to show all axes)cubeModel.transform(rotbM);cubeModel.draw();// loop ---------------------------------------------------------// 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);}// event handlingdocument.onmousemove = mouseMoveHandler;document.onmousedown = mouseDownHandler;document.onmouseup = mouseUpHandler;if (ns) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);/* * The mouse handlers in this document must call the modulator's handlers. * To be able to use a mouse modulator and to do your own stuff. */function mouseMoveHandler(e) {// calls move handler of the mouse modulatormyMouseModulator.move(e);return !ie;} function mouseDownHandler(e) {// calls down handler of the mouse modulatormyMouseModulator.down(e);}function mouseUpHandler(e) {// calls up handler of the mouse modulatormyMouseModulator.up(e);}// ---------------------------------------------------------------------------function getCubeModelPoints() {return new Array(new Point3D( 0.0000, 0.0000, 0.0000, 1),new Point3D( 1.0000, 1.0000, 1.0000, 2),new Point3D( 1.0000, 1.0000, -1.0000, 0),new Point3D( 1.0000, -1.0000, 1.0000, 1),new Point3D( 1.0000, -1.0000, -1.0000, 1),new Point3D( -1.0000, 1.0000, 1.0000, 1),new Point3D( -1.0000, 1.0000, -1.0000, 1),new Point3D( -1.0000, -1.0000, 1.0000, 1),new Point3D( -1.0000, -1.0000, -1.0000, 1));}// --></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><table><tr><td colspan="2">MouseMovement:</td></tr><tr><td> </td><td><a href="#" onclick="myMouseModulator.mode=MouseModulator.MODE_ROTATE">x & y</a></td></tr><tr><td> </td><td><a href="#" onclick="myMouseModulator.mode=MouseModulator.MODE_ROTATE_X">x</a></td></tr><tr><td> </td><td><a href="#" onclick="myMouseModulator.mode=MouseModulator.MODE_ROTATE_Y">y</a></td></tr></tr></table><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 methodcubeModel.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/ClipButton.jshttp://javascriptbank.com/javascript/3d/js/ColorUtil.jshttp://javascriptbank.com/javascript/3d/js/3dhtml.jshttp://javascriptbank.com/javascript/3d/js/MouseModulator.jshttp://javascriptbank.com/javascript/3d/js/materials.jshttp://javascriptbank.com/javascript/3d/examples/images/balls.gifhttp://javascriptbank.com/javascript/3d/examples/images/balls_blue.gifhttp://javascriptbank.com/javascript/3d/examples/images/balls_gray.gif