Full version: jsB@nk » 3D » Spinning molecule 4
URL: https://www.javascriptbank.com/examples-test-transformation.html
This effect create two molecube structures can revolve, one can spin by itself and one can spin slow or fast depend on speed of dragging and dropping.
Full version: jsB@nk » 3D » Spinning molecule 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