• 
• 
• 
• 
• 
• 
• 
• 0

Oktober 2007

Papervision3D, Flash und Konsorten

Fortsetzung, Teil 2

(Link zum Artikel: http://www.createordie.de/cod/artikel/1319)

Das ist alles?
Wie schon erwähnt, sind in dem 3D-Austauschformat auch Verweise auf Settings und Texturen des Modells vorhanden. Auch diese Informationen kann Papervision3D beim Import direkt nutzen und wendet beispielsweise vorhandene Referenzierungen auf Texturen direkt an. Komfortabler kann man nun wirklich nicht bedient werden, oder?

Einmal rendern, bitte
Jetzt, da unser Set auch seinen wichtigsten Darsteller bekommen hat, müssen wir nur noch die Kamera einschalten, und das war dann auch schon der ganze Zauber. renderCamera sind hierbei die Schlüsselworte, die wir der Einfachheit halber in einem ENTER_FRAME–Event verpackt haben, um sie ständig wiederholt auszuführen, sprich, um ständig ein neues Abbild des Modells je nach Drehung, Neigung und Position zu rendern.

Um alle Ecken und Kanten unserer Figur betrachten zu können, habe ich diese noch in Abhängigkeit zur Mausposition gesetzt, sodass durch vertikale bzw. horizontale Bewegungen der Maus die Figur entsprechend gedreht wird.

1. function render3D( event:Event ) {
3. camera.x = ( ( -container.mouseX *5 ) –
4. camera.x ) / 10;
5. camera.y = ( ( -container.mouseY *5 ) –
6. camera.y ) / 10;
8. rootNode.rotationY = camera.x;
9. rootNode.rotationX = camera.y;
10. rootNode.rotationZ = camera.z;
12. // render scene
13. this.scene.renderCamera(camera);
15. }

Die FLV-Flimmerkiste
Das Potenzial der Papervision3D Engine ist an dieser Stelle aber noch lange nicht ausgeschöpft. In einem nächsten Schritt verwenden wir Flash-Videos (FLVs) quasi als Texturen für unsere 3D-Objekte und erstellen uns kurzerhand eine kleine Flimmerkiste.

1. // klassen importieren
3. import flash.display.BitmapData;
4. import flash.media.Video;
5. import flash.net.NetConnection;
6. import flash.net.NetStream;
7. import flash.geom.Rectangle;
8. import flash.geom.Point;
11. // vartypes definieren
13. var nConnect : NetConnection;
14. var nStream : NetStream;
15. var fVideo : Video;
16. var vidSprite : Sprite;
18. var pln0 :DisplayObject3D;
19. var pln1 :DisplayObject3D;
20. var pln2 :DisplayObject3D;
21. var pln3 :DisplayObject3D;
22. var pln4 :DisplayObject3D;
23. var pln5 :DisplayObject3D;
25. var vW : Number = 320;
26. var vH : Number = 240;
28. var vidTexture : BitmapData = new BitmapData(
29. vW, vH );
31. var bmpData : BitmapData;
35. var srcRect1 : Rectangle = new Rectangle(
36. 0,0,(vW/2),vH);
38. var pnt : Point = new Point(0,0);
41. var cstmClient :Object = new Object();
42. cstmClient.onCuePoint = cuePointHandler;
43. cstmClient.onMetaData = metaDataHandler;
47. function cuePointHandler(infObj:Object) {
48. trace("cuePoint");
49. }
50. function metaDataHandler(infObj:Object) {
51. trace("metaData");
52. }
54. function loadVideo() {
56. fVideo = new Video();
58. nConnect = new NetConnection();
59. nConnect.connect( null );
61. nStream = new NetStream( nConnect );
62. nStream.client = cstmClient;
64. fVideo.attachNetStream( nStream );
66. nStream.play("emitter.flv");
69. }
71. loadVideo();

Hierzu streamen wir zuerst ein Flashvideo (FLV) via NetConnection() und NetStream() direkt in unsere Anwendung. Um das Video zeichnen und damit anzeigen zu können, erstellen wir uns noch ein Paar einfache Flächen (sechs Stück an der Zahl) und bereiten jede einzelne darauf vor, mit einem BitmapMaterial ausgestattet zu werden. Dieses Material wird wiederum von einem BitmapData-Container als Quelle gespeist, in dem wir letztlich kontinuierlich den Videostream zeichnen.

1. function initPlanes() {
3. bmpData = new BitmapData(fVideo.width,
4. fVideo.height);
6. var pln0 = rootNode.addChild(
7. new Plane( new BitmapMaterial
8. (bmpData),300,300),"Plane0");
10. var pln1 = rootNode.addChild(
11. new Plane( new BitmapMaterial
12. (bmpData),300,300),"Plane1");
14. var pln2 = rootNode.addChild(
15. new Plane( new BitmapMaterial
16. (bmpData),300,300),"Plane2");
18. var pln3 = rootNode.addChild(
19. new Plane( new BitmapMaterial
20. (bmpData),300,300),"Plane3");
22. var pln4 = rootNode.addChild(
23. new Plane( new BitmapMaterial
24. (bmpData),300,300),"Plane4");
26. var pln5 = rootNode.addChild(
27. new Plane( new BitmapMaterial
28. (bmpData),300,300),"Plane5");
31. pln0.rotationX = 90;
32. pln0.y = -150;
34. pln1.rotationX = 180;
35. pln1.z = 150;
37. pln2.rotationX = -90;
38. plne2.y = 150;
40. pln3.z = -150;
42. pln4.rotationY = 90;
43. pln4.x = -150;
45. pln5.rotationY = -90;
46. pln5.x = 150;
48. // scene rendern
49. this.addEventListener(Event.ENTER_FRAME
50. ,render3D);
53. }
55. initPlanes();

• 1
• 2
• 3

 

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• adobe,
• webdesign