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;
}
2. 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;
}
}
3. 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);
}
4. 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);
}
5. 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);
}
}
}
}
Flash Site: Gourmet Kickz Creator
Flash und 3D, lange Zeit ein Thema was nur sehr schwierig umzusetzen war und meist über andere Programme wie Cinema 4D oder 3D Studio Max gelöst wurde. Natürlich war das kein echtes 3D, da lediglich die Animationen entweder Bild für Bild oder als Video-File in Flash importiert wurden.
Nachdem aber endlich mit AS2 eine eigene 3D Engine namens Papervision entwickelt wurde, traten immer mehr “echte” 3D Anwendungen in Erscheinung. Heute, in Zeiten von AS3 ist die Entwicklung so weit vorangeschritten das wir sehr detailreiche, in Echtzeit dargestellte 3D Objekte mit Flash realisieren können.
Aus diesem Grund möchten wir euch heute ein Beispiel vorstellen, das es zwar schon länger gibt, das aber trotzdem sehr beeindruckend ist und zeigt wo der Trend hingeht. Der Gourmet Kickz Creator ist ein Echtzeit 3D Schuh-Konfigurator, der mit Flash und Papervision realisiert wurde. Mit dem Konfigurator lässt sich ein Schuh-Modell nach belieben anpassen und von allen Seiten betrachten. Man kann jedes Element des Schuh`s farblich verändern und sogar Texturen hinzufügen. Somit wird man zum Designer seines eigenen, individuellen Schuh`s.
Gourmet Kickz Creator Flash Site
Nachdem das Design fertig ist, kann man den Schuh in einer Gallery abspeichern und auch kaufen. Nike benutzt den Gourmet Kickz Creator bereits auf der eigenen Seite und veranstaltet sogar Design-Battles. Hier treten die besten Designs gegeneinander an und man kann seine Stimme dem jeweils besseren Schuh geben.
Sicherlich zeigt der Kickz Creator was derzeit die Obergrenze des machbaren mit Flash und 3D ist. Und mit machbar meinen wir den Grad des Realismus, denn natürlich sieht man hier und da das der Schuh nicht fotorealistisch ist, aber dennoch ist die Anwendung schon nah dran und wir dürfen gespannt sein wo die Entwicklung mit Flash und 3D hingeht. Papervision als 3D Engine für Flash wird sich weiterentwickeln und auch der Flashplayer, aktuell in der Version 10 verfügbar, wird immer leistungsfähiger.
Folge uns auf Twitter
