Phiên bản đầy đủ: jsB@nk » 3D » Khối rubikcube màu tự xoay
URL: https://www.javascriptbank.com/examples-openinghexcube3d.html
Hiệu ứng tạo một khối lập phương 3D từ các ô màu và khối lập phương này có thể tự xoay tròn đồng thời được phóng to khi ta nhấp trái chuột trên trang web.
Phiên bản đầy đủ: jsB@nk » 3D » Khối rubikcube màu tự xoay
URL: https://www.javascriptbank.com/examples-openinghexcube3d.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*//* * OpeningHexCube3D * * Inspired by this Colorcube (http://www.proce55ing.net/examples/colorcube/index.html) * */// ---------------------------------------------------------------------------// 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);// ---------------------------------------------------------------------------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 scenesceneModel.transform(staticRotationMatrix);// renders next stepmyMouseScaleModulator.animate();// scales the cubecubeModel.transform(myMouseScaleModulator.getMatrix());cubeModel.draw();setTimeout("animate()", 1);}// event handlingdocument.onmousedown = mouseDownHandler;document.onmouseup = mouseUpHandler;if (ns || ns6) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);// event forwardingfunction mouseDownHandler(e) { myMouseScaleModulator.down(e); return !ie;}function mouseUpHandler(e) { myMouseScaleModulator.up(e); return !ie;}// ---------------------------------------------------------------------------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 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/MouseScaleModulator.jshttp://javascriptbank.com/javascript/3d/js/ColorUtil.jshttp://javascriptbank.com/javascript/3d/js/materials.js