/*
* DisplayObject3D ----------------------------------------------
*/
var DisplayObject3D = function(){
     return this;
};

DisplayObject3D.prototype._x = 0;
DisplayObject3D.prototype._y = 0;

//Create 3d Points
DisplayObject3D.prototype.make3DPoint = function(x,y,z) {
     var point = {};
     point.x = x;
     point.y = y;
     point.z = z;
     return point;
};

//Create 2d Points
DisplayObject3D.prototype.make2DPoint = function(x,y, depth, scaleFactor){
     var point = {};
     point.x = x;
     point.y = y;
     point.depth = depth;
     point.scaleFactor = scaleFactor;
     return point;
};

DisplayObject3D.prototype.container = undefined;
DisplayObject3D.prototype.pointsArray = [];

DisplayObject3D.prototype.init = function (container){
     
     this.container = $(container);
     this.containerId = this.container.attr("id");
     
     //if there isn't a ul than it creates a list of +'s
     if ($(container+":has(ul)").length === 0){
         for (i=0; i < this.pointsArray.length; i++){
             this.container.append('<b id="item'+i+'">+</b>');
         }
     }
};  

/*
* DisplayObject3D End ----------------------------------------------
*/

/*
* Camera3D ----------------------------------------------
*/
var Camera3D = function (){};

Camera3D.prototype.x = 0;
Camera3D.prototype.y = 0;
Camera3D.prototype.z = 500;
Camera3D.prototype.focalLength = 1000;

Camera3D.prototype.scaleRatio = function(item){
     return this.focalLength/(this.focalLength + item.z - this.z);
};

Camera3D.prototype.init = function (x,y,z,focalLength){
     this.x = x;
     this.y = y;
     this.z = z;
     this.focalLength = focalLength;
};

/*
* Camera3D End ----------------------------------------------
*/

/*
* Object3D ----------------------------------------------
*/
var Object3D = function (container){
     this.container = $(container);
};

Object3D.prototype.objects = [];

Object3D.prototype.addChild = function (object3D){
         
     this.objects.push(object3D);
     
     object3D.init(this.container);
     
     return object3D;
};

/*
* Object3D End ----------------------------------------------
*/

/*
* Scene3D ----------------------------------------------
*/

var Scene3D = function (){};

Scene3D.prototype.sceneItems = [];
Scene3D.prototype.addToScene = function (object){
     this.sceneItems.push(object);
};

Scene3D.prototype.Transform3DPointsTo2DPoints = function(points, axisRotations,camera){
     var TransformedPointsArray = [];
     var sx = Math.sin(axisRotations.x);
     var cx = Math.cos(axisRotations.x);
     var sy = Math.sin(axisRotations.y);
     var cy = Math.cos(axisRotations.y);
     var sz = Math.sin(axisRotations.z);
     var cz = Math.cos(axisRotations.z);
     var x,y,z, xy,xz, yx,yz, zx,zy, scaleFactor;

     var i = points.length;
     
     while (i--){
         x = points[i].x;
         y = points[i].y;
         z = points[i].z;

         // rotation around x
         xy = cx*y - sx*z;
         xz = sx*y + cx*z;
         // rotation around y
         yz = cy*xz - sy*x;
         yx = sy*xz + cy*x;
         // rotation around z
         zx = cz*yx - sz*xy;
         zy = sz*yx + cz*xy;
         
         scaleFactor = camera.focalLength/(camera.focalLength + yz);
         x = zx*scaleFactor;
         y = zy*scaleFactor;
         z = yz;
         
         var displayObject = new DisplayObject3D();
         TransformedPointsArray[i] = displayObject.make2DPoint(x, y, -z, scaleFactor);
     }
     
     return TransformedPointsArray;
};

Scene3D.prototype.renderCamera = function (camera){

     for(var i = 0 ; i< this.sceneItems.length; i++){

         var obj = this.sceneItems[i].objects[0];
     
         var screenPoints = this.Transform3DPointsTo2DPoints(obj.pointsArray, axisRotation, camera);
         
         var hasList = (document.getElementById(obj.containerId).getElementsByTagName("ul").length > 0);
         
         for (k=0; k < obj.pointsArray.length; k++){
             var currItem = null;
             
             if (hasList){
                 currItem = document.getElementById(obj.containerId).getElementsByTagName("ul")[0].getElementsByTagName("li")[k];
             }else{
                 
                 currItem = document.getElementById(obj.containerId).getElementsByTagName("*")[k];
             }
             
             if(currItem){
                 currItem._x = screenPoints[k].x;
                 currItem._y = screenPoints[k].y;
                 currItem.scale = screenPoints[k].scaleFactor;
                 
                 currItem.style.position = "absolute";
                 currItem.style.top = currItem._y+'px';
                 currItem.style.left = currItem._x+'px';
                 currItem.style.fontSize = 100*currItem.scale+'%';
                 
                 $(currItem).css({opacity:(currItem.scale-.5)});

             }

             
         }

     }
};

/*
* Scene3D End ----------------------------------------------
*/

//Center for rotation
var axisRotation = new DisplayObject3D().make3DPoint(0,0,0);

var Cube = function (size){
     
     if (size === undefined){
         size = 10;
     }
     
     this.pointsArray = [
         this.make3DPoint(-size,-size,-size),
         this.make3DPoint(size,-size,-size),
         this.make3DPoint(size,-size,size),
         this.make3DPoint(-size,-size,size),
         this.make3DPoint(-size,size,-size),
         this.make3DPoint(size,size,-size),
         this.make3DPoint(size,size,size),
         this.make3DPoint(-size,size,size),
         this.make3DPoint(0,size,-size),
         this.make3DPoint(size,size,0),
         this.make3DPoint(0,size,size),
         this.make3DPoint(-size,size,0),
         this.make3DPoint(0,-size,-size),
         this.make3DPoint(size,-size,0),
         this.make3DPoint(0,-size,size),
         this.make3DPoint(-size,-size,0),
         this.make3DPoint(-size,0,-size),
         this.make3DPoint(size,0,-size),
         this.make3DPoint(size,0,size),
         this.make3DPoint(-size,0,size)
     ];
     
};

Cube.prototype = new DisplayObject3D();

<html>
     <head>
         <title>Untitled Page</title>
         <style type="text/css" media="screen">
             #item{
                 width:100px;
                 height:100px;
                 margin:0 auto;
                 top:300px;
                 position: relative;
             }
             ul{
                 list-style-type: none;
             }
             body{
                 background-color: #111;
                 color: #69c;
                 font-family: Arial, "MS Trebuchet", sans-serif;
                 font-weight: bold;
                 font-size:2em;
             }
         </style>
     </head>
     <body>
         <div id="item">
             <ul>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
                 <li>☺</li>
             </ul>
         </div>
     </body>
     
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
     <script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
     <script src="Cube.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript">
         //<![CDATA[
         
         $(document).ready(function() {

             var camera = new Camera3D();
             camera.init(0,0,0,300);
             
             var item = new Object3D($("#item"));
             
             item.addChild(new Cube(100));
             
             var scene = new Scene3D();
             scene.addToScene(item);

     
             var animateIt = function(){
                 axisRotation.y += .01
                 axisRotation.x -= .01

                 scene.renderCamera(camera);
             };
             
             
             setInterval(animateIt, 20);
             
             
             });
         //]]>
     </script>