Phiên bản đầy đủ: jsB@nk » 3D » Phân tử chuyển động 2
URL: https://www.javascriptbank.com/examples-test-scenegraph-hierarchy.html
Hiệu ứng tạo ra cấu trúc hai phân tử có thể chuyển động trên trang web, một phân tử chuyển động tự do và phân tử còn lại có thể chuyển động nhanh chậm tùy vào sự di chuyển">di chuyển của chuột.
Phiên bản đầy đủ: jsB@nk » 3D » Phân tử chuyển động 2
URL: https://www.javascriptbank.com/examples-test-scenegraph-hierarchy.html
<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());// 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, 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();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