Pierwsze kroki z Papervision3D

November 1st, 2009 by Piotr Wierzgała Leave a reply »

Papervision3D jest biblioteką umożliwiającą renderowanie obiektów 3D dla technologii Adobe Flash. Oprócz niej do najbardziej popularnych należą Away3D i Alternativa3D. W tym wpisie zajmiemy się instalacją biblioteki Papervision3D oraz użyciem klasy BasicView w celu stworzenia sceny 3D z obracającym się sześcianem.

FLEX: 3.0, Papervision3D: 2.0.883

Żeby zacząć zabawę z trzecim wymiarem musimy pobrać bibliotekę Papervison3D (klik). Po rozpakowaniu archiwum otrzymujemy katalog “org”, który dodajemy do naszego projektu. Od tej pory możemy cieszyć się dobrodziejstwami dodatkowego wymiaru.

Do wyświetlania obiektów 3D niezbędne są:

1. Scena: Przechowuje informacje o renderowanych obiektach 3D.
2. Viewport: Definiuje prostokątny obszar, w którym będą renderowane obiekty 3D
3. Kamera: Wirtualne oko, którym spoglądamy na viewport.
4. Renderer: Renderuje obiekty 3D dodane do sceny.

Normalnie powinniśmy stworzyć klasę, która posiadałaby wszystkie wyżej wymienione elementy i je odpowiednio inicjalizowała, ale na szczęście nie musimy i w tym przypadku wręcz nie powinniśmy bo na początku powinno być przede wszystkim prosto. Dlatego zwrócimy się ku udogodnieniu jakim jest klasa BasicView, która zajmuje się za nas wszystkimi niezbędnymi ustawieniami sceny 3D.

Tworzymy klasę, która dziedziczy po BasicView

public class Viewer extends BasicView

W naszym konstruktorze na początku wywołujemy konstruktor klasy BasicView, którego parametry to:

1. viewportWidth: Szerokość viewportu w pikselach.
2. viewportHeight: Wysokość viewportu w pikselach.
3. scaleToStage: Wartość logiczna mówiąca czy viewport ma być skalowany do wymiarów sceny.
4. interactive: Wartość logiczna mówiąca czy mają być wykrywane interakcje użytkownika z viewportem.
5. cameraType: Rodzaj kamery.

Następnie wywołujemy metodę “init3d” (o tym zaraz) i rozpoczynamy renderowanie sceny wywołaniem metody “startRendering” klasy BasicView.

public function Viewer() {
    super(640,480,true,false,CameraType.FREE);
    init3D();
    startRendering();
}

Metoda “startRendering” odpowiada za dodanie nasłuchiwania zdarzenia wejścia w nową klatkę obsługiwanego przez funkcję “onRenderTick”.

addEventListener(Event.ENTER_FRAME, onRenderTick);

Ponieważ sześcian jest fajną bryłą dlatego został wybrany do bycia przykładem w tym wpisie. Minimum niezbędnym do utworzenia sześcianu jest lista materiałów jakie pokryją jego kolejne ściany. W naszym przypadku każdy materiał będzie typu “ColorMaterial”.

private function init3D():void {
    var materialsList:MaterialsList = new MaterialsList();
    materialsList.addMaterial(new ColorMaterial(0xff0000),"front");
    materialsList.addMaterial(new ColorMaterial(0x00ff00),"right");
    materialsList.addMaterial(new ColorMaterial(0x0000ff),"back");
    materialsList.addMaterial(new ColorMaterial(0xffff00),"left");
    materialsList.addMaterial(new ColorMaterial(0x00ffff),"bottom");
    materialsList.addMaterial(new ColorMaterial(0xff00ff),"top");
    cube = new Cube(materialsList);
    scene.addChild(cube);
}

Jeżeli chcemy żeby nasz sześcian obracał się musimy nadpisać metodę “onRenderTick” klasy BasicView dodając do niej odpowiednie polecenia. W ten sposób wraz z wejściem w każą nową klatę sześcian będzie obracał się o jeden stopień wokół osi X i Y.

override protected function onRenderTick(event:Event=null):void {
    super.onRenderTick();
    cube.yaw(1);
    cube.pitch(1);
}

Pobierz źródła przykładu

Advertisement

Leave a Reply

Flexmaniaks on Facebook