»
EnglishFrenchVietnamese

Print - Spinning Molecule 1 - JavaScriptBank.com

Full version: jsB@nk » 3D » Spinning Molecule 1
URL: http://www.javascriptbank.com/examples-test-pivot3d.html

Spinning Molecule 1 © JavaScriptBank.comThis 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: http://www.javascriptbank.com/examples-test-pivot3d.html



JavaScript
<script language="javascript"><!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de/*     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-->


HTML
<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>&nbsp;</td><td><a href="#" onclick="myMouseModulator.mode=MouseModulator.MODE_ROTATE">x &amp; y</a></td></tr><tr><td>&nbsp;</td><td><a href="#" onclick="myMouseModulator.mode=MouseModulator.MODE_ROTATE_X">x</a></td></tr><tr><td>&nbsp;</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, 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 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-->


Files
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