Flash Tutorial: 3D Objekt mit Papervision

Heute wollen wir euch zeigen wie man mit Papervision und ein wenig AS3, eine einfache 3D Plane in Flash erstellt. Dazu benötigen wir zuallererst die Klassen von Papervision. Diese kann man sich inklusive hilfreichen Faq`s zur Installation hier downloaden. Wenn möglich nutzt einen Versionskontrollmanager, auch Subversion Control genannt, wie etwa Tortoise SVN, um immer auf dem aktuellsten Stand zu bleiben. Nach der Installation können wir auch schon loslegen.

1. Als erstes erstellen wir eine AS-Datei mit Namen “PV3D.as”. Danach erstellen wir eine leere Flash-Datei, stellen die Bildrate auf 30 Bps und tragen in das Feld Dokumentklasse “PV3D” ein. Die beiden Files müssen im selben Ordner liegen.

2. Nun können wir auch schon die Klassen in die AS-Datei importieren. Diese werden zur Darstellung des 3D Objekts benötigt. Dazu einfach wie üblich in AS3 mit dem package Schlüsselwort beginnen:

package{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
}

3. Danach erweitern wir die Klasse Sprite um die öffentliche Klasse PV3D und initialisieren die benötigten Variablen:

package{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;

public class PV3D extends Sprite {
private var viewport: Viewport3D;
private var scene: Scene3D;
private var camera: Camera3D;
private var material: ColorMaterial;
private var primitive: Plane;
private var renderer: BasicRenderEngine;
}
}

4. Nun zur eigentlich Funktion. Wir erstellen die öffentliche Methode PV3D und instanzieren ein neues Viewport-Objekt, das wir anschließend der Anzeigeliste hinzufügen. Als Parameter für new Viewport() übergeben wir width, height, scaleToStage und interactive:

public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);
}

5. Es folgen weitere Instanzierungen von scene, camera, renderer, material, und primitive. Bei material setzen wir doubleSided auf true um die Farbe auf der Vorder,- und Rückseite anzuzeigen. Bei primitive erstellen wir eine neue Plane und weisen new Plane() die Parameter material, width, height, wSegments und hSegments zu. Die Segmente sind dabei die verwendeten Polygone, umso höher hier der Wert ist, umso höher aufgelöst ist das Objekt. Die Verwendung eines höheren Werts ist aber auch sehr performancelastig und man sollte sparsam damit umgehen. In unserem einfachen Beispiel reichen 3 Segmente horizontal und vertikal völlig aus. Zum Schluß wird primitive noch der scene hinzugefügt:

public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);

scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
material = new ColorMaterial(0x333333);
material.doubleSided = true;

primitive = new Plane(material, 200, 200, 3, 3);
scene.addChild(primitive);
}

6. Zu guter Letzt setzen wir noch einen ENTER_FRAME Event-Listener und weisen ihm die Methode onEnterFrame() zu. Hier lassen wir unsere Plane nun zur Laufzeit drehen und aktualisieren den renderer:

public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);

scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
material = new ColorMaterial(0x333333);
material.doubleSided = true;

primitive = new Plane(material, 200, 200, 3, 3);
scene.addChild(primitive);

addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void {
primitive.rotationY += 2;
renderer.renderScene(scene, camera, viewport);
}
}

Ganz zum Schluß speichern wir unsere AS-Datei und veröffentlichen die Flash-Datei. Als Ergebnis seht ihr eine sich permanent drehende 3D Plane, die mit wenig AS3 Code, Flash und Papervision erstellt wurde.

Hier nochmal der gesamte Code:

package{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;

public class PV3D extends Sprite {
private var viewport: Viewport3D;
private var scene: Scene3D;
private var camera: Camera3D;
private var material: ColorMaterial;
private var primitive: Plane;
private var renderer: BasicRenderEngine;

public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);

scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
material = new ColorMaterial(0x333333);
material.doubleSided = true;

primitive = new Plane(material, 200, 200, 3, 3);
scene.addChild(primitive);

addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void {
primitive.rotationY += 2;
renderer.renderScene(scene, camera, viewport);
}
}
}
}