3D标签云

一、圆的坐标表达式

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)";

}

}