JavaScript实现的3D球面标签云效果

Question

这个效果是由 妙味QQ群[116279832] 里的 “小小丫头” 提出来的。她说一般这个效果都是由 FLASH 实现的，能不能由 JavaScript 实现呢？我们也十分喜欢这个效果，就花了一些时间写出来了，如图所示：
效果预览点这里：http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html
下载效果点这里：http://www.miaov.com/miaov_demo/3dLable/3dLable.rar
使用说明：一般需要修改的，应该是3D球面的大小，也就是半径，修改了大小，就可以随意放进自己页面的任何地方。半径大小修改：下载后，打开 miaov.js 文件，第一行：var radius = 120; 这就是半径大小值了。文字的修改在 miaov_demo.html 文件中，可以任意添加关键词的个数；如果希望修改文字颜色、鼠标经过的样式，可以打开 miaov_style.css 文件，修改相关的样式即可。效果原理：制作这个效果需要重新回顾一下高中的数学知识：球坐标系
例如：
r∈[0,+∞),
φ∈[0, 2π],
θ∈[0, π] .
r = 常数，即以原点为心的球面；
θ= 常数，即以原点为顶点、z轴为轴的圆锥面；
φ= 常数，即过z轴的半平面。
……
在这里，我们就不展开讲了，由数学老师来说明更合适些^_^
有兴趣的朋友可以看看百度百科的球坐标系原理：http://baike.baidu.com/view/1196991.htm

Answer 1

是google 巴克球同样的效果么？

Answer 2

很棒~~ m(_ _)m
不過移動 3D 標籤雲球體的時候，能不能下方有標籤的陰影跟著移動呢?

Answer 3

是google 巴克球同样的效果么？

Answer 4

是google 巴克球同样的效果么？

Answer 5

是google 巴克球同样的效果么？

Answer 6

不错，可以替代WORDPRESS那个FLASH的了。

Answer 7

刚开始学js的,看代码看不懂啊,没有注释,..以前找这个效果找了好久的,看到的都是flash,,

Answer 8

原理就是先把所有的文字按照球面分布，鼠标交互就是让鼠标去拨动球运动。
类似于参考3D中的trackball模式！

Answer 9

关键代码：
for( var i=1; i<max+1; i++){
   if( distr )
  {
phi = Math.acos(-1+(2*i-1)/max);
theta = Math.sqrt(max*Math.PI)*phi;
  }
  else{
phi = Math.random()*(Math.PI);
theta = Math.random()*(2*Math.PI);
  }
  //���任
   mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
 //这里有点疑问，mcList[i-1].cx=radius* Math.cos(phi)*Math.sin(theta);    
   mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
   mcList[i-1].cz = radius * Math.cos(phi);
//这里有点疑问，mcList[i-1].cz = radius * Math.cos(theta);

aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'px';
aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'px';
}

Answer 10

早就想搞怎么一个东西玩玩了，不过看他们都是用flash做的，今天终于看到js写的了，Lz`很强大啊，哈哈……