»
AnglaisFran�aisVietnamien

Imprimer - 3D cube tournant avec la souris - JavaScriptBank.com

Version compl�te: jsB@nk » 3D » 3D cube tournant avec la souris
URL: https://www.javascriptbank.com/examples-3drectangle.html

3D cube tournant avec la souris © JavaScriptBank.comCet Le code JavaScript fait une auto-renouvelable de cube, qui fonde le drag & drop état des utilisateurs. Huit points qui ont de petites ou de grande taille, dépendent de la position de la création d'un cube de spin si l'utilisateur peut cliquer et faire glisser la souris.

Version compl�te: jsB@nk » 3D » 3D cube tournant avec la souris
URL: https://www.javascriptbank.com/examples-3drectangle.html



JavaScript
<SCRIPT language=javascript>/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/<!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]// ---------------------------------------------------------------------------// creates cube model with ColorRectMaterial blending from white to blackvar 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 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);/*// 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 modulatormyMouseModulator.down(e);}function mouseUpHandler(e) {// calls up handler of the mouse modulatormyMouseModulator.up(e);}// ---------------------------------------------------------------------------function createCubeModelPoints() {// the cube modelreturn 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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<DIV id=fixnetscape style="POSITION: absolute; VISIBILITY: hidden"></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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/3d/js/LyrObj.jshttp://javascriptbank.com/javascript/3d/js/3dhtml.jshttp://javascriptbank.com/javascript/3d/js/ColorUtil.jshttp://javascriptbank.com/javascript/3d/js/MouseModulator.jshttp://javascriptbank.com/javascript/3d/js/materials.js