Interactive Cube Animation. Анимация кубика с тремя торами

Анимация кубика в среде PaperVision3D с портированным классом Torus из Away3D, также добавлены интерактивные сферы, для вращения кубика.

Для создания интерактивной анимации кубика в PaperVision3D с торами необходимо найти (портировать из других движков, написать самому) класс для отрисовки поверхности тора. 

Вот здесь описано как можно портировать класс Torus из Away3D в PaperVision3D - http://professionalpapervision.wordpress.com/2009/01/05/the-elusive-torus-papervision/. 

После портирования можно создать тор, как и любой другой примитив -

          tor = new Torus(myMaterial, 250, 20, 40, 2);

Создадим кубик у которого будут видны все ребра. Для этого сначала создадим сам куб:

         cube = new Cube(myMaterial, 400, 400, 400, 1, 1, 1, 0, 0);

Для видимости всех сторон мы должны использовать свойство myMaterial.doubleSided = true у используемого материала. По идее для этого нужно использовать материал  WireframeMaterial, все хорошо, но только PaperVision3D использует для отрисовки Triangles, поэтому каждая грань будет состоять из двух треугольников, а нам этого не нужно. Чтобы избежать этого нужно модифицировать класс WireframeMaterial, где в методе override public function drawTriangle(...) немного изменим принцип отрисовки треугольников (в интернете много примеров, но очень много с глюками, этот работает хорошо, но можно написать и свой конечно, поиграть со значениями):

     override public function drawTriangle(tri:RenderTriangle, graphics:Graphics, renderSessionData:RenderSessionData, altBitmap:BitmapData=null, altUV:Matrix=null):void
     {

         var x0:Number = tri.v0.x;
         var y0:Number = tri.v0.y;
         var x1:Number = tri.v1.x;
         var y1:Number = tri.v1.y;
         var x2:Number = tri.v2.x;
         var y2:Number = tri.v2.y;
       
         //no idea why but fp9 wants this
         graphics.beginFill( fillColor, fillAlpha );
         graphics.moveTo( x0, y0 );
         graphics.lineTo( x1, y1 );
         graphics.lineTo( x2, y2 );
         graphics.lineTo( x0, y0 );
           
             if (tri.uv1.v > 0.9 && tri.uv1.v < 1.1)
             {
                 graphics.lineStyle(lineThickness, lineColor, lineAlpha );
                 graphics.moveTo( x0, y0 );
                 graphics.lineTo( x1, y1 );
                 graphics.lineTo( x2, y2 );
                 graphics.lineStyle();
             }
             if (tri.uv1.v < 0.1)
             {
                 graphics.lineStyle(lineThickness, lineColor, lineAlpha );
                 graphics.moveTo( x1, y1 );
                 graphics.lineTo( x0, y0 );
                 graphics.lineTo( x2, y2 );
                 graphics.lineStyle();
             }
             graphics.beginFill( fillColor, fillAlpha );
             graphics.moveTo( x0, y0 );
             graphics.lineTo( x1, y1 );
             graphics.lineTo( x2, y2 );
             graphics.lineTo( x0, y0 );
           
        renderSessionData.renderStatistics.triangles++; 

}

и по умолчанию установим классу свойство doubleSided = true (в объявлении класса). Теперь при использовании этого материала будут видны только ребра, без треугольников.

Для каждой вершины нашего куба создадим по сфере, которые потом сделаем интерактивными:

            greySphere1 = new Sphere(materialSpehereD3, 7, 8, 8)
            greySphere1.name = "p1";
            greySphere1.x = 200;
            greySphere1.y = 200;
            greySphere1.z = -200;

Каждой сфере назначим свое имя, позже будем его использовать для определения позиции, куда вращать куб, сферы и торы.

Создадим материал для сфер - var materialSpehereD3:MaterialObject3D = new PhongMaterial(light, 0xC9BAB6, 0xC9BAB6, 1); и добавим ему интерактивности materialSpehereD3.interactive = true;

Теперь каждой сфере назначим EventListener - greySphere1.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onPressHandler);

Наша функция onPressHandler будет вызывать функцию, вращающую нашу композицию moveCubeTo(event.displayObject3D.name);

            ...

            switch(pName)
            {
                case "p1":
                    if(cube.rotationZ == -180){
                        TweenMax.to(cube, 1, {rotationX:0, rotationY:40, rotationZ:0 });
                        TweenMax.to(spheresContainer, 1, {rotationX:0, rotationY:40, rotationZ:0 });
                    }else{
                        TweenMax.to(cube, 1, {rotationX:0, rotationY:40, rotationZ:0 });
                        TweenMax.to(spheresContainer, 1, {rotationX:0, rotationY:40, rotationZ:0 });
                    }
                break;

             ...

Также можно добавить stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDownHandler); для подключения клавиш клавиатуры.

Несколько полезных ссылок -

http://sebleedelisle.com/2008/08/changing-a-cubes-material-dynamically-in-papervision3d/,

http://www.insideria.com/2008/02/papervision3d-part-1-foundatio.html,

http://blog.tartiflop.com/2008/08/first-steps-in-papervision3d-part-4-lighting-and-shading/