一、圆的坐标表达式

for(var i = 0;i < len;i++){

degree = (2*(k+1)-1)/len - 1;
a = Math.acos(degree);//这样取得弧度数生成的点在球体上式均匀分布的
b = a*Math.sqrt(len*Math.PI);

x = radiu * Math.sin(a) * Math.cos(b);
y = radiu * Math.sin(a) * Math.sin(b);
z = radiu * Math.cos(a);

label_item[k].style.transform = "translateZ("+z+"px) translateX("+x+"px) translateY("+y+"px)";//设置x,y,z坐标

}

//x轴旋转

//核心代码

{

y' = y*cos(θ) - z*sin(θ);

z' = z*cos(θ) + y*sin(θ);

}
function rotateX(elements,degreeX){
var label_item = elements;
var degree = degreeX;
// console.log(getSpeed())
var cos = Math.cos(degree);
var sin = Math.sin(degree);
var x, y,z;
for(var i = 0;i < label_item.length;i++){
x = label_item[i].dataset.x;
y = label_item[i].dataset.y;
z = label_item[i].dataset.z;
var y1 = y*cos - z*sin;
var z1 = z*cos + y*sin;
label_item[i].dataset.y = y1;
label_item[i].dataset.z = z1;
if(label_item[i].dataset.z < 0){
label_item[i].style.opacity = '0.5';
label_item[i].style.fontSize = '4px';
}else{
label_item[i].style.fontSize = '14px';
}
if(z > 0){
label_item[i].style.opacity = "1";
}else{
label_item[i].style.opacity = "0.5";
}
label_item[i].style.transform = "translateZ("+z1+"px) translateX("+x+"px) translateY("+y1+"px) rotateX(0deg)";

}
}

//y轴旋转

//核心代码

{

x' = x*cos(θ) - z*sin(θ);

z' = z*cos(θ) + x*sin(θ);

}
function rotateY(elements,degreeY){
var label_item = elements;
var degree = degreeY;
var cos = Math.cos(degree);
var sin = Math.sin(degree);
var x, y,z;
for(var i = 0;i < label_item.length;i++){
x = label_item[i].dataset.x;
y = label_item[i].dataset.y;
z = label_item[i].dataset.z;
var x1 = x*cos - z*sin;
var z1 = z*cos + x*sin;
label_item[i].dataset.x = x1;
label_item[i].dataset.z = z1;
if(label_item[i].dataset.z < 0){
label_item[i].style.opacity = '0.5';
label_item[i].style.fontSize = '4px';
}else{
label_item[i].style.fontSize = '14px';
}
if(z > 0){
label_item[i].style.opacity = "1";
}else{
label_item[i].style.opacity = "0.5";
}
label_item[i].style.transform = "translateZ("+z1+"px) translateX("+x1+"px) translateY("+y+"px) rotateX(0deg)";

}

}

3D标签云的更多相关文章

  1. css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  2. SP2010 3D标签云Web部分--很酷的效果,强烈推荐!!

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  3. 解析3D标签云,其实很简单

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时 ...

  4. 纯JS实现的3D标签云,不依赖不论什么第三方库,支持移动页面

    <span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC &q ...

  5. jquery 3D 标签云

    http://www.gbin1.com/technology/jquerynews/20111205tagcloudbyjquery/index.html 相关选项 zoom: 90 初始的缩放度  ...

  6. 3d标签云(JS版)

    http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html http://www.lijian.net/p/windstagball/index.h ...

  7. vue实现标签云效果

    闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...

  8. 3D球状标签云(兼容IE8)

    看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...

  9. 分享一个3D球面标签云

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 进击的Python【第八章】:动态导入模块、断言、socket开发之SSH,FTP

    一.动态导入模块 知道一个模块名的字符串形式,通过字符串来导入模块 mod = __import__("lib.aa") print(mod) instance = getattr ...

  2. python ftp小程序练习

    作业要求: 开发一个支持多用户在线的FTP程序 要求: 1.用户加密认证 2.允许同时多用户登陆 3.每个用户都有自己的家目录,并且只能访问自己的家目录 4.对用户进行磁盘配额,每个用户的可用空间不同 ...

  3. [CF1076F] Summer Practice Report

    Description Transmission Gate Solution 这一题可以考虑Dp,设\(Dp[i][j]\) 为在第i段中,以j颜色为结尾的最后一小段长度的最小值. 那么可以先考虑以表 ...

  4. angular2+typescript在asp.net MVC Web项目上的实现

    网上现在还没有关于angular2+typescript在asp.net mvc web项目上的实现的系统介绍,这里我也只是探索到了一个简单的方式,还有很多问题没能解决.但是能有个好的开头也值得记录一 ...

  5. mac下 netbeans 8.02中文版设置代码自动补齐 + eclipse自动补齐

    netbeans自带的自动补齐快捷键是commad+\ 我想要的是在输入的时候,有自动提示,找了半天也没找到怎么搞. 因为我是用的mac系统 后来参考其他的设置,找到了设置的方法,把这个方法记录一下. ...

  6. 191 Number of 1 Bits 位1的个数

    编写一个函数,输入是一个无符号整数,返回的是它所有 位1 的个数(也被称为汉明重量).例如,32位整数 '11' 的二进制表示为 00000000000000000000000000001011,所以 ...

  7. JDK集合框架--LinkedList

    上一篇讲了ArrayList,它有一个"孪生兄弟"--LinkedList,这两个集合类总是经常会被拿来比较,今天就分析一下LinkedList,然后总结一下这俩集合类的不同 首先 ...

  8. Android开源项目:GifView——Android显示GIF动画

    下载:http://code.google.com/p/gifview/downloads/list 简介:android中现在没有直接显示gif的view,只能通过mediaplay来显示,且还常常 ...

  9. Zookeeper系列(一)

    一.ZooKeeper的背景 1.1 认识ZooKeeper ZooKeeper---译名为“动物园管理员”.动物园里当然有好多的动物,游客可以根据动物园提供的向导图到不同的场馆观赏各种类型的动物,而 ...

  10. CAD参数绘制半径标注(com接口)

    主要用到函数说明: _DMxDrawX::DrawDimRadial 绘制一个半径标注.详细说明如下: 参数 说明 DOUBLE dCenterX 被标注的曲线的中点X值 DOUBLE dCenter ...