Papervision 3D

Papervision3D ist eine Open Source 3D Engine für Flash. Das Projekt befindet seit einiger Zeit in der Public Beta Phase und erfreut sich großer Beliebtheit.

Hier ein kurzes Beispiel, wie Papervision 3D mit Flashvideos kombiniert werden kann. Fährt man mit der Maus hoch bzw. runter, kann der Abstand zu den Videos verändert werden. Der kommentierte Quellcode zu dem Flashbeispiel befindet sich am Ende des Beitrags.

Link: Papervision Beispiel

Ein guter Ausgangspunkt, um Papervision kennenzulernen, ist das Wiki: Papervision 3D Wiki. Weitere Informationen finden sich im Beitrag Papervision 3D Public Beta.

[ad]

Papervision 3D Komponente

Seit kurzem gibt es außerdem eine Papervision 3D Komponente, die die Handhabung weiter vereinfacht. Man hat in Flash ein neues Panel, mit dem viele Parameter über die Flash IDE konfiguriert werden können. Die Featureliste lautet wie folgt:

• Design-time render and editing in Flash IDE
• 3 Material types supported – BitmapFileMaterial, BitmaAssetMaterial and MovieAssetMaterial
• Creates MovieScene3D and Free or Target camera
• Manages resizing / centering of Papervision3D scene [optional]
• Dynamic masking to constrain the viewable render area to the bounds of the component [optional]
• Full API and access to Scene, Camera, Collada objects to code around
• Automatically loads materials via Collada file [when materials list is not given]
• New Custom Panel for modifying rotation, camera zoom, camera focus, camera Z at design-time

Voraussetzung für die Komponente ist Flash CS3.

Link: New Papervision 3D components

360 Grad Panorama Player

Des Weiteren möchte ich auf einen 360-Grad-Panorama Player von Harald Kotte hinweisen:

Link: Beispiel Panorama
Link: Free Panorama-Player (Download/Quellcode)

Der Open Source Player wurde ebenfalls mit Flash CS3 und Papervision 3D erstellt.

[ad]

Quellcode zum Papervision 3D Beispiel

[as]
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;

//::::::::::::: VIDEO ::::::::::::::

// Timer Klasse und Events vom Typ „TimerEvent“ importieren
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.Sprite;
import flash.events.MouseEvent;

// ::::::: Video initialisieren ::::::::::::::

// neues NetConnection-Objekt erzeugen
var nc:NetConnection = new NetConnection();

// lokale Verbindung bzw. HTTP-Verbindung erstellen
nc.connect (null);

//neues NetStream-Objekt
var ns:NetStream = new NetStream(nc);

// neuer Client
var customClient:Object = new Object(); // neues Objekt für die Meldungen
ns.client = customClient;

//NetStream mit dem Video-Objekt verknüpfen
vid1.vidDisplay.attachNetStream(ns);

// Video laden und starten
ns.bufferTime = 2; // Puffergröße festlegen
ns.play („elephant-dream.flv“);

// EventListener für Statusmeldungen
ns.addEventListener(NetStatusEvent.NET_STATUS, statusMessage);

// Funktion zur Anzeige des Status
function statusMessage(statusObject:Object) {

trace („Message: “ + statusObject.info.code);

if (statusObject.info.code == „NetStream.Play.Stop“) {
ns.seek(0);
}

};

// ::::::::::: PAPERVISION :::::::::::::::::

// neues Sprite
var mySprite:Sprite = new Sprite();

// Sprite auf die Buehne setzen
this.addChild(mySprite);

// x und y Koordinaten festlegen
mySprite.x = 400;
mySprite.y = 300;

// neues Objekt vom Typ Scene3D
var scene:Scene3D = new Scene3D(mySprite);

// neue Kameraperspektive
var myCamera:Camera3D = new Camera3D();

// Bitmap-Objekte erstellen
var bmd:BitmapData = new BitmapData(320, 240);

// BitmapMaterial erstellt eine Texture aus einem Bitmapobjekt
var myMaterial:BitmapMaterial = new BitmapMaterial(bmd);

// zweiseitig (also auch eine Rueckseite)
myMaterial.oneSide = false;

// 8,8 –> mapping artifacts vermeiden durch Unterteilung in kleinere Segmente
var myPlane:Plane = new Plane(myMaterial,320, 240, 8, 8);
var myPlane2:Plane = new Plane(myMaterial,320, 240, 8, 8);

// vom Mittelpunkt auf x = 800 verschieben
myPlane.x = 320;
myPlane.y = 240;

// Rechteck mit der Flaeche zum Kreismittelpunkt ausrichten
myPlane.rotationY = 270;
//myPlane.rotationZ = 45; // Neigung

// zur 3D-Szene hinzufügen
scene.addChild(myPlane);
scene.addChild(myPlane2);

// :::::::::::::::::::::::::::::::::::::::::::

// jedes Frame ausfuehren
this.addEventListener(Event.ENTER_FRAME, updateStage);

// Anfangswinkel setzen
var angle:Number = 0;

function updateStage(evt:Event)
{
// Winkel um zwei Grad erhoehen
angle += (2 * Math.PI) / 180;

// neues Kamera x und z Position ausrechnen (Einheitskreis multiplizieren mit Faktor)
myCamera.x = Math.cos(angle * 2) * 720;
myCamera.z = Math.sin(angle * 2) * 720;

myCamera.zoom = (this.mouseY / 100) + 2;

// Bitmap erzeugen
bmd.draw(vid1);

// Bitmap hineinladen
myMaterial.updateBitmap();

// Bild aus aktueller Kameraposition erstellen
scene.renderCamera(myCamera);
}

// Original MovieClip (nicht 3D) ausblenden
vid1.visible = false;
[/as]