Phiên bản đầy đủ: jsB@nk » 3D » Menu 3D xoay theo chuột
URL: https://www.javascriptbank.com/examples-circlenav3d.html
Hiệu ứng tạo một trình đơn với các tùy chọn có thể di chuyển với góc nhìn ba chiều tùy theo tốc độ kéo và thả của chuột.
Phiên bản đầy đủ: jsB@nk » 3D » Menu 3D xoay theo chuột
URL: https://www.javascriptbank.com/examples-circlenav3d.html
<STYLE type=text/css>BODY {FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: Georgia,Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; LETTER-SPACING: 2px; BACKGROUND-COLOR: #fafafa}A:link {COLOR: #9e0b0e; TEXT-DECORATION: none}A:visited {COLOR: #9e0b0e; TEXT-DECORATION: none}A:active {COLOR: #9e0b0e; TEXT-DECORATION: none}A:hover {COLOR: #de8800; TEXT-DECORATION: none}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=javascript><!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]// ---------------------------------------------------------------------------// creates cube model with ColorRectMaterial blending from white to blackvar cubeModel;// create model and assign first (default) materialcubeModel = new Model("cube", new Material('<a href="http://www.lycos.com" target="_blank" onfocus="blur()">Lycos</a>') );cubeModel.materials[1] = new Material('<a href="http://www.search.com" target="_blank" onfocus="blur()">Search</a>');cubeModel.materials[2] = new Material('<a href="http://www.yahoo.com" target="_blank" onfocus="blur()">Yahoo</a>');cubeModel.materials[3] = new Material('<a href="http://www.fireball.com" target="_blank" onfocus="blur()">Fireball</a>');cubeModel.materials[4] = new Material('<span style="font-size:20px;"><a href="http://www.google.com" target="_blank" onfocus="blur()">Google</a></span>');cubeModel.materials[5] = new Material('<a href="http://www.altavista.com" target="_blank" onfocus="blur()">Altavista</a>');cubeModel.materials[6] = new Material('<a href="http://www.hotbot.com" target="_blank" onfocus="blur()">Hotbot</a>');cubeModel.materials[7] = new Material('<a href="http://www.webcrawler.com" target="_blank" onfocus="blur()">Webcrawler</a>');// defines model points.// The model's points have to be defined before the respective code is written into the document.cubeModel.setPoints(createCubeModelPoints());// ---------------------------------------------------------------------------// modulator to rotate the model dependent on mouse interactionsvar myMouseModulator = new MouseModulator("myMouseModulator", 0);// ---------------------------------------------------------------------------function initOnLoad() {fixNetscape();cubeModel.assignLayers();// creates and inits matrix to initialize the modelvar initMatrix = new Matrix();initMatrix.scale(50, 50, 50);// >> begin to work with the model etc.// initializes modelcubeModel.transform(initMatrix);// >> first draw of the model (recommended) cubeModel.draw();// starts animationanimate();}/* * The main animate method. Calls itself repeatedly. */function animate() {var delay = 10;// animates cube model ----------------------------------------// animates the modulator to spin the cubemyMouseModulator.animate();// transforms the cube depending on mouse movements.cubeModel.transform(myMouseModulator.getMatrix());// updates displaycubeModel.draw();// 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 || ns6) 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 createCubeModelPoints() {// the cube modelreturn new Array(new Point3D( 0, 5, 0, 0),new Point3D( 3.5, 3.5, 0, 1),new Point3D( 5, 0, 0, 2),new Point3D( 3.5, -3.5, 0, 3),new Point3D( 0, -5, 0, 4),new Point3D(-3.5, -3.5, 0, 5),new Point3D( -5, 0, 0, 6),new Point3D(-3.5, 3.5, 0, 7));}// --></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="VISIBILITY: hidden; POSITION: absolute"></DIV><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 method */cubeModel.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/ColorUtil.jshttp://javascriptbank.com/javascript/3d/js/MouseModulator.jshttp://javascriptbank.com/javascript/3d/js/3dhtml.jshttp://javascriptbank.com/javascript/3d/js/materials.js