3D空间坐标以及3D图形的制作

3D图形制作的一

般流程是:
1.动态创建多个“块级”元素
2.在css中给创建的块级元素添加背景图，或者给块级元素设置文字
3.把整体的3D图形进行“拆分”，分成“多层”(3D图形由“无限层”构成)，每层又由多个的元素所构成
4.给动态创建的每个元素添加自定义属性，用来设置元素在三位空间的位置(x,y,z), 偏转角度等
5.用js给每个创建的元素添加css的3d样式transform;
下面是一些实例:
1.球坐标:
在编程思维里，三维坐标的x,y,z轴的公式如下：
x=r*sinθ*sinφ
y=r*cosθ
z=r*sinθ*cosφ

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 arr=[1,3,5,7,9,11,9,7,5,3,1]; //一共有11层
//生成li,有多少个文字，就有多少个li

//根据输入的文字的“个数”来动态生成arr数组
var s="等会睡觉咯哈客人户而悔恨和腿还是你解决额如何退我我我回头 就可能和空姐然后年来看你饥渴啊龟儿哈就那就快点离开感觉饿接电话经济后果热哦历史的记录今日哦价格是打开就会如何能看呵呵上课了快捷回复日回会内科教授人海曙科黑日期控件";
var textNum=-1;
var layer=0;
var num=0;
var temp=[];
//根据输入的文字，确定层数.在这里，最小4层，最大12层(输入的文字不超过350个)
for(var i=4;i<13;i++){
num=i*i+(i+1)*(i+1);  //所有层上文字的总和
if(num>=s.length){
layer=(i-1)*2+1;
break;
}
layer=(i-1)*2+1;
}
//根据上面的层数，确定一个数组
for(var i=0;i<layer;i++){
//计算每层的文字个数
if(i<(layer+1)/2){
textNum+=2;   //-1+2=1
}else{
textNum+=-2;
}
temp.push(textNum);
}

var theta=Math.PI/(temp.length-1);
var phi=0;
var r=150;
var index=0;//从字符串s的第一个字符开始取值
for(var i=0;i<temp.length;i++){

phi=2*Math.PI/temp[i];
for(var j=0;j<temp[i];j++){

var oLi=document.createElement("li");
oLi.innerHTML=s[index];
index++;
//给每个li添加一些属性，用来控制每个文字(即li)在球上的位置
fnLiPosition(oLi,theta,phi,150,i,j);
oUl.appendChild(oLi);
}
}

//改变每个li在3d上的位置
for(var i=0;i<aLi.length;i++){
aLi[i].style.transform='translate3D('+aLi[i].X+'px,'+aLi[i].Y+'px,'+aLi[i].Z+'px) rotateY('+aLi[i].degPhi+'rad) rotateX('+aLi[i].degTheta+'rad)';
}

//旋转scene
var angle=0;
setInterval(function(){
angle++;
oBox.style.transform='rotateX('+angle+'deg) rotateY('+angle+'deg)';
},60);

//第i层的角度是theta*i,第i层第j个li的phi角度是:phi*j
function fnLiPosition(obj,theta,phi,r,i,j){
obj.X=r*Math.sin(theta*i)*Math.sin(phi*j)+200;//加200是为了让其在scene的中间显示
obj.Y=-r*Math.cos(theta*i)+200;  //加负号是为了让其从上往下看，否则是从下往上
obj.Z=r*Math.sin(theta*i)*Math.cos(phi*j);
//每个li的偏转角度
obj.degTheta=-Math.PI/2+theta*(temp.length-i);//让其从i到0
obj.degPhi=phi*j;
};
}