HTML5实现3D球效果Word格式文档下载.docx

HTML5实现3D球效果Word格式文档下载.docx

《HTML5实现3D球效果Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《HTML5实现3D球效果Word格式文档下载.docx（14页珍藏版）》请在冰豆网上搜索。

metacharset="

utf-8"

>

styletype="

text/css"

#box{

border:

1pxsolid#f60;

margin:

0auto;

}

/style>

script>

varspaceX=30;

//X方向的密度

varspaceY=30;

//Y方向的密度

varPI=Math.PI;

//数学角度π

varradius=200;

//球的半径

varradian=PI/180;

//弧度

varspeedX=0;

//X方向的速度

varspeedY=0;

//Y方向的速度

varoffsetX=300;

//X方向的偏移量相当于将球的中心X坐标移之到画布中央

varoffsetY=300;

//Y方向的偏移量相当于将球的中心Y坐标移之到画布中央

varspheres=newArray（）;

//存储像素点

varcanvas;

//画布

varcontext;

//上下文

varfocalLength=300;

//控制球距离屏幕的距离

varstart=true;

//是否启动

varsx=0;

//sinx

varcx=0;

//cosx

varsy=0;

//siny

varcy=0;

//cosy

varsz=0;

//sinz

varcz=0;

//cosz

varinnerStaColor="

GREEN"

;

//表示内部颜色

varouterStaColor="

RED"

//外部颜色

varobjectRadius=10;

//绘制原点半径

varscaleRatio=0;

varcameraView={

x:

0,

y:

z:

rotX:

rotY:

rotZ:

0

};

//视角角度

/**

author:

qingfeilee

date:

2012-03-28

description:

初始化系统画布信息

**/

functioninitCanvas（）{

try{

canvas=document.getElementById（"

sphere"

）;

context=canvas.getContext（"

2d"

}catch（e）{

document.getElementById（"

tip_info"

）.innerHTML="

您的浏览器不支持！

"

}

}

初始化小球实体

functioninitSphere（）{

for（vari=spaceY;

i<

180;

i+=spaceY）{

for（varangle=0;

angle<

360;

angle+=spaceX）{

varobject={};

varx=Math.sin（radian*i）*radius;

object.x=Math.cos（angle*radian）*x;

object.y=Math.cos（radian*i）*radius;

object.z=Math.sin（angle*radian）*x;

object.glow=.5;

//亮度的范围

spheres.push（object）;

}

初始化系统函数

functioninit（）{

initCanvas（）;

initSphere（）;

setInterval（this.update,1000/60,this）;

setTimeout（function（）{

start=false;

},

1000）;

设置整个大球的运转速度

functionsetSpeed（speedX,speedY）{

this.speedX=speedX;

this.speedY=speedY;

更新整个球的状态以实现动态效果

functionupdate（）{

if（start）{

setParam（）;

设置各个小球的属性

functionsetParam（）{

//根据速度大小计算出一次旋转的角度大小

varrotYstep=speedX/10000;

varrotXstep=speedY/10000;

cameraView.rotY=rotYstep;

cameraView.rotX=-rotXstep;

//计算出对应的cos和sin

sx=Math.sin（cameraView.rotX）;

cx=Math.cos（cameraView.rotX）;

sy=Math.sin（cameraView.rotY）;

cy=Math.cos（cameraView.rotY）;

sz=Math.sin（cameraView.rotZ）;

cz=Math.cos（cameraView.rotZ）;

//设置画布的效果

context.fillStyle='

rgba（0,0,0,0.1）'

context.fillRect（0,0,canvas.width,canvas.height）;

varl=spheres.length-1;

for（vari=l,

obj;

obj=spheres[i];

i--）{

render（obj）;

渲染整个画布

functionrender（object）{

varxy,xz,yx,yz,zx,zy;

//计算出物体的相对于照相机的位置

varx=object.x-cameraView.x;

vary=object.y-cameraView.y;

varz=object.z-cameraView.z;

//绕X轴旋转

xy=cx*y-sx*z;

xz=sx*y+cx*z;

//绕Y轴旋转

yz=cy*xz-sy*x;

yx=sy*xz+cy*x;

//绕Z轴旋转

zx=cz*yx-sz*xy;

zy=sz*yx+cz*xy;

//给各个球重新定位

object.x=zx;

object.y=zy;

object.z=yz;

//根据z轴数据来缩放球

scaleRatio=focalLength/（focalLength+yz）;

scale=scaleRatio;

if（object.glow>

.5）{

object.glow-=.02;

varsphereStyle=context.createRadialGradient（offsetX+object.x*scaleRatio,offsetY+object.y*scaleRatio,

scaleRatio*.5,offsetX+object.x*scaleRatio,offsetY+object.y*scaleRatio,scaleRatio*objectRadius*.5）;

sphereStyle.addColorStop（0,innerStaColor）;

sphereStyle.addColorStop（object.glow,outerStaColor）;

sphereStyle.addColorStop（1,'

rgba（0,0,0,0）'

context.fillStyle=sphereStyle;

context.fillRect（offsetX+object.x*scaleRatio-scaleRatio*objectRadius*.5,

offsetY+object.y*scaleRatio-scaleRatio*objectRadius*.5,scaleRatio*objectRadius,scaleRatio*objectRadius）;

document.getElementById（"

当前速度：

+speedX+"

"

+speedY+"

小球半径：

+objectRadius;

冻结/激活真个大球状态

functionstartOrPause（）{

setTimeout（function（）{

start=false;

},

2000）;

swi"

激活"

innerStaColor="

outerStaColor="

}else{

start=true;

2秒后冻结"

改变球的大小

functionchangeObjectRadius（val）{

this.objectRadius=val;

window.addEventListener（"

load"

init,true）;

/script>

/head>

body>

divid="

box"

style="

width:

600px;

height:

600px"

<

canvasid="

width="

600"

height="

background:

#0066FF"

/canvas>

divalign="

center"

<

buttonid="

onclick="

startOrPause（）"

激活

/button>

buttononclick="

setSpeed（-150,0）"

向东

setSpeed（150,0）"

向西

setSpeed（0,-150）"

向南

setSpeed（0,150）"

向北

小球大小：

inputtype="

range"

min="

10"

max="

30"

value="

step="

2"

onchange="

changeObjectRadius（this.value）"

/>

/div>

ahref='

详情见阿飞blog

/a>

aid="

/body>

/html>

仅仅看代码可能一时半会看不出端倪，下面将这块儿的几何图形贴上供参考，由于非常外行所以图形画的比较粗糙，如下图三：

图三

通过上面的图形我们很容易得出initSphere函数里面的一些计算。

这样就可以将球的各个点进行了初始化。

然后就是旋转，我们以绕Y轴旋转为例。

假设当前时刻某点P（X,Y,Z）绕Y轴旋转α度，到P1（X1,Y1,Z1）这两者有何关系呢？

不再赘述直接给出公式：

X1=X*cosα+Z*sinα；

Y1=Y；

Z1=-X*sinα+Z*cosα不懂的复习一下高等书写，O（∩_∩）O哈哈~。

绕其他轴旋转同理，这样就得到了update方法里面的算法。

当然在3D中还存在一个视角角度，就相当于摄像机一样，本例子中默认是是0，0，0。

由代码注释较详细，具体就不再赘述。

哪位大牛有好的算法实现希望能够多多交流，共同学习，共同进步，欢迎拍砖。

本文乃原创demo，转载请注明出处：

附件：