【JavaScript】Canvasを使ってとりあえず3Dの球を書いてみようと思ったんだけど、いまいちなんだかよくわからない。

ガッと書きたくなって、ざっと書いたので雑だ。

var Tk = Tk || {};

Tk.gui = {};
Tk.canvas = {};
Tk.t3d = {};

//テキトーなのでなんとかしたい 
Tk.t3d.objct= null;


Tk.gui.getElem = function(id){
    return document.getElementById(id)
}



Tk.canvas.getCanvasContext = function(id){
    var canvas = Tk.gui.getElem(id);
    if (canvas.getContext) {
 var context = canvas.getContext('2d');
    }
    return context
}


Tk.canvas.animate = function(ctx,time){
    setInterval(
 function(){
     Tk.canvas.update(ctx)
 }
 ,time)
}

Tk.canvas.clear = function(ctx){
    ctx.fillStyle = "#FFFFFF"
    ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}

Tk.canvas.setup = function(ctx){
    var sp= new Tk.t3d.Sphere(200,10,10);
    
    Tk.t3d.drawMesh(ctx,sp.points,sp.indices);
    Tk.t3d.object = sp;
}

//更新しているけど、別に動いていない。
Tk.canvas.update = function(ctx){
    Tk.canvas.clear(ctx);
    var sp = Tk.t3d.object;
    Tk.t3d.drawMesh(ctx,sp.points,sp.indices);
}

Tk.t3d.Point3d = function(x,y,z){
    this.x = x;
    this.y = y;
    this.z = z;
}

Tk.t3d.Point = function(x, y){
    this.x = x;
    this.y = y;
}

Tk.t3d.Sphere = function(r,rows,cols){
    this.r = r;
    this.rows = rows;
    this.cols = cols;
    this.points = setPoints(r,rows,cols);
    this.indices = setIndices(r,rows,cols);
    
    function setPoints(r,rows,cols){
 var pList = [];
 for(var i = 0;i < rows; i++){
     for(var j = 0;j < cols; j++){
  var angle1 = Math.PI * 2 / ( cols -1 ) * j
  var angle2 = Math.PI * i / ( rows -1 ) -Math.PI/ 2;
  var point = new Tk.t3d.Point3d(
      r * Math.cos(angle1) * Math.cos(angle2),
      r * Math.sin(angle1) * Math.cos(angle2),
      r * Math.sin(angle2)
  );
  pList.push(point)
     }
 }
 return pList;
    }


    function setIndices(r,rows,cols){
 var indices = [];
 for(var i = 0;i < rows;i++){
     for(var j = 0;j <cols; j++){
  if( i < rows - 1 && j < cols -1){
  indices.push([
      i * cols + j,
      i * cols + j + 1,
      (i + 1) * cols + j])
  indices.push([i * cols + j + 1,
        (i + 1) * cols + j + 1,
        (i + 1 ) * cols +j]);
  }
     }
 }
 return indices;
    }
}

Tk.t3d.toPersePectionPoints = function(points){
    var parsePection = 200;
    var forcalLength = 250;
    var pList = [];
    for(var i = 0; i < points.length;i++){
 var scale = forcalLength / ( forcalLength + points[i].z + parsePection)
 pList.push(new Tk.t3d.Point(points[i].x * scale, points[i].y * scale));
    }
    return pList;
}

Tk.t3d.draw3d = function(ctx,points){
    var drawPoints =Tk.t3d.toPersePectionPoints(points)
    for(var i = 0; i < drawPoints.length;i++){
 ctx.beginPath();
 ctx.arc(drawPoints[i].x + 100, drawPoints[i].y + 100, 1, 0, Math.PI*2, false)
 ctx.fill();
    }
    
}

Tk.t3d.drawMesh = function(ctx,points,indices){
    var drawPoints =Tk.t3d.toPersePectionPoints(points)
    var offsetX = ctx.canvas.width / 2;
    var offsetY= ctx.canvas.height / 2;
    for(var i = 0; i < indices.length;i++){
 var index = indices[i]
 ctx.beginPath();
 ctx.moveTo(points[index[0]].x + offsetX  ,points[index[0]].y + offsetY );
 ctx.lineTo(points[index[1]].x + offsetX  ,points[index[1]].y + offsetY);
 ctx.lineTo(points[index[2]].x + offsetX  ,points[index[2]].y + offsetY );
 ctx.lineTo(points[index[0]].x + offsetX  ,points[index[0]].y + offsetY);
 ctx.stroke();
    }
    
}

Tk.t3d.main = function(){
    var ctx = Tk.canvas.getCanvasContext("canvas_20130621");
    Tk.canvas.setup(ctx);
    Tk.canvas.animate(ctx,200);
}

Tk.t3d.main();