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

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