Full version: jsB@nk » 3D » 3D revolving cube with mouse
URL: https://www.javascriptbank.com/examples-3drectangle.html
This JavaScript code makes an self-revolving cube which bases on drag&drop status of users. Eight dots which have small or large size, depend on position of them to create a cube can spin if user click and drag mouse.
Full version: jsB@nk » 3D » 3D revolving cube with mouse
URL: https://www.javascriptbank.com/examples-3drectangle.html
<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--><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-->
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