3D旋转木马--文字效果(源码)-优快云博客

                        html部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 旋转木马3D文字效果</title>
<style type="text/css" media="screen">
#item {
   width:100px;
   height:100px;
   margin:0 auto;
   top:100px;
   left:100px;
   position: relative;
}
a {
   color:#FFFFFF;
}
ul {
   list-style-type: none;
}
body {
   background-color: #111;
   color: #69c;
   font-family: Arial, "MS Trebuchet", sans-serif;
   font-weight: bold;
   font-size:1em;
}
</style>
</head>
<body>
<div id="item">
  <ul>
    <li>website</li>
    <li>jQuery</li>
    <li>JavaScript</li>
    <li>HTML</li>
    <li>PHP</li>
    <li>3D</li>
    <li>Ajax</li>
    <li>CSS</li>
    <li>Design</li>
    <li>Flash</li>
    <li>Experimental</li>
    <li>Development</li>
    <li>web</li>
    <li>Tutorial</li>
    <li>ASP</li>
  </ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script src="js/3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Ring.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 container = $("#item");
         
         var item = new Object3D(container);

         item.addChild(new Ring(200, $("#item ul li").length));
         
         var scene = new Scene3D();
         scene.addToScene(item);
         
         
         var mouseX,mouseY = 0;
         var offsetX = $("#item").offset().left;
         var offsetY = $("#item").offset().top;
         var speed = 6000;
         
         $().mousemove(function(e){
            mouseX = e.clientX - offsetX - (container.width() / 2);
            mouseY = e.clientY - offsetY - (container.height() / 2);
         });
         
         axisRotation.x = 1.5;
         
         var animateIt = function(){
            if (mouseX != undefined){
               axisRotation.y += (mouseX) / speed;
            }
            
            scene.renderCamera(camera);
            
         };
         
         
         setInterval(animateIt, 20);
         
         
         });
      //]]>
   </script>
</body>
</html>

                          3d js 部分

// 代码整理：懒人之家 lanrenzhijia.com
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 ----------------------------------------------
*/
// 代码整理：懒人之家 lanrenzhijia.com

/*
* 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 ----------------------------------------------
*/

// 代码整理：懒人之家 lanrenzhijia.com
/*
* 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 ----------------------------------------------
*/

// 代码整理：懒人之家 lanrenzhijia.com
//Center for rotation
var axisRotation = new DisplayObject3D().make3DPoint(0,0,0);

js 部分

// 代码整理：懒人之家 lanrenzhijia.com
var Ring = function (radius, numOfItems){

   
   
   for (var i = numOfItems - 1; i >= 0; i--)
   {
       var angle = i * Math.PI * 2 / numOfItems;
       
       var x =  Math.sin(angle) * radius;
        var y = Math.cos(angle) * radius;
        var z = 0;
        
        this.pointsArray.push(this.make3DPoint(x,y,z));
   }
   
   
      
};

Ring.prototype = new DisplayObject3D();