open in new window | flash version

Demos : Pseudo 3D

Graphics Bitmaps EnterFrame Event Mouse Events Multitouch Keyboard Events Rendering Text Color Transform Custom Classes Playing Video Box2D Bézier Pseudo 3D Real 3D Water Surface Plasma Mandelbrot BunnyMark Tweener Spritesheet Resizable UI

Code:

<html>
<head>
     <script type="text/javascript" src="//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>