深入解析JS实现3D标签云的原理与方法

本文实例讲述了深入解析JS实现3D标签云的原理与方法。分享给大家供大家参考，具体如下：

最近开始用canvas搞3D了，搞得也是简单的东西，就是球体转圈。做出来后，突然想起以前看过的3D标签云，在以前觉得真心狂拽酷炫叼啊，当时也确实不知道怎么在平面上模拟3D，所以也就没去搞了。现在刚好用了canvas搞3D，也发现，好像3D标签云也差不多，然后就写了一下。

具体怎么做呢，先说一下原理，3D标签云就是做一个球面，然后再球面上取均匀分布的点，把点坐标赋给标签，再根据抽象出来的Z轴大小来改变标签的字体大小，透明度，做出立体感觉，然后球体就做好了。关键代码就下面这几句：

function innit(){  for(var i=0;i<tagEle.length;i++){    var a , b;    var k = -1+(2*(i+1)-1)/tagEle.length;    var a = Math.acos(k);    var b = a*Math.sqrt(tagEle.length*Math.PI);    // var a = Math.random()*2*Math.PI;    // var b = Math.random()*2*Math.PI;    var x = RADIUS * Math.sin(a) * Math.cos(b);    var y = RADIUS * Math.sin(a) * Math.sin(b);     var z = RADIUS * Math.cos(a);    var t = new tag(tagEle[i] , x , y , z);    tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";    tags.push(t);    t.move();  }}

上面的代码是用于生成球面上的点的x,y,z轴的坐标。用到的就是简单的球面方程：已知半径r和球心，一般为了方便，我们都以坐标轴原点为球心，有下面三个方程

　x=r*sinθ*cosΦ   y=r*sinθ*sinΦ   z=r*cosθ;

也就是说，我们可以对θ和Φ取随机数，来获得圆上的随机点坐标。但仅此还不够，因为如果要做3D标签云，一个很重要点的就是平均分布。如果单纯的取随机坐标，会导致一些标签重叠，相对来说就没那么美观了。所以我们引入第二个公式：

θ = arccos( ((2*num)-1)/all - 1);
Φ = θ*sqrt(all * π);

num是当前第几个点，all则是点的总数。这个公式的是我在别人的代码里找到的，我也不懂原理。不过确实好用。

有了上面两个公式以后，我们就可以获得球面上所需要的平均分布的点。然后再对每个标签进行操作：

var scale = fallLength/(fallLength-this.z);var alpha = (this.z+RADIUS)/(2*RADIUS);this.ele.style.fontSize = 15 * scale + "px";this.ele.style.opacity = alpha+0.5;this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";this.ele.style.zIndex = parseInt(scale*100);this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";

fallLength是焦距，也就是一个常量，scale和alpha都是要根据z轴来调整的比例。后面的属性操作就比较简单了，调整一下字体大小，透明度，以及元素位置，球体就做出来了，效果如下（忽略字的内容，乱写的）：