Version compl�te: jsB@nk » 3D » Spinning molécule 2
URL: https://www.javascriptbank.com/examples-test-scenegraph-hierarchy.html
Cet effet de créer deux structures molecube peut tourner, on peut tourner par lui-même et l'on peut tourner lente ou rapide dépend de la vitesse de glisser-déposer.
Version compl�te: jsB@nk » 3D » Spinning molécule 2
URL: https://www.javascriptbank.com/examples-test-scenegraph-hierarchy.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 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());// creates child model #3var cubeModel3 = new Model("cube3", blueBallMat);// adds more materials to the modelcubeModel3.materials[1] = grayBallMat;cubeModel3.materials[2] = redBallMat;// defines model points.cubeModel3.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.translate(10, 10, 10); // translate//initMatrix.rotateX(Math.PI/4); // rotation with 45 degrees.// transforms ring modelparentCubeModel.transform(initMatrix);// draws ring modelparentCubeModel.draw();//parentCubeModel.hide();// links cubeModel to the parentCubeModel// by using one point of the parentCubeModel as parent pivot// (each transformation will be made to the pivot, too cause 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.translate(5, 5, 5); // 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 c3initMatrix = new Matrix();c3initMatrix.scale(1, 1, 1);cubeModel3.transform(c3initMatrix);cubeModel3.linkTo(cubeModel);//cubeModel3.linkTo(parentCubeModel);cubeModel3.draw();*/cubeModel3.hide();//cubeModel2.setPivot(new Point3D(1, 1, 1));var c2initMatrix = new Matrix();//c2initMatrix.scale(2, 2, 2);c2initMatrix.scale(0.5, 0.5, 0.5);c2initMatrix.translate(3, 0, 0);cubeModel2.transform(c2initMatrix);cubeModel2.linkTo(cubeModel);//cubeModel2.linkTo(parentCubeModel);cubeModel2.draw();//cubeModel2.hide();// 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();cubeModel3.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, [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();cubeModel2.createPointCode();cubeModel3.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