php三D立体模拟,【HTML5】3D模型--百行代码实现旋转立体魔方实例
最近研究魔方的玩法，就突然想用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
3D魔方
loading……
二，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.jsinit(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);
}
}
以上就是【HTML5】3D模型--百行代码实现旋转立体魔方实例 的内容，更多相关内容请关注PHP中文网(www.php.cn)！
本文原创发布php中文网，转载请注明出处，感谢您的尊重！
php三D立体模拟,【HTML5】3D模型--百行代码实现旋转立体魔方实例相关推荐
- 【HTML5】3D模型--百行代码实现旋转立体魔方
最近研究魔方的玩法,就突然想用HMTL5写一个魔方的模型,由于魔方是一个3D的立方体,这次就试着用HTML5写了一个简单的3D模型. 下面是测试链接和预览画面. http://lufy.netne.n ...
- HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体 粒子波浪动画.3D 粒子动画特效 代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
- 开源教程 「nlp-tutorial」！用百行代码搞定各类NLP模型
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货 参与:思源.贾伟 来源:机器之心 NLP 的研究,从词嵌入到 CNN ...
- lstm代码_贼好理解，这个项目教你如何用百行代码搞定各类NLP模型
机器之心报道 参与:思源.贾伟 NLP 的研究,从词嵌入到 CNN,再到 RNN,再到 Attention,以及现在正红火的 Transformer,模型已有很多,代码库也成千上万.对于初学者如何把握 ...
- Html5游戏开发-145行代码完成一个RPG小Demo
lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...
- html5 3d模型资源,玩转 HTML5 下 WebGL 的 3D 模型交并补
CSG 构造实体几何这个概念在工业水利水电施工上.游戏上已经有很多人使用了,最简单的实体表示叫作体元,通常是形状简单的物体,如立方体.圆柱体.棱柱.棱锥.球体.圆锥等.根据每个软件包的不同这些体元也有 ...
- html中如何制作星空背景,HTML5网页制作200行代码搞定canvas星空背景连线
{getUnitName} {getLessonName} 敬请期待 免费 {getTaskName} 剩余观看时长:{watchLimitRemaining} 回放 {activityStartTi ...
- 视觉盛宴 HTML5 3D动画应用赏析
以下是一些很棒的HTML5 3D动画应用,值得一看. 1.3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是 ...
- 分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型
这张图每位程序员应该都深有感触. 人民心目中的程序员是这样的:坐在电脑面前噼里啪啦敲着键盘,运键如飞. 现实中程序员是这样的:编码5分钟,调试两小时. 今天我要给大家分享一个用WebGL开发的网站,感 ...
- 玩转iOSARkit以及3D模型
文章目录 前言 解析下代码 planeBox 换个模型 推荐的3D模型网站 下载模型注意事项 将新模型放到项目里 渲染模型 两个诡异错误 Scene is modified in a renderin ...
最新文章
- MVC 中的Model对象
- Loadrunner-web资源相关图表
- Cross-Scale Cost Aggregation for Stereo Matching
- 随机漫步(random walk)
- 字节跳动推“头条搜索”独立APP 安卓端已上线
- 一步步学习NHibernate(8)——HQL查询(2)
- CF618F Double Knapsack 构造、抽屉原理
- IDES SAP SEM 4.0/SAP BW 3.50 笔记本安装手册
- Zoho中国：如何利用好免费版CRM
- 样条曲线（spline）
- linux的XDG（X Desktop Group）基本目录规范
- PPT和WORD转成PDF时图有黑底
- windows下mysql8初始化
- 华为防火墙笔记-加密与证书
- 计算机辐射测试,测试计算机的电磁辐射
- java regux_使用Unix命令在Java中打印Mac的序列号
- 【SSM】13-Spring中实现依赖注入的两种方式（xml和注解）
- vue技术分享ppt_胡中南：Web端GIS技术新进展 | GTC专题论坛报告(视频+PPT+速记)
- 矩阵公式tr(AA')=tr(A'A)/tr(AA^T)=tr(A^TA)的推导
- 大型网站架构模式【大型网站技术架构.核心原理与案例分析】(阅读分享)