HTML5キャンバスで幾何モデルの3Dモーションアニメーション効果を実現

JS片：

<スクリプト>
var {atan2,sqrt,sin,cos,PI,acos} = 数学;
関数 project3D(x,y,z,vars){
x-=vars.camX,y-=vars.camY,z-=vars.camZ;
p=atan2(x,z),d=sqrt(z*z x*x),x=sin(p-vars.yaw)*d,z=cos(p-vars.yaw)*d;
p=atan2(y,z),d=sqrt(y*y z*z),y=sin(p-vars.pitch)*d,z=cos(p-vars.pitch)*d;
n=-9,b=1,l=9,d=1,e=0,f=0,g=x,h=z,k=(h-f)*(l-n)-(g-e)*(d-b) ,m=((g-e)*(b-f)-(h-f)*(n-e))/k;
return {x:vars.cx (n m*(l-n))*vars.scale,y:vars.cy y/z*vars.scale,d:sqrt(x*x y*y z*z)};
}
関数標高(x,y,z){
return acos(z / sqrt(x*x y*y z*z));
}
関数細分割(形状,細分割){
var t=shape.segs.length;
for(var i=0;i var x1=shape.segs[i].a.x;
var y1=shape.segs[i].a.y;
var z1=shape.segs[i].a.z;
var x2=(shape.segs[i].b.x-x1)/サブディビジョン;
var y2=(shape.segs[i].b.y-y1)/サブディビジョン;
var z2=(shape.segs[i].b.z-z1)/サブディビジョン;
形状.segs[i].b.x=x1 x2;
形状.segs[i].b.y=y1 y2;
形状.segs[i].b.z=z1 z2;
var x3=x2;
var y3=y2;
var z3=z2;
for(var k=0;k shape.segs.push(新しいセグメント(x1 x2,y1 y2,z1 z2,x1 x2 x3,y1 y2 y3,z1 z2 z3));
x2 =x3;
y2 =y3;
z2 =z3;
}
}
}


これは、非常に空間感のある、html5 キャンバスをベースとした、見栄えの良い 3D モデル 3D アニメーション エフェクトです。