open in new window | flash version

Demos : Pseudo 3D

Code:

<html>
<head>
     <script type="text/javascript" src="http://lib.ivank.net/ivank.js"></script>
     <script type="text/javascript">
          /*
               That's how 3D was made before Flash Player 11.
               It is just a demonstration of Graphics.drawTriangles(...),
               for real 3D use a another librariy.
          */
     
          var stage, s, bd;
          var vrt, ind, uvt;
          var n  = 20;  // number of segments
          var zoom = 0, nn = n+1;
          
          function Start()
          {
               stage = new Stage("c");
               bd    = new BitmapData("earth.jpg");
               s     = new Sprite();
               s.x = stage.stageWidth/2;  s.y = stage.stageHeight/2;
               stage.addChild(s);
               
               vrt = []; ind = []; uvt = [];
               var lat, lon, x, y, z, p;
               
               for (var i=0; i<=n; i++)        // rows
                    for (var j=0; j<=n; j++)    // cols
                    {
                    	lat = -Math.PI/2 + i*Math.PI/n;
                    	lon =  Math.PI   + j*Math.PI/n;
                    	x = Math.cos(lat) * Math.cos(lon);
                    	y = Math.sin(lat);
                    	z = Math.cos(lat) * Math.sin(lon);
                    	p = 9/(8+z);            // perspective
                    	vrt.push(p*x, p*y);
                    	uvt.push(0.5*j/n, i/n);
                    	if(i<n && j<n)          // 6 indices for 2 triangles
                    	   ind.push(nn*i+j, nn*i+j+1, nn*(i+1)+j, nn*i+j+1, nn*(i+1)+j, nn*(i+1)+j+1);
                    }
               // static shading layer
               var sh = new Sprite();  s.addChild(sh);
               sh.graphics.beginBitmapFill(new BitmapData("shade.png"));
               sh.graphics.drawTriangles(vrt, ind, uvt);
               
               stage.addEventListener(Event.ENTER_FRAME, onEF);
          }
          
          function onEF(e)
          {
               s.scaleX = s.scaleY = zoom = (3*zoom + 50 + stage.mouseY)*0.25;
               var vel = 0.00005*(stage.mouseX - s.x);
               for(var i=0; i<uvt.length; i+=2) uvt[i] += vel;  // shifting X coordinate
               
               s.graphics.clear();
               s.graphics.beginBitmapFill(bd);
               s.graphics.drawTriangles(vrt, ind, uvt);
          }
     </script>
</head>
<body onload="Start();"><canvas id="c"></canvas></body>
</html>