html5立方体旋转效果,
最近在研究如何玩魔方的时候，突然想用HMTL5写一个魔方的模型。由于魔方是3D魔方，所以我这次尝试用HTML5写了一个简单的3D模型。
下面是预览画面。
制作流程
首先，你需要下载Html5开源库lufylegend-1.4.0。
魔方分为六个面，每个面由九个小长方形组成。现在我把每个小矩形打包成一个类。
现在搭建了一个3D魔方，那么要画每个小矩形，就需要知道小矩形的四个固定点，而这四个固定点会根据空间的旋转角度而变化。所以为了计算这四个定点的坐标，你需要知道魔方绕X轴和Z轴的旋转角度。
因此，创建矩形类，如下所示
函数Rect(pointA，pointB，pointC，pointD，angleX，angleZ，color){ base(this，LSprite，[])；this . pointz=[(pointA[0]pointB[0]pointC[0]pointD[0])/4，(pointA[1]pointB[1]pointC[1]pointD[1])/4，(pointA[2]pointB[2]pointC[2]pointD[2])/4]；this . z=this . pointz[2]；this.pointA=pointA，this.pointB=pointB，this.pointC=pointC，this.pointD=pointD，this.angleX=angleX，this.angleZ=angleZ，this.color=color} rect . prototype . set angle=function(a，b){ this . anglex=a；this . anglez=b；this . z=this . get point(this . pointz)[2]；};a点、b点、c点和d点是小矩形的四个顶点，anglex和anglez分别是X轴和Z轴的旋转角度，color是小矩形的颜色。
魔方分为六个面。我们先来看看前脸。如果将立方体的中心作为三维坐标系的中心，则九个小矩形的固定点对应的坐标如下图所示。
因此，正面的九个小矩形可以由下面的代码创建
for(var x=0；x3；x){ for(var y=0；y3；y){ z=3；var Rect=new Rect([-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，-step y * 2 * step，-3*step z*2*step]，0，0， #FF00back layer . addchild(rect)；}}其中backLayer是LSprite类，step是半个小矩形的长度。同理，你也可以得到另外5张脸。
所有六个表面都已建立。在画这六个面之前，首先要根据旋转的角度计算出每个定点的坐标。见下图。
根据上图，转换后的定点坐标可以通过以下公式获得
rect . prototype . get point=function(p){ var U2，v2，w2，u=p[0]，v=p[1]，w=p[2]；U2=u * math . cos(this . anglex)-v * math . sin(this . anglex)；v2=u * math . sin(this . anglex)v * math . cos(this . anglex)；w2=w；u=u2v=v2w=w2U2=u；v2=v * math . cos(this . anglez)-w * math . sin(this . anglez)；w2=v * math . sin(this . anglez)w * math . cos(this . anglez)；u=u2v=v2w=w2return [u2，v2，w2]；};最后，根据小矩形的四个定点坐标，画出这个矩形，
Rect.prototype.draw=function(图层){ this . graphics . clear()；this.graphics.drawVertices(1， #000000 ，[this.getPoint(this.pointA)，this.getPoint(this.pointB)，this.getPoint(this.pointC)，this.getPoint(this.pointD)]，true，this . color)；};其中drawVertices是lufylegend.js库中LGraphics类的一个方法，可以根据输入的定点坐标数组绘制一个多边形。
最后给出完整的代码，代码很少，JS代码一共91行。
一，index.html
！doctype HTML HTML Head meta charset= UTF-8 Title 3D魔方/title/headbody div ID=我的传奇 loading…/div script type= text/JavaScript src=./lufylegend-1 . 4 . 0 . min . js /script脚本类型=text/javascript src=。/Main.js/script脚本类型=text/javascript src=。/rect . js /script/body/html二，Rect类
函数Rect(pointA，pointB，pointC，pointD，angleX，angleZ，color){ base(this，LSprite，[])；这个。pointz=[(pointA[0]pointB[0]pointC[0]pointD[0])/4，(pointA[1]pointB[1]pointC[1]pointD[1])/4，(pointA[2]pointB[2]pointC[2]pointD[2])/4]；这个。z=这个。pointz[2]；this.pointA=pointA，this.pointB=pointB，this.pointC=pointC，this.pointD=pointD，this.angleX=angleX，this.angleZ=angleZ，this . color=color } rect . prototype . draw=function(图层){这个。图形。clear()；this.graphics.drawVertices(1， #000000 ，[this.getPoint(this.pointA)，this.getPoint(this.pointB)，this.getPoint(this.pointC)，this.getPoint(this.pointD)]，true，this。颜色)；};直肠。原型。设定角度=函数(a，b){ this。anglex=a；这个。anglez=b；这个。z=这个。get点(这个。pointz)[2]；};直肠。原型。get point=函数(p){ var U2，v2，w2，u=p[0]，v=p[1]，w=p[2]；U2=u *数学。因为(这个。anglex)-v *数学。罪(这个。anglex)；v2=u *数学。罪(这个。anglex)v *数学。因为(这个。anglex)；w2=w；u=u2v=v2w=w2U2=uv2=v *数学。因为(这个。anglez)-w *数学。罪(这个。anglez)；w2=v *数学。罪(这个。anglez)w *数学。因为(这个。anglez)；u=u2v=v2w=w2return [u2，v2，w2]；};三，Main.js
init(50， mylegend ，400，400，main)；var a=0，b=0，backLayer，step=20，key=null function main(){ back layer=new LSP rite()；addChild(后层)；backLayer.x=120，backLayer.y=120//后for(var x=0；x3；x){ for(var y=0；y3；y){ z=0；var Rect=new Rect([-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，-step y * 2 * step，-step y * 2 * step，-step y * 2 * step，-3*step z*2*step]addchild(rect)；} } //前for(var x=0；x3；x){ for(var y=0；y3；y){ z=3；var Rect=new Rect([-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，-step y * 2 * step，-step y * 2 * step，-step y * 2 * step，-3*step z*2*step]addchild(rect)；} } //上for(var x=0；x3；x){ for(var z=0；z3；z){ y=0；var Rect=new Rect([-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-step-z * 2 * step]，0，0， # fffaddchild(rect)；} } //下for(var x=0；x3；x){ for(var z=0；z3；z){ y=3；var Rect=new Rect([-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-step-z * 2 * step]，0，0， # fffaddchild(rect)；} } //左for(var y=0；y3；y){ for(var z=0；z3；z){ x=0；var Rect=new Rect([-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，-step，-step y * step，-step y * 2 * step，-step y * 2 * step，-step-step y * 2 * step，-3 * stepaddchild(rect)；} } //右for(var y=0；y3；y){ for(var z=0；z3；z){ x=3；var Rect=new Rect([-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，-step，-step y * step，-step y * 2 * step，-step y * 2 * step，-step-step y * 2 * step，-3 * stepaddchild(rect)；} }后层。添加事件侦听器(LEvent .ENTER_FRAME，on FRAME)；} function onframe(){ a=0.1，b=0.1backlayer。子列表=backlayer。子列表。sort(function(a，b){ return a . z-b . z；});用于(在后层键入。子列表){后层。子列表[键].setAngle(a，b)；backLayer.childList[key].绘制(背层);} } 这只是一个非常简陋的三维(三维的缩写)模型，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。