Full version: jsB@nk » 3D » Spinning molecule 3
URL: https://www.javascriptbank.com/examples-test-scenegraph-simple.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 3
URL: https://www.javascriptbank.com/examples-test-scenegraph-simple.html
<!-- helper libs --><script language="JavaScript" src="../js/LyrObj.js"></script><script language="JavaScript" src="../js/ClipButton.js"></script><script language="JavaScript" src="../js/ColorUtil.js"></script><!-- core 3dhtml lib --><script language="JavaScript" src="../js/3dhtml.js"></script><!-- modulators --><script language="JavaScript" src="../js/MouseModulator.js"></script><!-- materials --><script language="JavaScript" src="../js/materials.js"></script><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 child model #1var cubeModel = new Model("cube", redBallMat);// adds more materials to the modelcubeModel.materials[1] = blueBallMat;cubeModel.materials[2] = grayBallMat;// defines model points.cubeModel.setPoints(getCubeModelPoints());// creates child model #2var cubeModel2 = new Model("cube2", blueBallMat);// adds more materials to the modelcubeModel2.materials[1] = grayBallMat;cubeModel2.materials[2] = redBallMat;// defines model points.cubeModel2.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(40, 40, 40); // scaling//initMatrix.rotateX(Math.PI/4); // rotation with 45 degrees.// transforms ring modelparentCubeModel.transform(initMatrix);// draws ring modelparentCubeModel.draw();// links cubeModel to the parentCubeModel// by using one point of the parentCubeModel as parent pivot// (each transformation will be made to the pivot, too coz of the reference)cubeModel.linkTo(parentCubeModel);cubeModel.setPivot(new Point3D(1, 1, 1)); // SEMI-CORRECT: values in transformed model coord system - scale(10,10,10)var scaleMatrix = new Matrix();scaleMatrix.translate(-1, -1, -1); // transformation values in model coord systemscaleMatrix.scale(0.5, 0.5, 0.5); // transformation values in model coord systemcubeModel.transform(scaleMatrix);// draws cube modelcubeModel.draw();var myMatrix = new Matrix();myMatrix.translate(4,0,0);myMatrix.scale(2, 2, 2);cubeModel2.transform(myMatrix); cubeModel2.linkTo(parentCubeModel);cubeModel2.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);//mySceneModel.transform(rotMatrix);// 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();var rot2M = new Matrix();rot2M.rotateY(0.1);rot2M.rotateZ(-0.2);cubeModel2.transform(rot2M);cubeModel2.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));}function getRingModelPoints() {return new Array(new Point3D( 0.0000, 0.0000, 0.0000, 1),new Point3D( 2.0000, 3.0000, 1.0000, 1),new Point3D( 3.5000, 0.0000, 1.0000, 1),new Point3D( 2.0000, -3.0000, 1.0000, 1),new Point3D( -2.0000, 3.0000, 1.0000, 1),new Point3D( -3.5000, 0.0000, 1.0000, 1),new Point3D( -2.0000, -3.0000, 1.0000, 1),new Point3D( 2.0000, 3.0000, -1.0000, 1),new Point3D( 3.5000, 0.0000, -1.0000, 1),new Point3D( 2.0000, -3.0000, -1.0000, 1),new Point3D( -2.0000, 3.0000, -1.0000, 1),new Point3D( -3.5000, 0.0000, -1.0000, 1),new Point3D( -2.0000, -3.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, 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();cubeModel2.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