• 
• 
• 
• 
• 
• 
• 
• 1

November 2009

3D-Verbiegungen in Flash

Krumme Dinger in der dritten Dimension

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

Die dritte Dimension ist für Flash dank zahlreicher 3D-Engines und seit neuestem durch native Methoden innerhalb von Flash CS4 ein gängiger, fast alltäglicher Ort geworden. Auf zahlreichen Websites tummeln sich 3D-Bildergalerien, wimmelt es von sich drehenden Würfeln oder werden interaktiv begehbare, virtuelle Räume geschaffen. Alles schön und gut, aber alles meist langweilig linear.

Text: Frank Reitberger

Der Quellcode steht auch als Download bereit.

Denn häufig werden nur Standard-Primitives (Cubes, Spheres, Cylinder usw.) verwendet, texturiert und dann noch ein wenig animiert. Dabei gibt es für all die gängigen 3D-Engines bereits eine Menge guter Bibliotheken, die man als Add-on benutzen kann, um das gesamte Setup zu verfeinern:

• Physics (http://www.jiglibflash.com/blog/)
• Augmented Reality (http://www.libspark.org/wiki/saqoosha/FLARToolKit/en)
• 3D Modifiers (http://code.google.com/p/as3dmod/)

Letztgenannte AS3mod beispielsweise ist eine Sammlung an Modifikatoren, die es dem Benutzer erlauben, direkt und einfach auf die Architektur von 3D-Objekten Einfluss zu nehmen. Derzeit stehen sieben Wandler zur Verfügung, mit denen sich schon einiges bewirken und manipulieren lässt:

• Bend (verbiegt ein Objekt)
• Noise (verformt ein Objekt zufällig)
• Skew (verzerrt ein Objekt)
• Taper (erzeugt zugespitzte bis konische Verformungen)
• Bloat (bläht Objekte stellenweise auf)
• Perlin (verwendet perlinNoise und verschiebt anhand der Farbwerte)
• Twist (verdreht ein Objekt in sich)

Und das Ganze ist noch dazu kinderleicht zu bedienen, sodass man sofort loslegen kann.

Was ist was?

AS3mod ist quasi ein Add-on und somit als zusätzliche Zutat zur vorab gewählten 3D-Engine gedacht. Derzeit unterstützt die Bibliothek Papervision3D, Away3D, Sandy3D und Alternativa3D. In unserem Fall habe ich mich für Papervision3D entschieden – die hier verwendeten AS3mod-Einstellungen lassen sich aber ebenso problemlos für alle soeben erwähnten Bibliotheken adaptieren. Einfach beim import ein anderes Plug-in einstöpseln, also anstelle von import com.as3dmod.plugins.pv3d.* beispielsweise für Away3D import com.as3dmod.plugins.away3d.* auswählen und schon läuft es.

1. package {
2. ///////////////////////////////////
3. // import used classes
4. ///////////////////////////////////
6. import com.as3dmod.*;
7. import com.as3dmod.modifiers.*;
8. import com.as3dmod.plugins.pv3d.*
9. import flash.display.*;
10. import flash.events.*;
11. import flash.filters.*;
12. import flash.text.*;
14. import flash.utils.getTimer;
16. import gs.*;
17. import gs.easing.*;
18. import org.papervision3d.cameras.*;
19. import org.papervision3d.lights.*;
20. import org.papervision3d.materials.*;
21. import org.papervision3d.materials.shadematerials.*;
22. import org.papervision3d.materials.shaders.*;
23. import org.papervision3d.materials.utils.*;
24. import org.papervision3d.objects.primitives.*;
25. import org.papervision3d.render.*;
26. import org.papervision3d.scenes.*;
27. import org.papervision3d.view.*;
29. ///////////////////////////////////
30. // class
31. ///////////////////////////////////
33. public class TwistyCubes extends Sprite {
35. public var surface :BitmapData;
36. public var vortex :BitmapData;
37. private var view :Viewport3D;
38. private var scene :Scene3D;
39. private var cylinder :Cylinder;
40. private var cube01 :Cube;
41. private var cube02 :Cube;
42. private var light :PointLight3D;
43. private var camera :Camera3D;
44. private var renderer :BasicRenderEngine;
46. private var stack01 :ModifierStack;
47. private var stack02 :ModifierStack;
48. private var twist01 :Twist;
49. private var twist02 :Twist;
51. ///////////////////////////////
52. // class constructor
53. ///////////////////////////////
55. public function TwistyCubes() {
57. super();
59. if ( stage ) {
61. setup();
63. } else {
65. addEventListener( Event.ADDED_TO_STAGE,setup );
67. }
69. }
71. ///////////////////////////////
72. // setup
73. ///////////////////////////////
75. private function setup(evt:Event=null):void {
77. removeEventListener(Event.ADDED_TO_STAGE,setup)
79. ///////////////////////////////////
80. // initialize
81. ///////////////////////////////////
83. initEngine();
84. setupMaterials();
85. initBendings();
86. launch();
88. }
90. ///////////////////////////////////
91. // initialize: 3d.engine
92. ///////////////////////////////////
94. private function initEngine():void {
96. this.view = new Viewport3D( 500, 500 );
97. this.view.filters = [
98. new DropShadowFilter(40, 90, 0, 0.6, 24, 24)];
100. this.scene = new Scene3D();
101. this.renderer = new BasicRenderEngine();
103. this.camera = new Camera3D();
104. this.camera.y = 400;
105. this.camera.z = -850;
107. addChild( this.view );
109. }
111. ///////////////////////////////////
112. // setup: material(s)
113. ///////////////////////////////////
115. private function setupMaterials():void {
117. ///////////////////////////////////
118. // setup: light
119. ///////////////////////////////////
121. this.light = new PointLight3D();
122. this.light.y = 400;
123. this.light.x = 50;
124. this.light.z = -600;
126. ///////////////////////////////////
127. // setup: material(s)
128. ///////////////////////////////////
130. var bmp01 :BitmapMaterial = new BitmapMaterial( surface );
131. var shader01 :ShadedMaterial = new ShadedMaterial( bmp01, new PhongShader( this.light, 0xFFFFFF ) );
132. var bmp02 :BitmapMaterial = new BitmapMaterial( surface );
133. var shader02 :ShadedMaterial = new ShadedMaterial( bmp02, new PhongShader( this.light, 0xFFFFFF ) );
134. var bmp03 :BitmapMaterial = new BitmapMaterial( surface );
135. var shader03 :ShadedMaterial = new ShadedMaterial( bmp03, new PhongShader( this.light, 0xFFFFFF ) );
136. var bmp04 :BitmapMaterial = new BitmapMaterial( surface );
137. var shader04 :ShadedMaterial = new ShadedMaterial( bmp04, new PhongShader( this.light, 0xFFFFFF ) );
139. var materialList: MaterialsList = new MaterialsList( {
140. "top": new FlatShadeMaterial( this.light, 0x666666 ),
141. "bottom": new FlatShadeMaterial( this.light, 0x666666 ),
142. "left" : shader01,
143. "right" : shader02,
144. "front" : shader03,
145. "back" : shader04
146. } );
148. ///////////////////////////////////
149. // setup: cube(s)
150. ///////////////////////////////////
152. this.cube01 = new Cube( materialList, 500, 500, 500, 5, 5, 5 );
153. this.cube01.rotationY = 45;
155. this.cube02 = new Cube( materialList, 500, 500, 500, 5, 5, 5 );
156. this.cube02.rotationY = 45;
157. this.cube02.y -= 550;
159. this.camera.target = this.cube01;
161. ///////////////////////////////////
162. // add
163. ///////////////////////////////////
165. this.scene.addChild( this.cube01 );
166. this.scene.addChild( this.cube02 );
168. ///////////////////////////////////
169. // event(s)
170. ///////////////////////////////////
172. stage.addEventListener( MouseEvent.CLICK, deform );
174. }
176. ///////////////////////////////////
177. // initialize: 3d.bending(s)
178. ///////////////////////////////////
180. private function initBendings():void {
182. this.stack01 = new ModifierStack( new LibraryPv3d(), this.cube01 );
183. this.stack02 = new ModifierStack( new LibraryPv3d(), this.cube02 );
185. this.twist01 = new Twist( 0 );
186. this.twist02 = new Twist( 0 );
188. ///////////////////////////////////
189. // add: modifier(s)
190. ///////////////////////////////////
192. this.stack01.addModifier( this.twist01 );
193. this.stack02.addModifier( this.twist02 );
195. }
197. ///////////////////////////////////
198. // launch
199. ///////////////////////////////////
201. private function launch():void {
203. addEventListener( Event.ENTER_FRAME, onUpdateFrame );
205. }
207. private function onUpdateFrame(ev:Event):void {
209. ///////////////////////////////////
210. // set: camera & light angle(s)
211. ///////////////////////////////////
213. var vy:Number = (stage.mouseY / 400 - 0.5) * 2;
214. var damp :Number = vy * 600;
215. var angle:Number = vy * 90;
217. this.camera.y = this.camera.y + ( damp - this.camera.y ) / 20;
218. this.light.y = this.camera.y;
220. ///////////////////////////////////
221. // set: shadow.angle(s)
222. ///////////////////////////////////
224. var ds:DropShadowFilter;
225. ds = this.view.filters[0];
226. ds.angle = ds.angle + ( angle - ds.angle) / 20;
228. this.view.filters = [ ds ];
230. ///////////////////////////////////
231. // handle: modifier.stack
232. ///////////////////////////////////
234. this.stack01.apply();
235. this.stack02.apply();
237. ///////////////////////////////////
238. // render
239. ///////////////////////////////////
241. this.renderer.renderScene( this.scene, this.camera, this.view );
243. }
245. ///////////////////////////////////
246. // process: bending(s)
247. ///////////////////////////////////
249. private function deform(evt:MouseEvent):void {
251. TweenLite.to( this.twist01, 0.25, { "angle":0.6, "ease":Quad.easeOut, "onComplete":flatten, "onCompleteParams":[ this.twist01 ] } );
252. TweenLite.to( this.cube01, 0.5, { "rotationY":this.cube01.rotationY + 90 } );
254. TweenLite.to( this.twist02, 0.25, { "angle":0.6, "ease":Quad.easeOut, "onComplete":flatten, "onCompleteParams":[ this.twist02 ] } );
255. TweenLite.to( this.cube02, 0.5, { "rotationY":this.cube02.rotationY - 90 } );
256. }
258. ///////////////////////////////////
259. // set.back.bending(s)
260. ///////////////////////////////////
262. private function flatten( twist:Twist ):void {
264. TweenLite.to( twist, 0.3, { "angle":0, "ease":Back.easeOut } );
266. }

• 1
• 2

 

• prinzipiell.com

• 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,
• alternativa3d,
• augmented reality,
• away3d,
• cs4,
• flash,
• papervision3d,
• physics,
• sandy3d