3D圆柱图形的制作

3d圆柱图形的坐标:

x=r*sinφ

     y=h

     z=r*cosφ

圆柱的半径为  r(已知)，只有高度h在变化,φ=2π/每层字的个数. 特点:每层字的个数都一样

/*js代码*/

window.οnlοad=function(){

var oScene=document.getElementById("scene");
var oBox=document.getElementById("box");
var oUl=oBox.getElementsByClassName("ring")[0];
var aLi=oUl.getElementsByTagName("li");

//3D圆柱旋转图形,只有高度在变化，并且没有theta角，只有phi角
var columnPhi=0;
var columnIndex=0;
var layerLi=Math.floor(numConeLi/(temp.length-2)); //平均每层的li的数量，在圆柱上每层li的数量是固定的
var sumLi=layerLi*(temp.length-2); //整个圆柱上li的数量

for(var i=0;i<temp.length-1;i++){
columnPhi=2*Math.PI/layerLi;
for(j=0;j<layerLi;j++){
fnColumn(aLi[columnIndex],columnPhi,i,j);
columnIndex++;
}
}
//把多余的li隐藏
for(var i=0;i<aLi.length;i++){
aLi[i].style.display="none";
}
//确定li在圆柱上的位置
for(var i=0;i<sumLi;i++){
//不多余的现实
aLi[i].style.display="block";
aLi[i].style.transform='translate3D('+aLi[i].columnX+'px,'+aLi[i].columnY+'px,'+aLi[i].columnZ+'px) rotateY('+aLi[i].degPhi+'rad)';
}

function fnColumn(obj,phi,i,j){
//加8*i*Math.PI/180,是为了让每一层的第一个文字有一个8度的偏转(同一层的文字的偏转角度一样)
obj.columnX=r/1.5*Math.sin(phi*j+8*i*Math.PI/180)+200;
obj.columnY=(2*r/(temp.length-2))*i+50;
obj.columnZ=r/1.5*Math.cos(phi*j+8*i*Math.PI/180);
obj.degPhi=phi*j+8*i*Math.PI/180;
};

};