1、HTML5实现 3D球效果 曲终人即散，每当看到这个词汇总是略感的伤感。现在的我们周围的生活节奏是如此之快，尤其是生活在北京这个经济高速发展的地方。有时曲可能尚未终，可是人已经散！当我们下班后漫步在繁华都市的夜幕之下，总是略感孤独和伤感。或许是由于工作压力，也或许是因为亲人爱人不在身边，更或许是自己的心一次次的被冲击。京城周末的夜晚丝毫没有因为是夜晚而变得静谧，而我总是急匆匆的上了回家的夜班车。或许我应该停下脚步去聆听、去感受、去享受，但是我却找不到一个这样的地方，唯独小区里的那张长长的木椅。喧嚣的夜幕总是让我想起电视上看见的迪厅里悬挂的那个水晶球，如此的耀眼，如此的抢眼。人们在球的衬托下排遣
2、着自己的疲惫，宣泄着自己的寂寞，放纵着自己的形态作为 IT 小生制造那支能够在头顶上旋转的球有一定难度，但可以让其在电脑中为人们表演。这篇博客描述的是如何实现一个3D 球的效果，主要是通过 HTML5里面的 canvas 来实现。整片文章属于原创若有相同纯属有缘，在做这个效果之前简略的学习了一下3D 数学基础收获颇丰，因为大学里面学的数学基本上都还给了老师。闲话少说，先看实现的效果如图一：图一要想使得整个球动起来，需要先激活。然后再改变他的旋转方向或者改变这个小球的半径。看启动后的效果，如图二：图二这里为什么要设定一个2秒冻结，因为如果立刻冻结的话整个求的样式就无法及时改变所以就采取了这样一个
3、迂回之策。详见代码如下：再回首，那只小球已停止转动HTML5实现3D球效果#box border:2px solid #f60; margin:0 auto; var spaceX = 30; /X方向的密度var spaceY = 30; /Y方向的密度var PI = Math.PI; /数学角度var radius = 200; /球的半径var radian = PI / 180; /弧度var speedX = 0; /X方向的速度var speedY = 0; /Y方向的速度var offsetX = 300; /X方向的偏移量相当于将球的中心X坐标移之到画布中央var offse
4、tY = 300; /Y方向的偏移量相当于将球的中心Y坐标移之到画布中央var spheres = new Array(); /存储像素点var canvas; /画布var context; /上下文var focalLength = 300; /控制球距离屏幕的距离var start = true; /是否启动var sx = 0; /sinxvar cx = 0; /cosxvar sy = 0; /sinyvar cy = 0; /cosyvar sz = 0; /sinzvar cz = 0; /coszvar innerStaColor = “GREEN“; /表示内部颜色var
5、outerStaColor = “RED“; /外部颜色var objectRadius = 10; /绘制原点半径var scaleRatio = 0;var cameraView = x: 0,y: 0,z: 0,rotX: 0,rotY: 0,rotZ: 0; /视角角度/*author:qingfeileedate:2012-03-28description:初始化系统画布信息*/function initCanvas() try canvas = document.getElementById(“sphere“);context = canvas.getContext(“2d“);c
6、atch(e)document.getElementById(“tip_info“).innerHTML = “您的浏览器不支持！“; /*author:qingfeileedate:2012-03-28description:初始化小球实体*/function initSphere() for (var i = spaceY; i .5) object.glow -= .02;var sphereStyle = context.createRadialGradient(offsetX + object.x * scaleRatio, offsetY + object.y * scaleRat
7、io, 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.fil
8、lRect(offsetX + object.x * scaleRatio - scaleRatio * objectRadius * .5, offsetY + object.y * scaleRatio - scaleRatio * objectRadius * .5, scaleRatio * objectRadius, scaleRatio * objectRadius);document.getElementById(“tip_info“).innerHTML = “当前速度：“+speedX+“ “+ speedY+“ 小球半径：“+objectRadius; /*author:q
9、ingfeileedate:2012-03-28description:冻结/激活真个大球状态*/function startOrPause() if (start) setTimeout(function() start = false;,2000);document.getElementById(“swi“).innerHTML = “激活“;innerStaColor = “GREEN“;outerStaColor = “RED“; else start = true;document.getElementById(“swi“).innerHTML = “2秒后冻结“;innerStaC
10、olor = “RED“;outerStaColor = “GREEN“;/*author:qingfeileedate:2012-03-28description:改变球的大小*/function changeObjectRadius(val) this.objectRadius = val;window.addEventListener(“load“, init, true);激活向东向西向南向北小球大小：详情见阿飞blog仅仅看代码可能一时半会看不出端倪，下面将这块儿的几何图形贴上供参考，由于非常外行所以图形画的比较粗糙，如下图三：图三通过上面的图形我们很容易得出 initSphere
11、函数里面的一些计算。这样就可以将球的各个点进行了初始化。然后就是旋转，我们以绕 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，转载请注明出处：http:/
