最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方体,这次就试着用HTML5写了一个简单的3D模型。

下面是预览画面。

制作流程

首先你需要下载Html5开源库件lufylegend-1.4.0

魔方分为6个面,每个面由9个小矩形组成,现在我把每个小矩形当做一个类封装起来,

因为现在建立的是一个3D魔方,所以要画出每个小矩形,需要知道小矩形的4个定点,而这4个定点会根据空间的旋转角度而变换,所以为了计算出这4个定点坐标,需要知道魔方绕x轴和z轴旋转的角度。

所以,建立矩形类如下

function 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.setAngle = function(a,b){  
    this.angleX = a;  
    this.angleZ = b;  
    this.z=this.getPoint(this.pointZ)[2];  
};  

pointA,pointB,pointC,pointD是小矩形的四个顶点,angleX,angleZ分别是x轴和z轴旋转的角度,color是小矩形的颜色。

魔方分为6个面,先看一下最前面的一面,如果以立方体的中心作为3D坐标系的中心,那么9个小矩形的各个定点所对应的坐标如下图所示

所以,前面这个面的9个小矩形可以由下面的代码来建立

for(var x=0;x<3;x  ){  
    for(var y=0;y<3;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,-3*step   z*2*step],0,0,"#FF0000");  
        backLayer.addChild(rect);  
    }  
}  

其中backLayer是一个LSprite类,step是半个小矩形的长,同样的道理,可以也得到其他5个面。

6个面都建立了,在绘制这6个面之前,首先要根据旋转的角度来计算各个定点的坐标,看下面的图

根据上面的图,用下面的公式即可得到变换后的定点坐标

Rect.prototype.getPoint = 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 = u2; v = v2; w = w2;  
    u2 = u;  
    v2 = v * Math.cos(this.angleZ) - w * Math.sin(this.angleZ);  
    w2 = v * Math.sin(this.angleZ)   w * Math.cos(this.angleZ);  
    u = u2; v = v2; w = w2;  
    return [u2,v2,w2];  
};  

最后根据小矩形的四个定点坐标,来绘制这个矩形,

Rect.prototype.draw = function(layer){  
    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>  
</head>  
<body>  
<div id="mylegend">loading……</div>  
<script type="text/javascript" src="../lufylegend-1.4.0.min.js"></script>   
<script type="text/javascript" src="./Main.js"></script>   
<script type="text/javascript" src="./Rect.js"></script>   
</body>  
</html>  

二,Rect类

function 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.draw = function(layer){  
    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);  
};  
Rect.prototype.setAngle = function(a,b){  
    this.angleX = a;  
    this.angleZ = b;  
    this.z=this.getPoint(this.pointZ)[2];  
};  
Rect.prototype.getPoint = 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 = u2; v = v2; w = w2;  
    u2 = u;  
    v2 = v * Math.cos(this.angleZ) - w * Math.sin(this.angleZ);  
    w2 = v * Math.sin(this.angleZ)   w * Math.cos(this.angleZ);  
    u = u2; v = v2; w = w2;  
    return [u2,v2,w2];  
};  

三,Main.js

init(50,"mylegend",400,400,main);  
var a = 0,b=0,backLayer,step = 20,key = null;  
function main(){  
    backLayer = new LSprite();  
    addChild(backLayer);  
    backLayer.x = 120,backLayer.y = 120;  
    //后  
    for(var x=0;x<3;x  ){  
        for(var y=0;y<3;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,-3*step   z*2*step],0,0,"#FF4500");  
            backLayer.addChild(rect);  
        }  
    }  
    //前  
    for(var x=0;x<3;x  ){  
        for(var y=0;y<3;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,-3*step   z*2*step],0,0,"#FF0000");  
            backLayer.addChild(rect);  
        }  
    }  
    //上  
    for(var x=0;x<3;x  ){  
        for(var z=0;z<3;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   z*2*step],0,0,"#FFFFFF");  
            backLayer.addChild(rect);  
        }  
    }  
    //下  
    for(var x=0;x<3;x  ){  
        for(var z=0;z<3;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   z*2*step],0,0,"#FFFF00");  
            backLayer.addChild(rect);  
        }  
    }  
    //左  
    for(var y=0;y<3;y  ){  
        for(var z=0;z<3;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,-3*step   z*2*step],0,0,"#008000");  
            backLayer.addChild(rect);  
        }  
    }  
    //右  
    for(var y=0;y<3;y  ){  
        for(var z=0;z<3;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,-3*step   z*2*step],0,0,"#0000FF");  
            backLayer.addChild(rect);  
        }  
    }  
    backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
}  
function onframe(){  
    a  = 0.1 , b  = 0.1;  
    backLayer.childList = backLayer.childList.sort(function(a,b){return a.z - b.z;});  
    for(key in backLayer.childList){  
        backLayer.childList[key].setAngle(a,b);  
        backLayer.childList[key].draw(backLayer);  
   }  
}  

这只是一个非常简陋的3D模型,希望对大家的学习有所帮助,也希望大家多多支持Devmax。

【HTML5】3D模型--百行代码实现旋转立体魔方实例的更多相关文章

  1. 详解Canvas实用库Fabric.js使用手册

    这篇文章主要介绍了详解Canvas实用库Fabric.js使用手册的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

    本篇文章主要介绍【HTML5】3D模型--百行代码实现旋转立体魔方实例,具有一定的参考价值,有需要的可以了解一下。

  3. H5 canvas实现贪吃蛇小游戏

    本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. ios – 如何更改UINavigationBar底部边框的颜色?

    我阅读了许多主题,但没有一个在最新版本的Swift的清晰,一致的答案中解决了这个问题.例如,thisquestion的最佳答案表明UINavigationBar.appearance().setShadowImage().但是,最新版本的swift中不存在这样的方法.我不想隐藏底部边框.我只是想改变颜色.另外,能够改变高度会很棒,但我知道我在一个问题上问得太多了.编辑:我创建了一个2×1像素图像并

  5. ios – sizeToFit削减了一些UILabel字体类型的高度和宽度但不是其他 – 是否有修复?

    我正在使用自定义字体,我有一点障碍.有些字体可以正常使用sizetoFit,如下所示:但是,其他自定义字体在左侧和底部被截断,因为这是:我可以“破解”它,只检查每种字体类型并添加几个像素,但我想知道是否有更清晰的解决方案,甚至解释为什么会发生这种情况.谢谢!

  6. ios – UILabel子类 – 尽管标签高度正确,文字在底部切断

    我有一个问题,UILabel子类切断底部的文本.标签的高度适合文本,底部留有一些空间,但文本仍然被剪掉.红色条纹是添加到标签图层的边框.我将标签子类化以添加边缘插入.但是,在这种特殊情况下,插入是零.解决方法事实证明问题在于改变它解决了这个问题

  7. ios – performBatchUpdates上的UICollectionView性能问题

    我们正在尝试使用自定义布局设置UICollectionView.每个CollectionViewCell的内容都是一个图像.总之,将会有数千张图像,并且在某个特定时间可以看到大约140-150张图像.在动作事件中,可能会在位置和大小上重新组织所有单元格.目标是使用performBatchUpdates方法为当前所有移动事件设置动画.在一切变得动画之前,这会导致很长的延迟时间.到目前为止,我们发现内

  8. ios – 当我缩放时,如何关闭所有图像处理以查看实际的未修改像素?

    我有一个应用程序需要放大到足够远的图像,我可以清楚地看到图像上的单个像素.我需要看到一种颜色的清晰正方形,没有抗锯齿或其他通常有用的技术,使图像在显示器上看起来很好.我如何扼杀所有这些帮助?

  9. 如何清除屏幕截图IOS

    我正在研究IOS应用程序,其中需要采取清晰的屏幕截图我已经尝试过了但是图像的质量并不好.请为我推荐一些东西.解决方法换线至

  10. ios – 如何只向UIImageView添加右边框

    我想为UIImageView添加白色边框.我尝试了以下,但它不起作用:解决方法我现在就这样做了

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部