001 | var Tk = Tk || {}; |
002 |
003 | Tk.gui = {}; |
004 | Tk.canvas = {}; |
005 | Tk.t3d = {}; |
006 |
007 | //テキトーなのでなんとかしたい |
008 | Tk.t3d.objct= null; |
009 |
010 |
011 | Tk.gui.getElem = function(id){ |
012 | return document.getElementById(id) |
013 | } |
014 |
015 |
016 |
017 | Tk.canvas.getCanvasContext = function(id){ |
018 | var canvas = Tk.gui.getElem(id); |
019 | if (canvas.getContext) { |
020 | var context = canvas.getContext('2d'); |
021 | } |
022 | return context |
023 | } |
024 |
025 |
026 | Tk.canvas.animate = function(ctx,time){ |
027 | setInterval( |
028 | function(){ |
029 | Tk.canvas.update(ctx) |
030 | } |
031 | ,time) |
032 | } |
033 |
034 | Tk.canvas.clear = function(ctx){ |
035 | ctx.fillStyle = "#FFFFFF" |
036 | ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height); |
037 | } |
038 |
039 | Tk.canvas.setup = function(ctx){ |
040 | var sp= new Tk.t3d.Sphere(200,10,10); |
041 | |
042 | Tk.t3d.drawMesh(ctx,sp.points,sp.indices); |
043 | Tk.t3d.object = sp; |
044 | } |
045 |
046 | //更新しているけど、別に動いていない。 |
047 | Tk.canvas.update = function(ctx){ |
048 | Tk.canvas.clear(ctx); |
049 | var sp = Tk.t3d.object; |
050 | Tk.t3d.drawMesh(ctx,sp.points,sp.indices); |
051 | } |
052 |
053 | Tk.t3d.Point3d = function(x,y,z){ |
054 | this.x = x; |
055 | this.y = y; |
056 | this.z = z; |
057 | } |
058 |
059 | Tk.t3d.Point = function(x, y){ |
060 | this.x = x; |
061 | this.y = y; |
062 | } |
063 |
064 | Tk.t3d.Sphere = function(r,rows,cols){ |
065 | this.r = r; |
066 | this.rows = rows; |
067 | this.cols = cols; |
068 | this.points = setPoints(r,rows,cols); |
069 | this.indices = setIndices(r,rows,cols); |
070 | |
071 | function setPoints(r,rows,cols){ |
072 | var pList = []; |
073 | for(var i = 0;i < rows; i++){ |
074 | for(var j = 0;j < cols; j++){ |
075 | var angle1 = Math.PI * 2 / ( cols -1 ) * j |
076 | var angle2 = Math.PI * i / ( rows -1 ) -Math.PI/ 2; |
077 | var point = new Tk.t3d.Point3d( |
078 | r * Math.cos(angle1) * Math.cos(angle2), |
079 | r * Math.sin(angle1) * Math.cos(angle2), |
080 | r * Math.sin(angle2) |
081 | ); |
082 | pList.push(point) |
083 | } |
084 | } |
085 | return pList; |
086 | } |
087 |
088 |
089 | function setIndices(r,rows,cols){ |
090 | var indices = []; |
091 | for(var i = 0;i < rows;i++){ |
092 | for(var j = 0;j <cols; j++){ |
093 | if( i < rows - 1 && j < cols -1){ |
094 | indices.push([ |
095 | i * cols + j, |
096 | i * cols + j + 1, |
097 | (i + 1) * cols + j]) |
098 | indices.push([i * cols + j + 1, |
099 | (i + 1) * cols + j + 1, |
100 | (i + 1 ) * cols +j]); |
101 | } |
102 | } |
103 | } |
104 | return indices; |
105 | } |
106 | } |
107 |
108 | Tk.t3d.toPersePectionPoints = function(points){ |
109 | var parsePection = 200; |
110 | var forcalLength = 250; |
111 | var pList = []; |
112 | for(var i = 0; i < points.length;i++){ |
113 | var scale = forcalLength / ( forcalLength + points[i].z + parsePection) |
114 | pList.push(new Tk.t3d.Point(points[i].x * scale, points[i].y * scale)); |
115 | } |
116 | return pList; |
117 | } |
118 |
119 | Tk.t3d.draw3d = function(ctx,points){ |
120 | var drawPoints =Tk.t3d.toPersePectionPoints(points) |
121 | for(var i = 0; i < drawPoints.length;i++){ |
122 | ctx.beginPath(); |
123 | ctx.arc(drawPoints[i].x + 100, drawPoints[i].y + 100, 1, 0, Math.PI*2, false) |
124 | ctx.fill(); |
125 | } |
126 | |
127 | } |
128 |
129 | Tk.t3d.drawMesh = function(ctx,points,indices){ |
130 | var drawPoints =Tk.t3d.toPersePectionPoints(points) |
131 | var offsetX = ctx.canvas.width / 2; |
132 | var offsetY= ctx.canvas.height / 2; |
133 | for(var i = 0; i < indices.length;i++){ |
134 | var index = indices[i] |
135 | ctx.beginPath(); |
136 | ctx.moveTo(points[index[0]].x + offsetX ,points[index[0]].y + offsetY ); |
137 | ctx.lineTo(points[index[1]].x + offsetX ,points[index[1]].y + offsetY); |
138 | ctx.lineTo(points[index[2]].x + offsetX ,points[index[2]].y + offsetY ); |
139 | ctx.lineTo(points[index[0]].x + offsetX ,points[index[0]].y + offsetY); |
140 | ctx.stroke(); |
141 | } |
142 | |
143 | } |
144 |
145 | Tk.t3d.main = function(){ |
146 | var ctx = Tk.canvas.getCanvasContext("canvas_20130621"); |
147 | Tk.canvas.setup(ctx); |
148 | Tk.canvas.animate(ctx,200); |
149 | } |
150 |
151 | Tk.t3d.main(); |
