3D动画位图

我在View类中使用Canvas绘制一些位图。用户滑动以更改位图。我想动画位图之间切换以这样的方式3D动画位图

enter image description here

任何帮助实现这一目标？

2013-03-05 Khawar Raza

这里是一个旋转3d立方体的2D模拟。

希望我能说我做到了我自己，但我原本来到这里的代码：http://codentronix.com/2011/05/10/html5-experiment-a-rotating-solid-cube/

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/3PwYm/

<!DOCTYPE html> 
<html> 
<head> 
    <title>HTML5 Experiment: A Rotating Solid Cube</title> 
    <script type="text/javascript"> 
     window.onload = startDemo; 

     function Point3D(x,y,z) { 
      this.x = x; 
      this.y = y; 
      this.z = z; 

      this.rotateX = function(angle) { 
       var rad, cosa, sina, y, z 
       rad = angle * Math.PI/180 
       cosa = Math.cos(rad) 
       sina = Math.sin(rad) 
       y = this.y * cosa - this.z * sina 
       z = this.y * sina + this.z * cosa 
       return new Point3D(this.x, y, z) 
      } 

      this.rotateY = function(angle) { 
       var rad, cosa, sina, x, z 
       rad = angle * Math.PI/180 
       cosa = Math.cos(rad) 
       sina = Math.sin(rad) 
       z = this.z * cosa - this.x * sina 
       x = this.z * sina + this.x * cosa 
       return new Point3D(x,this.y, z) 
      } 

      this.rotateZ = function(angle) { 
       var rad, cosa, sina, x, y 
       rad = angle * Math.PI/180 
       cosa = Math.cos(rad) 
       sina = Math.sin(rad) 
       x = this.x * cosa - this.y * sina 
       y = this.x * sina + this.y * cosa 
       return new Point3D(x, y, this.z) 
      } 

      this.project = function(viewWidth, viewHeight, fov, viewDistance) { 
       var factor, x, y 
       factor = fov/(viewDistance + this.z) 
       x = this.x * factor + viewWidth/2 
       y = this.y * factor + viewHeight/2 
       return new Point3D(x, y, this.z) 
      } 
     } 

     var vertices = [ 
      new Point3D(-1,1,-1), 
      new Point3D(1,1,-1), 
      new Point3D(1,-1,-1), 
      new Point3D(-1,-1,-1), 
      new Point3D(-1,1,1), 
      new Point3D(1,1,1), 
      new Point3D(1,-1,1), 
      new Point3D(-1,-1,1) 
     ]; 

     // Define the vertices that compose each of the 6 faces. These numbers are 
     // indices to the vertex list defined above. 
     var faces = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]]; 

     // Define the colors for each face. 
     var colors = [[255,0,0],[0,255,0],[0,0,255],[255,255,0],[0,255,255],[255,0,255]]; 

     var angle = 0; 

     /* Constructs a CSS RGB value from an array of 3 elements. */ 
     function arrayToRGB(arr) { 
      if(arr.length == 3) { 
       return "rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")"; 
      } 
      return "rgb(0,0,0)"; 
     } 

     function startDemo() { 
      canvas = document.getElementById("thecanvas"); 
      if(canvas && canvas.getContext) { 
       ctx = canvas.getContext("2d"); 
       setInterval(loop,33); 
      } 
     } 

     function loop() { 
      var t = new Array(); 

      ctx.fillStyle = "rgb(0,0,0)"; 
      ctx.fillRect(0,0,400,250); 

      for(var i = 0; i < vertices.length; i++) { 
       var v = vertices[i]; 
       var r = v.rotateX(angle).rotateY(angle); 
       var p = r.project(400,250,200,4); 
       t.push(p) 
      } 

      var avg_z = new Array(); 

      for(var i = 0; i < faces.length; i++) { 
       var f = faces[i]; 
       avg_z[i] = {"index":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z)/4.0}; 
      } 

      avg_z.sort(function(a,b) { 
       return b.z - a.z; 
      }); 

      for(var i = 0; i < faces.length; i++) { 
       var f = faces[avg_z[i].index] 

       ctx.fillStyle = arrayToRGB(colors[avg_z[i].index]); 
       ctx.beginPath() 
       ctx.moveTo(t[f[0]].x,t[f[0]].y) 
       ctx.lineTo(t[f[1]].x,t[f[1]].y) 
       ctx.lineTo(t[f[2]].x,t[f[2]].y) 
       ctx.lineTo(t[f[3]].x,t[f[3]].y) 
       ctx.closePath() 
       ctx.fill() 
      } 
      angle += 2 
     } 
    </script> 
</head> 
<body> 
     <canvas id="thecanvas" width="400" height="250"> 
     Your browser does not support the HTML5 canvas element. <a href=#>Click here</a> to watch the video. 
    </canvas> 

    </body> 
</html>

来源

2013-03-06 17:51:23 markE

3D动画位图

回答

相关问题