Full version: jsB@nk » 3D » Spinning Molecule 1
URL: https://www.javascriptbank.com/examples-test-pivot3d.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 1
URL: https://www.javascriptbank.com/examples-test-pivot3d.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 parent modelvar parentCubeModel = new Model("parentCube", grayBallMat);// adds more materials to the modelparentCubeModel.materials[1] = redBallMat;parentCubeModel.materials[2] = blueBallMat;// defines model points.parentCubeModel.setPoints(getCubeModelPoints());//parentCubeModel.setPoints(getRingModelPoints());// creates model to play with // can be set as child to parent modelvar cubeModel = new Model("cube", redBallMat);// adds more materials to the modelcubeModel.materials[1] = blueBallMat;cubeModel.materials[2] = grayBallMat;// 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();// >> begin to work with the model etc.// The parent cube// ----------------------------------------------------// creates and inits matrix to initialize the modelvar initMatrix = new Matrix();initMatrix.scale(20, 20, 20); // scaling//initMatrix.rotateX(Math.PI/4); // rotation with 45 degrees.// transforms ring modelparentCubeModel.transform(initMatrix);// draws ring modelparentCubeModel.draw();// Pivot calculation// ----------------------------------------------------// Some pivot calculations and different approaches to realize it.// To check this code choose one approach./*// approach #1 <-- ERROR, right now// CORRECT: values in origin model coord system//// advantage:// You can set the pivot in original model coord system whenever you want.//// pivot must be transformed each time the model get transformed// (but simple doing so results in error right now)cubeModel.setPivot(new Point3D(1, 1, 1)); */// approach #2 <-- USE THIS!// SEMI-CORRECT: values in transformed model coord system// // disadvantage:// You must set the pivot in the (current) transformed model coord system,// independent from the pivot setting time.// i.e. you can change the sequence of these two lines// cubeModel.setPivot(new Point3D(x, y, z)); // cubeModel.transform(transformationMatrix);// single objectvar scaleMatrix = new Matrix();scaleMatrix.scale(20, 20, 20);//scaleMatrix.translate(-20, -20, -20);cubeModel.setPivot(new Point3D(20, 20, 20)); // pivot coordinates in world coord systemcubeModel.transform(scaleMatrix);/* // child object with parent (parent scaled with S(40,40,40))cubeModel.linkTo(parentCubeModel);var scaleMatrix = new Matrix();scaleMatrix.scale(15, 15, 15);//scaleMatrix.translate(15, 15, 15);cubeModel.setPivot(new Point3D(15, 15, 15)); // pivot coordinates in parent coord systemcubeModel.transform(scaleMatrix);*//*// approach #3 <-- DONT USE THIS!// WRONG: values in parent coord system (world or model)// precondition for this approach-example: linked to parentModel which is scaled with S(40,40,40)//cubeModel.setPivot(new Point3D(40, 40, 40));*//*// Pivot Setting with coordinates from a parent coord system// ---------------------------------------------------- nb: does not work yet!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 modelcubeModel2.setPivot(pivotPoint);*/// ----------------------------------------------------// draws cube modelcubeModel.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 ----------------------------------------------var rotMatrix = new Matrix();rotMatrix.rotateY(0.05);// transforms the model depending on mouse movements.parentCubeModel.transform(mouseModMatrix);//parentCubeModel.transform(rotMatrix);// updates displayparentCubeModel.draw();var rotM = new Matrix();rotM.rotateY(-0.1);rotM.rotateX(+0.2);cubeModel.transform(rotM); // updates displaycubeModel.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, 0),new Point3D( 1.0000, 1.0000, -1.0000, 2),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();parentCubeModel.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