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.

P3D

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.

Papervision 3D

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.

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.

Quellcode zum Papervision 3D Beispiel

PLAIN TEXT
Actionscript:
  1. import org.papervision3d.scenes.*;
  2. import org.papervision3d.cameras.*;
  3. import org.papervision3d.objects.*;
  4. import org.papervision3d.materials.*;
  5.  
  6.  
  7. //::::::::::::: VIDEO ::::::::::::::
  8.  
  9. // Timer Klasse und Events vom Typ "TimerEvent" importieren
  10. import flash.utils.Timer;     
  11. import flash.events.TimerEvent;   
  12. import flash.display.Sprite;
  13. import flash.events.MouseEvent;
  14.  
  15.  
  16. // ::::::: Video initialisieren ::::::::::::::
  17.  
  18. // neues NetConnection-Objekt erzeugen
  19. var nc:NetConnection = new NetConnection();
  20.  
  21. // lokale Verbindung bzw. HTTP-Verbindung erstellen
  22. nc.connect (null);
  23.  
  24. //neues NetStream-Objekt
  25. var ns:NetStream = new NetStream(nc);
  26.  
  27. // neuer Client
  28. var customClient:Object = new Object(); // neues Objekt für die Meldungen
  29. ns.client = customClient;
  30.  
  31. //NetStream mit dem Video-Objekt verknüpfen
  32. vid1.vidDisplay.attachNetStream(ns);
  33.  
  34. // Video laden und starten
  35. ns.bufferTime = 2;  // Puffergröße festlegen
  36. ns.play ("elephant-dream.flv");
  37.  
  38.  
  39.  // EventListener für Statusmeldungen
  40. ns.addEventListener(NetStatusEvent.NET_STATUS, statusMessage);
  41.  
  42. // Funktion zur Anzeige des Status
  43. function statusMessage(statusObject:Object) {
  44.    
  45.     trace ("Message: " + statusObject.info.code);
  46.  
  47.    if (statusObject.info.code == "NetStream.Play.Stop") {
  48.         ns.seek(0);
  49.     }
  50.  
  51. };
  52.  
  53.  
  54.  
  55. // ::::::::::: PAPERVISION :::::::::::::::::
  56.  
  57.  
  58.  
  59. // neues Sprite
  60. var mySprite:Sprite = new Sprite();
  61.  
  62. // Sprite auf die Buehne setzen
  63. this.addChild(mySprite);
  64.  
  65. // x und y Koordinaten festlegen
  66. mySprite.x = 400;
  67. mySprite.y = 300;
  68.  
  69. // neues Objekt vom Typ Scene3D
  70. var scene:Scene3D = new Scene3D(mySprite);
  71.  
  72. // neue Kameraperspektive
  73. var myCamera:Camera3D = new Camera3D();
  74.  
  75. // Bitmap-Objekte erstellen
  76. var bmd:BitmapData = new BitmapData(320, 240);
  77.  
  78. // BitmapMaterial erstellt eine Texture aus einem Bitmapobjekt
  79. var myMaterial:BitmapMaterial = new BitmapMaterial(bmd);
  80.  
  81. // zweiseitig (also auch eine Rueckseite)
  82. myMaterial.oneSide = false;
  83.  
  84. // 8,8 --> mapping artifacts vermeiden durch Unterteilung in kleinere Segmente
  85. var myPlane:Plane = new Plane(myMaterial,320, 240, 8, 8);
  86. var myPlane2:Plane = new Plane(myMaterial,320, 240, 8, 8);
  87.  
  88. // vom Mittelpunkt auf x = 800 verschieben
  89. myPlane.x = 320;
  90. myPlane.y = 240;
  91.  
  92. // Rechteck mit der Flaeche zum Kreismittelpunkt ausrichten
  93. myPlane.rotationY = 270;
  94. //myPlane.rotationZ = 45; // Neigung
  95.  
  96. // zur 3D-Szene hinzufügen
  97. scene.addChild(myPlane);
  98. scene.addChild(myPlane2);
  99.  
  100.  
  101. // :::::::::::::::::::::::::::::::::::::::::::
  102.  
  103. // jedes Frame ausfuehren
  104. this.addEventListener(Event.ENTER_FRAME, updateStage);
  105.  
  106. // Anfangswinkel setzen
  107. var angle:Number = 0;
  108.  
  109. function updateStage(evt:Event)
  110. {
  111.         // Winkel um zwei Grad erhoehen
  112.         angle += (2 * Math.PI) / 180;
  113.        
  114.         // neues Kamera x und z Position ausrechnen (Einheitskreis multiplizieren mit Faktor)
  115.         myCamera.x = Math.cos(angle * 2) * 720;
  116.         myCamera.z = Math.sin(angle * 2) * 720;
  117.        
  118.         myCamera.zoom = (this.mouseY / 100) + 2;
  119.        
  120.         // Bitmap erzeugen
  121.         bmd.draw(vid1);
  122.        
  123.         // Bitmap hineinladen
  124.         myMaterial.updateBitmap();
  125.        
  126.         // Bild aus aktueller Kameraposition erstellen
  127.         scene.renderCamera(myCamera);
  128. }
  129.  
  130. // Original MovieClip (nicht 3D) ausblenden
  131. vid1.visible = false;