在网上看了3D的特效,不清楚其原理。比如像这样的代码没有详细的注释,看起来很费力啊,哪位大侠给个详细的注释,谢谢。或者用其他的代码 讲下原理也可以。3Q.
/*
b2--b3
/ / |
b1--b4 |
| b6--b7
| / /
b5--b8*/// vertex definitions: x,y,z,xp,yp
var b1 = new Array(-40,40,-40,0,0);
var b2 = new Array(-40,40,40,0,0);
var b3 = new Array(40,40,40,0,0);
var b4 = new Array(40,40,-40,0,0);
var b5 = new Array(-40,-40,-40,0,0);
var b6 = new Array(-40,-40,40,0,0);
var b7 = new Array(40,-40,40,0,0);
var b8 = new Array(40,-40,-40,0,0);
function project(vert, obj) {
vert[3] = Math.floor((vert[0] * dist) / (vert[2] + dist + 40));
vert[4] = Math.floor((vert[1] * dist) / (vert[2] + dist + 40));
}
function xrotate(vert, deg) {
cos1 = costable[deg];
sin1 = sintable[deg];
y = vert[1];
z = vert[2];
vert[1] = (cos1*y) - (sin1*z);
vert[2] = (sin1*y) + (cos1*z);
}function yrotate(vert, deg) {
cos1 = costable[deg];
sin1 = sintable[deg];
x = vert[0];
z = vert[2];
vert[0] = (cos1*x) + (sin1*z);
vert[2] = (cos1*z) - (sin1*x);
}function zrotate(vert, deg) {
cos1 = costable[deg];
sin1 = sintable[deg];
x = vert[0];
y = vert[1];
vert[0] = (cos1*x) - (sin1*y);
vert[1] = (sin1*x) + (cos1*y);
} var dist = 90;
var mx = 100,my = 100;
var p1,p2,p3,p4,p5,p6,p7,p8;
var xcenter, ycenter;
var sintable = new Array(360);
var costable = new Array(360);function startup() {
for(i=-360;i<=360;i++) {
costable[i] = Math.cos(i*0.017454);
sintable[i] = Math.sin(i*0.017454);
}
main();
} function amod(vert, lyr, img, xr, yr, zr) {
project(vert);
xrotate(vert,yr);
yrotate(vert,xr);
//zrotate(vert,zr);
}
/*
b2--b3
/ / |
b1--b4 |
| b6--b7
| / /
b5--b8*/var v1path, v2path, v3path, v4path;
var scrtch = 0;function swip() {
if(scrtch == "1") {
scrtch = 0;
c1.path = "m";
c2.path = "m";
c3.path = "m";
c4.path = "m";
}
else {
scrtch = 1;
}
}function main() {
if(scrtch == "1") {
c1.path = v1path;
c2.path = v2path;
c3.path = v3path;
c4.path = v4path;
}
xr = -Math.floor((mx-350)/80);
if(xr > 6) {xr = 6};
yr = Math.floor((my-250)/80);
if(yr > 6) {yr = 6};
zr = 0; for(i=1;i<=8;i++) {
eval("amod(b"+i+",p"+i+",'i"+i+"', xr, yr, zr)");
} v1path = "m "+b1[3]+","+b1[4]+" l "+b2[3]+","+b2[4]+" "+b3[3]+","+b3[4]+" "+b4[3]+","+b4[4]+" x e";
v2path = "m "+b5[3]+","+b5[4]+" l "+b6[3]+","+b6[4]+" "+b7[3]+","+b7[4]+" "+b8[3]+","+b8[4]+" x e";
v3path = "m "+b1[3]+","+b1[4]+" l "+b2[3]+","+b2[4]+" "+b6[3]+","+b6[4]+" "+b5[3]+","+b5[4]+" x e";
v4path = "m "+b3[3]+","+b3[4]+" l "+b4[3]+","+b4[4]+" "+b8[3]+","+b8[4]+" "+b7[3]+","+b7[4]+" x e";
v1.path = v1path;
v2.path = v2path;
v3.path = v3path;
v4.path = v4path;
setTimeout('main()','20');
}
/*
b2--b3
/ / |
b1--b4 |
| b6--b7
| / /
b5--b8*/// vertex definitions: x,y,z,xp,yp
var b1 = new Array(-40,40,-40,0,0);
var b2 = new Array(-40,40,40,0,0);
var b3 = new Array(40,40,40,0,0);
var b4 = new Array(40,40,-40,0,0);
var b5 = new Array(-40,-40,-40,0,0);
var b6 = new Array(-40,-40,40,0,0);
var b7 = new Array(40,-40,40,0,0);
var b8 = new Array(40,-40,-40,0,0);
function project(vert, obj) {
vert[3] = Math.floor((vert[0] * dist) / (vert[2] + dist + 40));
vert[4] = Math.floor((vert[1] * dist) / (vert[2] + dist + 40));
}
function xrotate(vert, deg) {
cos1 = costable[deg];
sin1 = sintable[deg];
y = vert[1];
z = vert[2];
vert[1] = (cos1*y) - (sin1*z);
vert[2] = (sin1*y) + (cos1*z);
}function yrotate(vert, deg) {
cos1 = costable[deg];
sin1 = sintable[deg];
x = vert[0];
z = vert[2];
vert[0] = (cos1*x) + (sin1*z);
vert[2] = (cos1*z) - (sin1*x);
}function zrotate(vert, deg) {
cos1 = costable[deg];
sin1 = sintable[deg];
x = vert[0];
y = vert[1];
vert[0] = (cos1*x) - (sin1*y);
vert[1] = (sin1*x) + (cos1*y);
} var dist = 90;
var mx = 100,my = 100;
var p1,p2,p3,p4,p5,p6,p7,p8;
var xcenter, ycenter;
var sintable = new Array(360);
var costable = new Array(360);function startup() {
for(i=-360;i<=360;i++) {
costable[i] = Math.cos(i*0.017454);
sintable[i] = Math.sin(i*0.017454);
}
main();
} function amod(vert, lyr, img, xr, yr, zr) {
project(vert);
xrotate(vert,yr);
yrotate(vert,xr);
//zrotate(vert,zr);
}
/*
b2--b3
/ / |
b1--b4 |
| b6--b7
| / /
b5--b8*/var v1path, v2path, v3path, v4path;
var scrtch = 0;function swip() {
if(scrtch == "1") {
scrtch = 0;
c1.path = "m";
c2.path = "m";
c3.path = "m";
c4.path = "m";
}
else {
scrtch = 1;
}
}function main() {
if(scrtch == "1") {
c1.path = v1path;
c2.path = v2path;
c3.path = v3path;
c4.path = v4path;
}
xr = -Math.floor((mx-350)/80);
if(xr > 6) {xr = 6};
yr = Math.floor((my-250)/80);
if(yr > 6) {yr = 6};
zr = 0; for(i=1;i<=8;i++) {
eval("amod(b"+i+",p"+i+",'i"+i+"', xr, yr, zr)");
} v1path = "m "+b1[3]+","+b1[4]+" l "+b2[3]+","+b2[4]+" "+b3[3]+","+b3[4]+" "+b4[3]+","+b4[4]+" x e";
v2path = "m "+b5[3]+","+b5[4]+" l "+b6[3]+","+b6[4]+" "+b7[3]+","+b7[4]+" "+b8[3]+","+b8[4]+" x e";
v3path = "m "+b1[3]+","+b1[4]+" l "+b2[3]+","+b2[4]+" "+b6[3]+","+b6[4]+" "+b5[3]+","+b5[4]+" x e";
v4path = "m "+b3[3]+","+b3[4]+" l "+b4[3]+","+b4[4]+" "+b8[3]+","+b8[4]+" "+b7[3]+","+b7[4]+" x e";
v1.path = v1path;
v2.path = v2path;
v3.path = v3path;
v4.path = v4path;
setTimeout('main()','20');
}
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货