【妙味课堂】原创JavaScript实现的3D球面标签云效果

这个效果是由 妙味QQ群[116279832] 里的 “小小丫头” 提出来的。

 

她说一般这个效果都是由 FLASH 实现的，能不能由 JavaScript 实现呢？

 

我们也十分喜欢这个效果，就花了一些时间写出来了，如图所示：

 

>>效果预览

>>下载此效果

使用说明：

一般需要修改的，应该是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