Papervision [ReflectionView]

Clique na imagem para testar

Olá pessoal , Hoje falarei sobre uma classe muito interessante e simples, ReflectionView. Uma classe que faz com que o viewport se transforme em um espelho tanto para cima do eixo y:0 quanto para baixo.

A classe ReflectionView é uma classe extendida da classe BasicView que por sua vez é extendido da classe AbstractView, o que eu quero dizer com tudo isso, que ao extender uma classe a RelectionView ele vai possuira atributos instanciados como:

AbstractView:
scene:Scene3D;
viewport:Viewport3D;
renderer:BasicRenderEngine;

startRendering();
stopRendering();
singleRender();

ReflectionView
viewportReflection : Viewport3D;
cameraReflection : CameraObject3D;
singleRender() (override - sobrescrevido)

Quando criávamos nosso BasicView ativávamos a função startRendering() para renderizar nossa aplicação, porem quando criamos um ReflectionView também podemos utilizar esta função para renderizar, porém não irá criar reflexo pois a função responsável pelo reflexo é a singleRender() que esta reescrita nesta classe para poder ativar o reflexo. Esta parecendo complicado mas as coisas são bem simples vamos analisar nosso código. Em resumo para funcionar precisamos apenas colocar dentro de um bloco ENTER_FRAME a função singleRender();

Como de custume trabalharemos com 2 arquivos. ppv_reflection.fla e ppv_reflection.as. Certifique de possuir 2 movieclip em sua biblioteca com os seguintes linkage: “smile” e “face”.

ppv_reflection.as

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import org.papervision3d.core.effects.view.ReflectionView;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.MovieAssetMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;

    public class ppv_reflection extends ReflectionView
    {
        public var matsmile:MovieAssetMaterial;
        public var matface:MovieAssetMaterial;
        public var cubo:Cube;
        public var lista:MaterialsList;

        public function ppv_reflection() {
            setChildIndex(viewportReflection, 1);
            viewportReflection.alpha = 0.8;
            matsmile  = new MovieAssetMaterial("smile");
            matface  = new MovieAssetMaterial("face");
            lista = new MaterialsList(
                {front: matface,
                  back: matsmile,
                  top: new ColorMaterial(0xF9EAAD),
                  bottom: new ColorMaterial(0x000000),
                  left: matface,
                  right: matface} );
            cubo  = new Cube(lista, 200, 200, 250);
            scene.addChild(cubo);

            cubo.y = 150;
            addEventListener(Event.ENTER_FRAME, onEnterFrame);

        }
        private function onEnterFrame(e:Event):void {
            cubo.rotationY = mouseX - stage.stageWidth / 2;
            cubo.rotationX = mouseY - stage.stageHeight / 2;
            singleRender();
        }

    }

}

Uma classe simples que possui uma imagem de fundo com um cubo personalizado, aonde este cubo se movimenta respondendo os comandos do mouse.Na primeira linha de nosso construtor utilizamos o seguinte código:

    setChildIndex(viewportReflection, 1);

Quando criamos nossa classe extendida de ReflectionView automaticamente nosso viewport refletor é criado no índex 0 porem se eu quiser deixar uma imagem de background desenhado em alguma layer da time line esse background entrará em um índex acima de nosso viewport fazendo com que o viewport refletor fique por trás do background, este é o motive desta linha de comando, estamos trocando o posicionamento índex de nosso viewport.

Nosso viewport refletor ele funciona da seguinte maneira, tudo que esta do eixo y:0 para cima será refletido para baixo o eixo y:0 e vice versa, a imagem a seguir ilustra um cubo desenhado abaixo do eixo y:0.

Espero que tenham gostado deste tutorial, não precisam se preocupar que teremos mais coisas interessantes no decorrer da semana, até a próxima.