<!-- /* * 3dhtml Example :: MouseCube3D * http://3dhtml.netzministerium.de * Version 1.0, 20/11/2001 * * Copyright (c) 2001 by Netzministerium.de * Written by Till Nagel and René Sander. * Distributed under the terms of the GNU Lesser General Public. * (See http://3dhtml.netzministerium.de/licence.txt for details) */ --> <html> <head> <title>3dhtml Example :: MouseCube3D</title> <!-- helper libs --> <script language="JavaScript" src="../js/LyrObj.js"></script> <script language="JavaScript" src="../js/ColorUtil.js"></script> <!-- core 3dhtml lib --> <script language="JavaScript" src="../js/3dhtml.js"></script> <!-- modulators --> <script language="JavaScript" src="../js/MouseModulator.js"></script> <!-- materials --> <script language="JavaScript" src="../js/materials.js"></script> <script language="javascript"> <!-- // (c) 2001 Till Nagel, till@netzministerium.de & Rene Sander, rene@netzministerium.de // --------------------------------------------------------------------------- // creates cube model with ColorRectMaterial blending from white to black var cubeModel; cubeModel = new Model("cube", createColorRectMaterial(new Color("000000"), new Color("ffffff"), "images/space.gif")); // Wow - Netscape really sucks. Remove this comment line and it won't recognize the first point! // 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 interactions var myMouseModulator = new MouseModulator("myMouseModulator", 0); // --------------------------------------------------------------------------- function initOnLoad() { fixNetscape(); cubeModel.assignLayers(); // creates and inits matrix to initialize the model var initMatrix = new Matrix(); initMatrix.scale(50, 50, 50); // >> begin to work with the model etc. // initializes model cubeModel.transform(initMatrix); // >> first draw of the model (recommended) cubeModel.draw(); // starts animation animate(); } /* * The main animate method. Calls itself repeatedly. */ function animate() { var delay = 10; // animates cube model ---------------------------------------- // animates the modulator to spin the cube myMouseModulator.animate(); // transforms the cube depending on mouse movements. cubeModel.transform(myMouseModulator.getMatrix()); // updates display cubeModel.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 handling document.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 modulator myMouseModulator.move(e); /* // other stuff, e.g. if (ns || ie) { mouseX = (ns) ? e.pageX : event.x; mouseY = (ns) ? e.pageY : event.y; } */ return !ie; } function mouseDownHandler(e) { // calls down handler of the mouse modulator myMouseModulator.down(e); } function mouseUpHandler(e) { // calls up handler of the mouse modulator myMouseModulator.up(e); } // --------------------------------------------------------------------------- function createCubeModelPoints() { // the cube model return new Array( new Point3D( 1, 1, 1, 0), new Point3D( 1, 1, -1, 0), new Point3D( 1, -1, 1, 0), new Point3D( 1, -1, -1, 0), new Point3D(-1, 1, 1, 0), new Point3D(-1, 1, -1, 0), new Point3D(-1, -1, 1, 0), new Point3D(-1, -1, -1, 0) ); } // --> </script> </head> <body onload="initOnLoad()" bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" style="height:100%"> <!-- layer to bugfix netscape --> <div id="fixnetscape" style="position:absolute;visibility:hidden"></div> <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 method */ cubeModel.createPointCode(); // --> </script> </body> </html>