3D圆锥图形的制作

3D圆锥图形的制作

圆锥坐标的公式是:

x=h*tanθ*sinφ

  y=h*tanθ

  z=h*tanθ*cosφ

其中，圆锥的高h,θ都是已知的。φ=2π/每层的字数

代码如下:

/*html代码*/

<div id="scene">
<div id="box">
<ul class="ring">

</ul>
</div>

</div>

/*css代码*/

#scene {
width:400px;
height: 400px;
margin:0 auto;
transform-style: preserve-3d;
perspective: 1000px;
border:1px solid black;
position: relative;

}

#box {
width:100%;
height: 100%;
transform-style: preserve-3d;

}

#box ul {
width:100%;
height: 100%;
position: relative;

}

/*js代码*/

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

var coneArr=[];
var numConeLi=0;
var conetheta=Math.PI/6;
var conePhi=0;
var countIndex=0;
for(var i=0;i<aLi.length;i++){
numConeLi+=2*i-1;
if(numConeLi>=aLi.length){
numConeLi=numConeLi-(2*i-1); //如果在本层，所有的文字超过了已有的li数量，li的数量就取前i-1曾的li之和
break;
}
coneArr.push(2*i-1); //把每层的文字数量放到数组中去
}
//把多余的li给隐藏，把用到的li显示
for(var i=0;i<aLi.length;i++){
aLi[i].style.display="none";
}
for(var i=0;i<coneArr.length;i++){ //层数
conePhi=2*Math.PI/coneArr[i];
for(var j=0;j<coneArr[i];j++){ //每层的文字数量
fnCone(aLi[countIndex],conetheta,conePhi,i,j);
countIndex++;
}
}
//设置每个li的3D位置和偏转角度
for(var i=0;i<numConeLi;i++){
aLi[i].style.display="block";
aLi[i].style.transform='translate3D('+aLi[i].coneX+'px,'+aLi[i].coneY+'px,'+aLi[i].coneZ+'px) rotateY('+aLi[i].degPhi+'rad) rotateX('+aLi[i].degTheta+'rad)';
}

//给圆锥上的每个li添加位置，旋转角度属性
function fnCone(obj,conetheta,conePhi,i,j){
var coneH=2*r/coneArr.length; //每层的平均高度
obj.coneX=coneH*i*Math.tan(conetheta)*Math.sin(conePhi*j)+200;
obj.coneY=coneH*i*Math.tan(conetheta)+200;
obj.coneZ=coneH*i*Math.tan(conetheta)*Math.cos(conePhi*j);
obj.degTheta=Math.PI/6;
obj.degPhi=conePhi*j;
}

}