Phiên bản đầy đủ: jsB@nk » 3D » Khối lập phương xoay theo chuột
URL: https://www.javascriptbank.com/examples-3drectangle.html
Tám điểm vuông sẽ có kích thuớc to, nhỏ khác nhau tùy theo khoảng cách, hướng nhìn của người dùng, tạo nên một hình vuông có thể chuyển động khi ta dùng chuột kéo và thả ở vị trí bất kì trên trang web.
Phiên bản đầy đủ: jsB@nk » 3D » Khối lập phương xoay theo chuột
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, till@netzministerium.de & Rene Sander, rene@netzministerium.de// ---------------------------------------------------------------------------// 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, 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><!-- 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