3D карусельное облако тегов на jQuery

23.06.10

3D карусельное облако тегов на jQuery

Сегодня мы реализуем с помощью jQuery вот такое облако тегов, с виду представляющее из себя 3D-карусель:

А работает это вот так.
Для построения облака тегов мы будем использовать небольшой (4,5Кб) 3D-движок для jQuery. Собственно автор движка и является автором данного примера.

jQuery – выстраиваем 3D кольцо из меток

Наше 3D кольцо будет представлять из себя всего лишь массив трехмерных точек.

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));
    }
};

//Остается только унаследовать DisplayObject3D.
Ring.prototype = new DisplayObject3D();

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));

}

};

//Остается только унаследовать DisplayObject3D.

Ring.prototype = new DisplayObject3D();

Класс Ring у нас имеет два параметра – радиус кольца и количество точек, размещенных на нем. Все точки расположены на одинаковом расстоянии друг от друга по периметру кольца.

HTML – создаем разметку для нашего облака тегов

Разметка у нас будет всего лишь простым неупорядоченным списком, содержащим наши теги:

<div id="item">
    <ul>
        <li>jQuery</li>
        <li>JavaScript</li>
        <li>HTML</li>
        <li>PHP</li>
        <li>3D</li>
        <li>Ajax</li>
        <li>CSS</li>
        <li>Dev-4-web.ru</li>
        <li>Experimental</li>
        <li>Development</li>
        <li>web</li>
        <li>Руководство</li>
        <li>.NET</li>
    </ul>
</div>

<ul>

<li>jQuery</li>

<li>JavaScript</li>

<li>Experimental</li>

<li>Development</li>

<li>Руководство</li>

</ul>

</div>

Добавим еще jQuery

$(document).ready(function() {
     //инициализируем камеру
     var camera = new Camera3D();
     camera.init(0,0,0,300);

     var container = $("#item");

     //Устанавливаем элемент, который будет содержать наш 3D-контейнер
     var item = new Object3D(container);

     //Добавляем наше кольцо к этому элементу
     //Первый аргумент - радиус кольца
     //Второй аргумент - количество меток на кольце
     //В нашем случае мы передаем количество элементов списка
     item.addChild(new Ring(200, $("#item ul li").length));

     //Создаем сцену (см 3D Engine)
     var scene = new Scene3D();

     //Добавляем наш 3D-объект на сцену
     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);
});

$(document).ready(function() {

//инициализируем камеру

var camera = new Camera3D();

camera.init(0,0,0,300);

var container = $("#item");

//Устанавливаем элемент, который будет содержать наш 3D-контейнер

var item = new Object3D(container);

//Добавляем наше кольцо к этому элементу

//Первый аргумент - радиус кольца

//Второй аргумент - количество меток на кольце

//В нашем случае мы передаем количество элементов списка

item.addChild(new Ring(200, $("#item ul li").length));

//Создаем сцену (см 3D Engine)

var scene = new Scene3D();

//Добавляем наш 3D-объект на сцену

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);

});

Заключение

Вот это весь html-файл, который у нас получился:

<html>
<head>
    <title>3d engine</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: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="jquery-1.3.2.min.js"></script>
<script src="3DEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="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>
</html>

<html>

<head>

<title>3d engine</title>

#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:1em;

}

</style>

</head>

<body>

<ul>

<li>website</li>

<li>jQuery</li>

<li>JavaScript</li>

<li>Design</li>

<li>Flash</li>