Phiên bản đầy đủ: jsB@nk » 3D » Phân tử chuyển động 1
URL: https://www.javascriptbank.com/examples-test-pivot3d.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 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