3d正方体正方形公式切割成小正方形再还原视频
点击联系发帖人
时间：2017-04-08 01:30
3D立方体HTML5 Canvas实现
（仅支持单关键字）
3D立方体HTML5 Canvas实现
〖 作者：不详 〗〖 发布日期： 〗
3D立方体HTML5 Canvas实现。
&&meta charset=&gbk& /&
&&title&3D cube HTML5 canvas realization&/title&
&&script type=&text/javascript&&
function color(r, g, b, a)
function point2D(x, y)
point2D.prototype.move = function(p2D)
this.x += p2D.x;
this.y += p2D.y;
function point3D(x, y, z)
point3D.prototype.move = function(p3D)
this.x += p3D.x;
this.y += p3D.y;
this.z += p3D.z;
point3D.prototype.swap = function(p3D)
this.x = p3D.x;
this.y = p3D.y;
this.z = p3D.z;
point3D.prototype.rotate = function(axis, angleGr)
angleRad = angleGr * Math.PI / 180;
switch (axis)
var tempPoint = new point3D(
this.y * Math.cos(angleRad) - this.z * Math.sin(angleRad),
this.y * Math.sin(angleRad) + this.z * Math.cos(angleRad)
this.swap(tempPoint);
var tempPoint = new point3D(
this.x * Math.cos(angleRad) + this.z * Math.sin(angleRad),
-this.x * Math.sin(angleRad) + this.z * Math.cos(angleRad)
this.swap(tempPoint);
var tempPoint = new point3D(
this.x * Math.cos(angleRad) - this.y * Math.sin(angleRad),
this.x * Math.sin(angleRad) + this.y * Math.cos(angleRad),
this.swap(tempPoint);
function normal3D(p3D, length)
this.point = p3D;
this.length =
function poly()
var points = [];
for(var i = 0; i < arguments. i++)
points.push(arguments[i]);
this.points =
// Calculating normal
var v1 = new point3D(points[2].x - points[1].x, points[2].y - points[1].y, points[2].z - points[1].z);
var v2 = new point3D(points[0].x - points[1].x, points[0].y - points[1].y, points[0].z - points[1].z);
var normalP3D = new point3D(v1.y*v2.z-v2.y*v1.z, v1.z*v2.x-v2.z*v1.x, v1.x*v2.y-v2.x*v1.y);
var normalLen = Math.sqrt(normalP3D.x*normalP3D.x + normalP3D.y*normalP3D.y + normalP3D.z*normalP3D.z);
this.normal = new normal3D(normalP3D, normalLen);
poly.prototype.move = function(p3D)
for(var i = 0; i < this.points. i++)
var point = this.points[i];
point.move(p3D);
poly.prototype.rotate = function(axis, angle)
for(var i = 0; i = 90)
var lightIntensity = 1 - 2 * (normalAngleRad / Math.PI);
ctx.fillStyle = 'rgba('+fillColor.r+','+fillColor.g+','+fillColor.b+','+
(fillColor.a*lightIntensity)+')';
ctx.beginPath();
for(var i = 0; i < this.points. i++)
var point = this.points[i];
ctx.lineTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
ctx.moveTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba('+edgeColor.r+','+edgeColor.g+','+edgeColor.b+','+
(edgeColor.a*lightIntensity)+')';
ctx.beginPath();
var point = this.points[this.points.length-1];
ctx.moveTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
for(var i = 0; i < this.points. i++)
var point = this.points[i];
ctx.lineTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
ctx.stroke();
function Cube(size, fillColor, edgeColor)
var p000 = new point3D(0,0,0);
var p0S0 = new point3D(0,size,0);
var pSS0 = new point3D(size,size,0);
var pS00 = new point3D(size,0,0);
var p00S = new point3D(0,0,size);
var p0SS = new point3D(0,size,size);
var pSSS = new point3D(size,size,size);
var pS0S = new point3D(size,0,size);
var polys = [];
polys.push(new poly(p000,p0S0,pSS0,pS00));
polys.push(new poly(pS00,pSS0,pSSS,pS0S));
polys.push(new poly(pS0S,pSSS,p0SS,p00S));
polys.push(new poly(p00S,p0SS,p0S0,p000));
polys.push(new poly(p0S0,p0SS,pSSS,pSS0));
polys.push(new poly(p00S,p000,pS00,pS0S));
this.polys =
var points = [];
points.push(p000);
points.push(p0S0);
points.push(pSS0);
points.push(pS00);
points.push(p00S);
points.push(p0SS);
points.push(pSSS);
points.push(pS0S);
for(var i = 0; i < polys. i++)
points.push(polys[i].normal.point);
this.points =
this.fillColor = fillC
this.edgeColor = edgeC
function move(o3D, p3D)
for(var i = 0; i < o3D.points.length - o3D.polys. i++)
var point = o3D.points[i];
point.move(p3D);
function put(o3D, center)
for(var i = 0; i < o3D.polys. i++)
var poly = o3D.polys[i];
poly.put(center, o3D.fillColor, o3D.edgeColor);
function rotate(o3D, axis, angle)
for(var i = 0; i < o3D.points. i++)
var point = o3D.points[i];
point.rotate(axis, angle);
function init(){
canvas = document.getElementById('3Dcube');
if (canvas.getContext){
ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, canvas.width, canvas.height); // clear canvas
cube = new Cube(100, new color(50,50,200,1), new color(60,60,210,1));
move(cube, new point3D(-50,-50,-50));
rotate(cube, 'x', 45);
rotate(cube, 'y', 45);
rotate(cube, 'z', 45);
centerScreen = new point2D(canvas.width / 2, canvas.height / 2);
put(cube, centerScreen);
timer = setInterval(nextFrame, 1000 / 60);
function nextFrame()
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// clear canvas
rotate(cube, 'x', 0.4);
rotate(cube, 'y', 0.6);
rotate(cube, 'z', 0.3);
ctx.fillStyle = 'rgba(50, 50, 200, 1)';
ctx.strokeStyle = 'rgba(60, 60, 210, 1)';
put(cube, centerScreen);
&&style type=&text/css&&
&&&canvas { border: 0 }
&body onload=&init();&&
&&h1&3D cube HTML5 canvas realization on 2D contex&/h1&
&&p&Features:
&&&&&li&3D operations: rotating, moving object center&/li&
&&&&&li&Direct illumination&/li&
&&&&&li&Highlighting edges&/li&
&&&&&li&Optimizations:
&&&&&&&li&Skip outputting of invisible polygons&/li&
&&&&&&&li&Skip processing of duplicated points&/li&
&&canvas id=&3Dcube& width=&400& height=&225&&&/canvas&&/body&&/html&
来源：网上
JavaScript探索者
Copyright@第14届中环杯初赛_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
第14届中环杯初赛
上传于|0|0|暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩2页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢分享给朋友：通用代码: <input id="link4" type="text" class="form_input form_input_s" value="" />复 制flash地址: 复 制html代码: <input type="text" class="form_input form_input_s" id="link3" value="" />复 制分享视频到站外获取收益&&手机扫码分享视频二维码2小时内有效手工作品-卡片里藏着个正方体-立体贺卡Pop up card下载至电脑扫码用手机看用或微信扫码在手机上继续观看二维码2小时内有效手工作品-卡片里藏着个正方体-立体贺卡Pop up card扫码用手机继续看用或微信扫码在手机上继续观看二维码2小时内有效，扫码后可分享给好友没有优酷APP？立即下载请根据您的设备选择下载版本
药品服务许可证(京)-经营-
节目制作经营许可证京字670号
请使用者仔细阅读优酷、、
Copyright(C)2017 优酷
不良信息举报电话:分享给朋友：通用代码: <input id="link4" type="text" class="form_input form_input_s" value="" />复 制flash地址: 复 制html代码: <input type="text" class="form_input form_input_s" id="link3" value="" />复 制分享视频到站外获取收益&&手机扫码分享视频二维码2小时内有效用PS打造3D旋转正方体案例下载至电脑扫码用手机看用或微信扫码在手机上继续观看二维码2小时内有效用PS打造3D旋转正方体案例扫码用手机继续看用或微信扫码在手机上继续观看二维码2小时内有效，扫码后可分享给好友没有优酷APP？立即下载请根据您的设备选择下载版本
药品服务许可证(京)-经营-
节目制作经营许可证京字670号
请使用者仔细阅读优酷、、
Copyright(C)2017 优酷
不良信息举报电话:}
（仅支持单关键字）
3D立方体HTML5 Canvas实现
〖 作者：不详 〗〖 发布日期： 〗
3D立方体HTML5 Canvas实现。
&&meta charset=&gbk& /&
&&title&3D cube HTML5 canvas realization&/title&
&&script type=&text/javascript&&
function color(r, g, b, a)
function point2D(x, y)
point2D.prototype.move = function(p2D)
this.x += p2D.x;
this.y += p2D.y;
function point3D(x, y, z)
point3D.prototype.move = function(p3D)
this.x += p3D.x;
this.y += p3D.y;
this.z += p3D.z;
point3D.prototype.swap = function(p3D)
this.x = p3D.x;
this.y = p3D.y;
this.z = p3D.z;
point3D.prototype.rotate = function(axis, angleGr)
angleRad = angleGr * Math.PI / 180;
switch (axis)
var tempPoint = new point3D(
this.y * Math.cos(angleRad) - this.z * Math.sin(angleRad),
this.y * Math.sin(angleRad) + this.z * Math.cos(angleRad)
this.swap(tempPoint);
var tempPoint = new point3D(
this.x * Math.cos(angleRad) + this.z * Math.sin(angleRad),
-this.x * Math.sin(angleRad) + this.z * Math.cos(angleRad)
this.swap(tempPoint);
var tempPoint = new point3D(
this.x * Math.cos(angleRad) - this.y * Math.sin(angleRad),
this.x * Math.sin(angleRad) + this.y * Math.cos(angleRad),
this.swap(tempPoint);
function normal3D(p3D, length)
this.point = p3D;
this.length =
function poly()
var points = [];
for(var i = 0; i < arguments. i++)
points.push(arguments[i]);
this.points =
// Calculating normal
var v1 = new point3D(points[2].x - points[1].x, points[2].y - points[1].y, points[2].z - points[1].z);
var v2 = new point3D(points[0].x - points[1].x, points[0].y - points[1].y, points[0].z - points[1].z);
var normalP3D = new point3D(v1.y*v2.z-v2.y*v1.z, v1.z*v2.x-v2.z*v1.x, v1.x*v2.y-v2.x*v1.y);
var normalLen = Math.sqrt(normalP3D.x*normalP3D.x + normalP3D.y*normalP3D.y + normalP3D.z*normalP3D.z);
this.normal = new normal3D(normalP3D, normalLen);
poly.prototype.move = function(p3D)
for(var i = 0; i < this.points. i++)
var point = this.points[i];
point.move(p3D);
poly.prototype.rotate = function(axis, angle)
for(var i = 0; i = 90)
var lightIntensity = 1 - 2 * (normalAngleRad / Math.PI);
ctx.fillStyle = 'rgba('+fillColor.r+','+fillColor.g+','+fillColor.b+','+
(fillColor.a*lightIntensity)+')';
ctx.beginPath();
for(var i = 0; i < this.points. i++)
var point = this.points[i];
ctx.lineTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
ctx.moveTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba('+edgeColor.r+','+edgeColor.g+','+edgeColor.b+','+
(edgeColor.a*lightIntensity)+')';
ctx.beginPath();
var point = this.points[this.points.length-1];
ctx.moveTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
for(var i = 0; i < this.points. i++)
var point = this.points[i];
ctx.lineTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
ctx.stroke();
function Cube(size, fillColor, edgeColor)
var p000 = new point3D(0,0,0);
var p0S0 = new point3D(0,size,0);
var pSS0 = new point3D(size,size,0);
var pS00 = new point3D(size,0,0);
var p00S = new point3D(0,0,size);
var p0SS = new point3D(0,size,size);
var pSSS = new point3D(size,size,size);
var pS0S = new point3D(size,0,size);
var polys = [];
polys.push(new poly(p000,p0S0,pSS0,pS00));
polys.push(new poly(pS00,pSS0,pSSS,pS0S));
polys.push(new poly(pS0S,pSSS,p0SS,p00S));
polys.push(new poly(p00S,p0SS,p0S0,p000));
polys.push(new poly(p0S0,p0SS,pSSS,pSS0));
polys.push(new poly(p00S,p000,pS00,pS0S));
this.polys =
var points = [];
points.push(p000);
points.push(p0S0);
points.push(pSS0);
points.push(pS00);
points.push(p00S);
points.push(p0SS);
points.push(pSSS);
points.push(pS0S);
for(var i = 0; i < polys. i++)
points.push(polys[i].normal.point);
this.points =
this.fillColor = fillC
this.edgeColor = edgeC
function move(o3D, p3D)
for(var i = 0; i < o3D.points.length - o3D.polys. i++)
var point = o3D.points[i];
point.move(p3D);
function put(o3D, center)
for(var i = 0; i < o3D.polys. i++)
var poly = o3D.polys[i];
poly.put(center, o3D.fillColor, o3D.edgeColor);
function rotate(o3D, axis, angle)
for(var i = 0; i < o3D.points. i++)
var point = o3D.points[i];
point.rotate(axis, angle);
function init(){
canvas = document.getElementById('3Dcube');
if (canvas.getContext){
ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, canvas.width, canvas.height); // clear canvas
cube = new Cube(100, new color(50,50,200,1), new color(60,60,210,1));
move(cube, new point3D(-50,-50,-50));
rotate(cube, 'x', 45);
rotate(cube, 'y', 45);
rotate(cube, 'z', 45);
centerScreen = new point2D(canvas.width / 2, canvas.height / 2);
put(cube, centerScreen);
timer = setInterval(nextFrame, 1000 / 60);
function nextFrame()
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// clear canvas
rotate(cube, 'x', 0.4);
rotate(cube, 'y', 0.6);
rotate(cube, 'z', 0.3);
ctx.fillStyle = 'rgba(50, 50, 200, 1)';
ctx.strokeStyle = 'rgba(60, 60, 210, 1)';
put(cube, centerScreen);
&&style type=&text/css&&
&&&canvas { border: 0 }
&body onload=&init();&&
&&h1&3D cube HTML5 canvas realization on 2D contex&/h1&
&&p&Features:
&&&&&li&3D operations: rotating, moving object center&/li&
&&&&&li&Direct illumination&/li&
&&&&&li&Highlighting edges&/li&
&&&&&li&Optimizations:
&&&&&&&li&Skip outputting of invisible polygons&/li&
&&&&&&&li&Skip processing of duplicated points&/li&
&&canvas id=&3Dcube& width=&400& height=&225&&&/canvas&&/body&&/html&
来源：网上
JavaScript探索者
Copyright@第14届中环杯初赛_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
第14届中环杯初赛
上传于|0|0|暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩2页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢分享给朋友：通用代码: <input id="link4" type="text" class="form_input form_input_s" value="" />复 制flash地址: 复 制html代码: <input type="text" class="form_input form_input_s" id="link3" value="" />复 制分享视频到站外获取收益&&手机扫码分享视频二维码2小时内有效手工作品-卡片里藏着个正方体-立体贺卡Pop up card下载至电脑扫码用手机看用或微信扫码在手机上继续观看二维码2小时内有效手工作品-卡片里藏着个正方体-立体贺卡Pop up card扫码用手机继续看用或微信扫码在手机上继续观看二维码2小时内有效，扫码后可分享给好友没有优酷APP？立即下载请根据您的设备选择下载版本
药品服务许可证(京)-经营-
节目制作经营许可证京字670号
请使用者仔细阅读优酷、、
Copyright(C)2017 优酷
不良信息举报电话:分享给朋友：通用代码: <input id="link4" type="text" class="form_input form_input_s" value="" />复 制flash地址: 复 制html代码: <input type="text" class="form_input form_input_s" id="link3" value="" />复 制分享视频到站外获取收益&&手机扫码分享视频二维码2小时内有效用PS打造3D旋转正方体案例下载至电脑扫码用手机看用或微信扫码在手机上继续观看二维码2小时内有效用PS打造3D旋转正方体案例扫码用手机继续看用或微信扫码在手机上继续观看二维码2小时内有效，扫码后可分享给好友没有优酷APP？立即下载请根据您的设备选择下载版本
药品服务许可证(京)-经营-
节目制作经营许可证京字670号
请使用者仔细阅读优酷、、
Copyright(C)2017 优酷
不良信息举报电话:}
我要回帖
更多推荐
- ·何佩瑜三级有哪些电影
- ·霹雳布袋戏十大神功中灼世烈眼风火轮一样给人安上在现实的寓意？
- ·韩国人看不看韩国古装和中国古装对比剧?
- ·这是哪个剧的演员表_全部演员表啊？
- ·请问日产逍客手动挡多少钱的有天窗吗？
- ·神武百老北味酒价格表在哪怎么得 价格是多少
- ·常伴君王侧 和亲罪妃、打一数字
- ·沈阳哪个风水师可以帮助更改财运和免费测事业运势
- ·皮皮游戏现在改名了吗？怎么搜steam搜索不到游戏。
- ·出道的利弊都有哪些，现在有有好机会要不要跳槽出道？
- ·求婚用什么时候求婚最合适歌曲，求婚音乐用什么时候求婚最合适最合适，求婚放什么时候求婚最合适背
- ·神武120装备模具怎么刷10模具双加多少
- ·电影‖绿色柔情；背景音乐纯音乐插曲叫什么？？
- ·跪求斗鱼直播斗鱼之灵魂摆渡渡的资源，哪位大神可以分享一下！
- ·永生者用什么镰刀刷恶梦级给力100，拍卖行有的
- ·碧玺最不值钱的颜色那种颜色值钱？
- ·上单s7蛮王上单天赋对鳄鱼，哪个更厉害
- ·战地2模组下载的模组已经放进文件的gamemods里了，为什么还不能用
- ·请各位老师看看，这块石头石头布是什么材质质的！谢谢！
- ·请大师指点们看看这块价格会是多少？尺寸42.3*26.8*4.7*
- ·3d正方体正方形公式切割成小正方形再还原视频
- ·大青云决怎么升级快宝甲9升10需要多少进阶丹
- ·国内有哪些实现了“拳拳到肉”打击感强的网络游戏
- ·大家的发条什么意思场次，胜率都是多少
- ·很久以前玩过上古世纪美服封号，被封号了
- ·梦见自己死了遇到了一个男人,后来又自来也后来复活了吗
- ·击破部队数量，是必须主将副将有什么区别还是副将也行
- ·宾堡真人真人越狱密室逃脱脱价格贵不贵
- ·新焚天之怒官网魂珠怎么得 魂珠属性有哪些
- ·上海11选5任选2奖金5234711多少期没有出号了?
- ·我觉得冰河世纪2玻尿酸有点贵也？
- ·开一家山炮李记串串香怎么样要注意什么？
- ·穿越风流皇帝与太后请#解039期：遥遥无期+猜一生肖+
- ·北方种哪个品种榴莲能结果吗能种植榴莲吗
- ·xbox onexbox手柄pc驱动怎么安装驱动
- ·求问，粤语版与国语粤语版版有什么区别
