• 
• 
• 
• 
• 
• 
• 
• 
• 0

Juli 2009

3D-Landschaften: Papervision3D, Flash 10 & O3D

Synthetischer Landschaftsbau mit Drahtgittern

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

Den Kern eines jeden 3D-Primitives, sei es nun ein Würfel, eine Sphäre, ein Zylinder oder komplexere geometrische Körper, bilden Dreiecke. Viele derzeitige Umsetzungen mit Flash legen ihren Fokus darauf, diese geometrischen Formen möglichst ansprechend zu texturieren und darzustellen. Dabei wird die Interaktivität des Benutzers letztlich meist auf Kamerafahrten, Objektdrehungen und -zooms reduziert. Gewährt man aber Zugriff auf die Basis und lässt den Benutzer damit interagieren, können recht interessante Spielereien und Anwendungen entstehen.

Text: Frank Reitberger

Dreiecke, Wendepunkte und verlinkte Polygonnetze

Bevor man sich direkt in diese Dreiecksbeziehung stürzt, steht vorab noch die Wahl der Mittel. Für uns heißt das, die Wahl der 3D-Umgebung. Ich habe mich für zwei Varianten entschieden: Zum einen für eine Papervision3D-Variante, zum anderen für eine native Flash-Player-10-Variante. Beide Umsetzungen haben ihre Pros und Contras: Hält Papervision als wirklich ausgewachsene Engine eine Menge Methoden bereit, die uns das Arbeiten wirklich erleichtern, besticht eine reine Flash-Player-10-Umsetzung letztlich durch ihren Performanceschub. In beiden Ansätzen kann man relativ einfach auf Faces und Vertices zugreifen, um diese dann zu manipulieren.

Einstiegsszenario

Vorab schreiben wir uns noch schnell einen Ausgangspunkt für beide Umsetzungsbeispiele – eine kleine Navigation, über die vorab Textur der Landschaft sowie 3D-Umgebung ausgewählt werden können, bietet Listing 1.

1. package {
2. ///////////////////////////////////
3. // import used classes
4. ///////////////////////////////////
5. import flash.display.StageQuality;
6. import flash.display.Sprite;
7. import flash.display.DisplayObject;
8. ///////////////////////////////////
9. // class
10. ///////////////////////////////////
11. public class Main extends Sprite {
12. private var core :CoreCanvas;
13. ///////////////////////////////
14. // class constructor
15. ///////////////////////////////////
16. public function Main() {
17. ore = new CoreCanvas();
18. core.launch( this );
19. stage.quality = StageQuality.LOW;
20. }
21. }
22. }
23. import flash.display.Bitmap;
24. import flash.display.BitmapData;
25. import flash.display.DisplayObjectContainer;
26. import flash.display.Sprite;
27. import flash.events.MouseEvent;
28. import flash.display.Sprite;
29. class CoreCanvas {
30. [Embed(source = "../library/sunMap04.jpg")] private var groundMap0:Class;
31. [Embed(source = "../library/sunMap05.jpg")] private var groundMap1:Class;
32. private var container:DisplayObjectContainer;
33. private var colorMap:Bitmap;
34. private var pv3dTerrain:Pv3dTectonicMesh;
35. private var f10Terrain:F10TectonicMesh;
36. private var panel:panelClip;
37. private var w:int = 800;
38. private var h:int = 600;
39. ///////////////////////////////////
40. // class constructor
41. ///////////////////////////////////
42. public function CoreCanvas():void { }
43. ///////////////////////////////////
44. // launch
45. ///////////////////////////////////
46. public function launch(
47. container:DisplayObjectContainer ):void {
48. this.container = container;
49. this.panel = new panelClip();
50. this.panel.x = 200;
51. this.panel.y = 350;
52. this.container.addChild( this.panel );
53. this.panel["img01"].addEventListener( MouseEvent.ROLL_OVER, onRollOver );
54. this.panel["img01"].addEventListener( MouseEvent.CLICK, onClick );
55. this.panel["img01"].addEventListener( MouseEvent.ROLL_OUT, onRollOut );
56. this.panel["img02"].addEventListener( MouseEvent.ROLL_OVER, onRollOver );
57. this.panel["img02"].addEventListener( MouseEvent.CLICK, onClick );
58. this.panel["img02"].addEventListener( MouseEvent.ROLL_OUT, onRollOut );
59. this.panel["img01"].buttonMode = true;
60. this.panel["img02"].buttonMode = true;
61. }
62. ///////////////////////////////////
63. // mouse event(s)
64. ///////////////////////////////////
65. private function onRollOver(e:MouseEvent ):void {
66. if ( this.panel.currentFrame == 1 ) {
67. this.panel[e.target.name]["borderClip"].alpha 1.0;
68. } else {
69. this.panel[e.target.name]["ulClip"].alpha = 1.0;
70. }
71. }
72. private function onClick( e:MouseEvent ):void {
73. if ( this.panel.currentFrame == 1 ) {
74. if ( e.currentTarget.name.indexOf( "img01", 0 ) != -1 ) {
75. this.colorMap = new groundMap0();
76. } else {
77. this.colorMap = new groundMap1();
78. }
79. this.panel["img01"].buttonMode = false;
80. this.panel["img02"].buttonMode = false;
81. this.panel["img01"].removeEventListener( MouseEvent.ROLL_OVER, onRollOver );
82. this.panel["img01"].removeEventListener( MouseEvent.CLICK, onClick );
83. this.panel["img01"].removeEventListener( MouseEvent.ROLL_OUT, onRollOut );
84. this.panel["img02"].removeEventListener( MouseEvent.ROLL_OVER, onRollOver );
85. this.panel["img02"].removeEventListener( MouseEvent.CLICK, onClick );
86. this.panel["img02"].removeEventListener( MouseEvent.ROLL_OUT, onRollOut );
87. this.panel.gotoAndStop( 2 );
88. environment();
89. } else {
90. this.panel["pv3dBtn"].buttonMode = false;
91. this.panel["f10Btn"].buttonMode = false;
92. this.panel["pv3dBtn"].removeEventListener( MouseEvent.ROLL_OVER, onRollOver );
93. this.panel["pv3dBtn"].removeEventListener( MouseEvent.CLICK, onClick );
94. this.panel["pv3dBtn"].removeEventListener( MouseEvent.ROLL_OUT, onRollOut );
95. this.panel["f10Btn"].removeEventListener( MouseEvent.ROLL_OVER, onRollOver );
96. this.panel["f10Btn"].removeEventListener( MouseEvent.CLICK, onClick );
97. this.panel["f10Btn"].removeEventListener( MouseEvent.ROLL_OUT, onRollOut );
98. if( e.currentTarget.name.indexOf"pv3d",0) != -1 ) {
99. paint( 1 );
100. } else {
101. paint( 2 );
102. }
103. }
104. }
105. private function onRollOut( e:MouseEvent ):void {
106. if ( this.panel.currentFrame == 1 ) {
107. this.panel[e.target.name]["borderClip"].alpha = 0.0;
108. } else {
109. this.panel[e.target.name]["ulClip"].alpha = 0.0;
110. }
111. }
112. private function environment():void {
113. this.panel["pv3dBtn"].addEventListener( MouseEvent.ROLL_OVER, onRollOver );
114. this.panel["pv3dBtn"].addEventListener( MouseEvent.CLICK, onClick );
115. this.panel["pv3dBtn"].addEventListener( MouseEvent.ROLL_OUT, onRollOut );
116. this.panel["f10Btn"].addEventListener( MouseEvent.ROLL_OVER, onRollOver );
117. this.panel["f10Btn"].addEventListener( MouseEvent.CLICK, onClick );
118. this.panel["f10Btn"].addEventListener( MouseEvent.ROLL_OUT, onRollOut );
119. this.panel["pv3dBtn"].buttonMode = true;
120. this.panel["f10Btn"].buttonMode = true;
121. }
122. private function paint( gSystem:Number ):void {
123. this.panel.visible = false;
124. if ( gSystem == 1 ) {
125. this.pv3dTerrain = new Pv3dTectonicMesh( this.container, this.colorMap, this.activate );
126. } else if ( gSystem == 2 ) {
127. this.f10Terrain = new F10TectonicMesh( this.colorMap, this.activate );
128. this.container.addChild( this.f10Terrain );
129. }
130. }
131. public function activate():void {
132. this.panel.visible = true;
133. this.panel.gotoAndStop( 1 );
134. this.panel["img01"].addEventListener( MouseEvent.ROLL_OVER, onRollOver );
135. this.panel["img01"].addEventListener( MouseEvent.CLICK, onClick );
136. this.panel["img01"].addEventListener( MouseEvent.ROLL_OUT, onRollOut );
137. this.panel["img02"].addEventListener( MouseEvent.ROLL_OVER, onRollOver );
138. this.panel["img02"].addEventListener( MouseEvent.CLICK, onClick );
139. this.panel["img02"].addEventListener( MouseEvent.ROLL_OUT, onRollOut );
140. this.panel["img01"].buttonMode = true;
141. this.panel["img02"].buttonMode = true;
142. }
143. }

• 1
• 2
• 3

 

• Sourcecode (ZIP) der Beispiele

• 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)
• -+
• 

• 3d,
• flash,
• google 03d,
• papervision3d