【HTML5】3D模型--百行代码实现旋转立体魔方.docx

最近研究魔方的玩法，就突然想用HMTL5写一个魔方的模型，由于魔方是一个3D的立方体，这次就试着用HTML5写了一个简单的3D模型。下面是测试链接和预览画面。/demo/Rubik/index.html制作流程首先你需要下载html5开源库件lufylegend-1.4.0/lufy_legend/article/details/7644932魔方分为6个面，每个面由9个小矩形组成，现在我把每个小矩形当做一个类封装起来，因为现在建立的是一个3D魔方，所以要画出每个小矩形，需要知道小矩形的4个定点，而这4个定点会根据空间的旋转角度而变换，所以为了计算出这4个定点坐标，需要知道魔方绕x轴和z轴旋转的角度。所以，建立矩形类如下javascriptview plaincopy1. functionRect(pointA,pointB,pointC,pointD,angleX,angleZ,color)2. base(this,LSprite,);3. this.pointZ=(pointA0+pointB0+pointC0+pointD0)/4,(pointA1+pointB1+pointC1+pointD1)/4,(pointA2+pointB2+pointC2+pointD2)/4;4. this.z=this.pointZ2;5. this.pointA=pointA,this.pointB=pointB,this.pointC=pointC,this.pointD=pointD,this.angleX=angleX,this.angleZ=angleZ,this.color=color;6. 7. 8. Rtotype.setAngle=function(a,b)9. this.angleX=a;10. this.angleZ=b;11. this.z=this.getPoint(this.pointZ)2;12. ;pointA,pointB,pointC,pointD是小矩形的四个顶点，angleX,angleZ分别是x轴和z轴旋转的角度，color是小矩形的颜色。魔方分为6个面，先看一下最前面的一面，如果以立方体的中心作为3D坐标系的中心，那么9个小矩形的各个定点所对应的坐标如下图所示所以，前面这个面的9个小矩形可以由下面的代码来建立javascriptview plaincopy1. for(varx=0;x3;x+)2. for(vary=0;y3;y+)3. z=3;4. varrect=newRect(-3*step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-step+y*2*step,-3*step+z*2*step,-3*step+x*2*step,-step+y*2*step,-3*step+z*2*step,0,0,#FF0000);5. backLayer.addChild(rect);6. 7. 其中backLayer是一个LSprite类，step是半个小矩形的长，同样的道理，可以也得到其他5个面。6个面都建立了，在绘制这6个面之前，首先要根据旋转的角度来计算各个定点的坐标，看下面的图根据上面的图，用下面的公式即可得到变换后的定点坐标javascriptview plaincopy1. Rtotype.getPoint=function(p)2. varu2,v2,w2,u=p0,v=p1,w=p2;3. u2=u*Math.cos(this.angleX)-v*Math.sin(this.angleX);4. v2=u*Math.sin(this.angleX)+v*Math.cos(this.angleX);5. w2=w;6. u=u2;v=v2;w=w2;7. u2=u;8. v2=v*Math.cos(this.angleZ)-w*Math.sin(this.angleZ);9. w2=v*Math.sin(this.angleZ)+w*Math.cos(this.angleZ);10. u=u2;v=v2;w=w2;11. returnu2,v2,w2;12. ;最后根据小矩形的四个定点坐标，来绘制这个矩形，javascriptview plaincopy1. Rtotype.draw=function(layer)2. this.graphics.clear();3. this.graphics.drawVertices(1,#000000,this.getPoint(this.pointA),this.getPoint(this.pointB),this.getPoint(this.pointC),this.getPoint(this.pointD),true,this.color);4. ;其中drawVertices是lufylegend.js库件中LGraphics类的一个方法，它可以根据传入的定点坐标数组来绘制一个多边形。最后，给出完整代码，代码很少，JS代码一共91行。一，index.htmlhtmlview plaincopy1. 2. 3. 4. 5. 3D魔方6. 7. 8. loading9. 10. 11. 12. 13. 二，Rect类javascriptview plaincopy1. functionRect(pointA,pointB,pointC,pointD,angleX,angleZ,color)2. base(this,LSprite,);3. this.pointZ=(pointA0+pointB0+pointC0+pointD0)/4,(pointA1+pointB1+pointC1+pointD1)/4,(pointA2+pointB2+pointC2+pointD2)/4;4. this.z=this.pointZ2;5. this.pointA=pointA,this.pointB=pointB,this.pointC=pointC,this.pointD=pointD,this.angleX=angleX,this.angleZ=angleZ,this.color=color;6. 7. Rtotype.draw=function(layer)8. this.graphics.clear();9. this.graphics.drawVertices(1,#000000,this.getPoint(this.pointA),this.getPoint(this.pointB),this.getPoint(this.pointC),this.getPoint(this.pointD),true,this.color);10. ;11. Rtotype.setAngle=function(a,b)12. this.angleX=a;13. this.angleZ=b;14. this.z=this.getPoint(this.pointZ)2;15. ;16. Rtotype.getPoint=function(p)17. varu2,v2,w2,u=p0,v=p1,w=p2;18. u2=u*Math.cos(this.angleX)-v*Math.sin(this.angleX);19. v2=u*Math.sin(this.angleX)+v*Math.cos(this.angleX);20. w2=w;21. u=u2;v=v2;w=w2;22. u2=u;23. v2=v*Math.cos(this.angleZ)-w*Math.sin(this.angleZ);24. w2=v*Math.sin(this.angleZ)+w*Math.cos(this.angleZ);25. u=u2;v=v2;w=w2;26. returnu2,v2,w2;27. ;三，Main.jsjavascriptview plaincopy1. init(50,mylegend,400,400,main);2. vara=0,b=0,backLayer,step=20,key=null;3. functionmain()4. backLayer=newLSprite();5. addChild(backLayer);6. backLayer.x=120,backLayer.y=120;7. /后8. for(varx=0;x3;x+)9. for(vary=0;y3;y+)10. z=0;11. varrect=newRect(-3*step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-step+y*2*step,-3*step+z*2*step,-3*step+x*2*step,-step+y*2*step,-3*step+z*2*step,0,0,#FF4500);12. backLayer.addChild(rect);13. 14. 15. /前16. for(varx=0;x3;x+)17. for(vary=0;y3;y+)18. z=3;19. varrect=newRect(-3*step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-step+y*2*step,-3*step+z*2*step,-3*step+x*2*step,-step+y*2*step,-3*step+z*2*step,0,0,#FF0000);20. backLayer.addChild(rect);21. 22. 23. /上24. for(varx=0;x3;x+)25. for(varz=0;z3;z+)26. y=0;27. varrect=newRect(-3*step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-3*step+y*2*step,-step+z*2*step,-3*step+x*2*step,-3*step+y*2*step,-step+z*2*step,0,0,#FFFFFF);28. backLayer.addChild(rect);29. 30. 31. /下32. for(varx=0;x3;x+)33. for(varz=0;z3;z+)34. y=3;35. varrect=newRect(-3*step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-step+x*2*step,-3*step+y*2*step,-step+z*2*step,-3*step+x*2*step,-3*step+y*2*step,-step+z*2*step,0,0,#FFFF00);36. backLayer.addChild(rect);37. 38. 39. /左40. for(vary=0;y3;y+)41. for(varz=0;z3;z+)42. x=0;43. varrect=newRect(-3*step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-3*step+x*2*step,-3*step+y*2*step,-step+z*2*step,-3*step+x*2*step,-step+y*2*step,-step+z*2*step,-3*step+x*2*step,-step+y*2*step,-3*step+z*2*step,0,0,#008000);44. backLayer.addChild(rect);45. 46. 47. /右48. for(vary=0;y3;y+)49. for(varz=0;z3;z+)50. x=3;51. varrect=newRect(-3*step+x*2*step,-3*step+y*2*step,-3*step+z*2*step,-3*step+x*2*step,-3*step+y*2*step,-step+z*2*step,-3*step+x*2*step,-step+y*2*step,-step+z*2*step,-3*step+x*2*step,-step+y*2*step,-3*step+z*2*step,0,0,#0000FF);52. backLayer.addChild(rect);53. 54. 55. backLayer.addEventListener