Phiên bản đầy đủ: jsB@nk » 3D » Khối rubikcube màu 3D
URL: https://www.javascriptbank.com/examples-mousehexcube3d.html
Hiệu ứng tạo ra một khối rubikcube 3D từ các ô màu và khối rubikcube này có thể tự xoay quanh tâm tùy theo tốc độ kéo thả của chuột của người dùng.
Phiên bản đầy đủ: jsB@nk » 3D » Khối rubikcube màu 3D
URL: https://www.javascriptbank.com/examples-mousehexcube3d.html
<SCRIPT language=javascript><!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*//* * MouseOpeningHexCube3D * * Inspired by OpeningHexCube3D :) * */// ---------------------------------------------------------------------------// creates scene model (without material)var sceneModel = new Model("scene");sceneModel.setPoints( new Array(new Point3D(0, 0, 0)) );// ---------------------------------------------------------------------------// creates hexcolored cube modelvar cubeModel = new Model("cube", new Material('??'));cubeModel.setPoints(createCubeModelPoints());// setting the other materials beneath// ---------------------------------------------------------------------------xb=new Array("00", "7F", "FF")var hc = 0;for (r = 0; r < 3; r++) {for (g = 0; g < 3; g++) {for (b = 0; b < 3; b++) {var hex = "#" + xb[r] + xb[g] + xb[b]; // or with: new Color(RGBToHex(r, g, b)) ?var hexMaterial = createColorRectMaterial(new Color(hex), new Color("#FFFFFF"), "images/space.gif");hexMaterial.refresh = function myColorRectMaterialRefresh(p) {with (p.lyr.ref) {backgroundColor = this.myColorBlend.getColor(normalize(p.z, -70, 70, 0, 1)).getHex();height = width = normalize(p.z, -70, 70, 10, 50);}}//hexMaterial.body = '<a href="javascript://" onclick="alert(\"' + hex + '\")"><img src="images/space.gif" width="1" height="1" alt="" border="0"></a>';// assigns the created hexColorRectMaterials to the cubecubeModel.materials[hc] = hexMaterial;hc++;}}}// ---------------------------------------------------------------------------// the matrix to transform the model withvar staticRotationMatrix = new Matrix();staticRotationMatrix.rotateX(0.05);staticRotationMatrix.rotateY(0.1);// ---------------------------------------------------------------------------// modulator to scale the cube if mouseDownvar myMouseScaleModulator = new MouseScaleModulator("myMouseScaleModulator", MouseScaleModulator.MODE_UNIFORM);// 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);// transforms the scene model instead of the cube// to be able to perform the nonuniform scale transformation correctlysceneModel.transform(initMatrix);cubeModel.linkTo(sceneModel);cubeModel.draw();// starts animationanimate();}// ---------------------------------------------------------------------------/* * The main animate method. Calls itself repeatedly. */function animate() {// rotates the complete scene//sceneModel.transform(staticRotationMatrix);// rotates the complete scene depends on mouse interactionmyMouseModulator.animate();sceneModel.transform(myMouseModulator.getMatrix());// scales the cubemyMouseScaleModulator.animate();cubeModel.transform(myMouseScaleModulator.getMatrix());cubeModel.draw();setTimeout("animate()", 1);}// event handlingdocument.onmousemove = mouseMoveHandler;document.onmousedown = mouseDownHandler;document.onmouseup = mouseUpHandler;if (ns || ns6) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);// event forwardingfunction 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);myMouseScaleModulator.down(e);}function mouseUpHandler(e) {// calls up handler of the mouse modulatormyMouseModulator.up(e);myMouseScaleModulator.up(e);}// ---------------------------------------------------------------------------function createCubeModelPoints() {var tmpArray = new Array();var c = 0;for (x = -1; x <= 1; x+=1) {for (y = -1; y <= 1; y+=1) {for (z = -1; z <= 1; z+=1) {//alert(c + "= Point(" + x + " " + y + " " + z + ")");tmpArray[c] = new Point3D(x, y, z, c);c++;}}}return tmpArray;}// --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY style="HEIGHT: 100%" 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]();// --></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/3dhtml.jshttp://javascriptbank.com/javascript/3d/js/ColorUtil.jshttp://javascriptbank.com/javascript/3d/js/MouseScaleModulator.jshttp://javascriptbank.com/javascript/3d/js/materials.js