Full version: jsB@nk » 3D » 3D Circle Nav
URL: https://www.javascriptbank.com/examples-circlenav3d.html
This JavaScript code generate a JavaScript menu with option which can spin slow or fast depend on speed of dragging and dropping.
Full version: jsB@nk » 3D » 3D Circle Nav
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