Flashhilfe.de - Flash Community

Einfache Reflexion in Papervision3D [Flash 9]

 


AntwortenRegistrieren Seite1  

niquito12#1
Benutzerbild von niquito12
Beiträge: 901
Wohnort: Nether-Bavaria
Registriert: Jun 2008

27.11.2008, 14:55

Gibt es ein einfaches Standardverfahren für Reflexion in PV3D? Ich würde gerne ein paar Planes spiegeln. Finde jedoch nichts einfaches was mir hilft.

Es sollte wie hier aussehen:
http://flashdevelopment.de/
Qt! www.adrianslaboratory.net
Geändert von niquito12 am 27.11.08 um 14:58 Uhr
Atticus#2
Benutzerbild von Atticus
Beiträge: 1411
Wohnort: Leverkusen
Registriert: Jul 2006

28.11.2008, 14:06

Hallo niquito12^^

Ich habe hier ein schönes Script für dich womit ich eine Flash Navigation erstellt habe mit genau den selben Spiegelungen wie auf der von dir gezeigten Seite:

ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
import flash.display.*;
import flash.events.*;
import flash.geom.Matrix;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.text.*;
import flash.utils.Dictionary;
import flash.filters.*;
import flash.filters.DropShadowFilter;

import caurina.transitions.*;

import org.papervision3d.*;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.*;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.materials.VideoStreamMaterial;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
var viewport:Viewport3D;
var renderer:BasicRenderEngine = new BasicRenderEngine();
   
var cameradistance:Number = -100;
var cameraposition:Number;
var camerazoom:Number = 6;
var cameramove:Boolean = true;
var cameraaccelerate:Number;
var cameraangle:Number;
var cameraTweenTime:Number = 2;
var cameraTweenEasing:String = "easeOutQuint";
var xcamposition:Number;
var ycamposition:Number;
var zcamposition:Number;
var zoomdistance:Number = 6;

var imagewidth:Number;
var imageheight:Number;
var imagewidthdistance:Number;
var imageheightdistance:Number;
var imagedistance:Number;
var imageshadow;
var imageshadowcolor;
var imageglow;
var imageglowcolor;
var imageglowstrength;
var imagescale:Number;
var imageenhanced:Boolean = false;
var imagedownload;
var imagecheck:Boolean = false;
var imagetransparent:Boolean = false;
var imagequality:Number = 1;

var xposition:Number;
var yposition:Number;
var zposition:Number;
var deltaX:Number;
var deltaY:Number;
var columns:Number;
var selectplane;
var selectreflection;
var currentPlane:Plane = null;
var distributevertical:Number = 0; 
var distributehorizontal:Number = 0;

var reflection;
var reflectionshadow;
var reflectioncounter:Number = 0;
var reflectdistance:Number;
var reflectionintensity1:Number;
var reflectionintensity2:Number = 0;
var reflectiondensity1:Number = 0;
var reflectiondensity2:Number;
var reflectionDoubleSide:Boolean = false;
var reflectionSmooth:Boolean = true;

var total:Number;

var images:Array = new Array();
var url:Array = new Array();
var target:Array = new Array();

var planeDictionary:Dictionary = new Dictionary();
var planeLink:String = "";
var planeTarget:String = "";
var planedistance:Number = -50;
var planeTweenTime:Number = 2;
var planeTweenEasing:String = "easeOutQuint";
var planesloaded:Number = 0;
      
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

function create3DScene() {
   Initial3D();

   Load3DData();
};

function Initial3D():void {
   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;

   viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true, true);
   viewport.visible = true;
   addChild(viewport);
   
   camera.zoom = camerazoom;
   camera.z = cameradistance;
   
   camera.extra = {
      x: 0,
      y: 0,
      rotationX: 0,
      rotationY: 0,
      camerarotation: 0
   }
};

function Load3DData():void {
   xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
   xmlLoader.load(new URLRequest("XML/Imagedata01.xml"));
};

function LoadXML(e:Event):void {
   xmlData = new XML(e.target.data);
   ParseData(xmlData);
};

function ParseData(data:XML):void {
   total = data.mediadata.length();
   columns = data.mediadata.length();

   imagedistance = xmlData.@imagedistance;
   imagewidth = xmlData.@imagewidth;
   imageheight = xmlData.@imageheight;
   imagescale = xmlData.@imagescale;
   
   imagewidthdistance = imagewidth + imagedistance;
   imageheightdistance = imageheight + imagedistance;

   imageshadow = xmlData.@imageshadow;
   imageshadowcolor = xmlData.@imageshadowcolor;
   imageglow = xmlData.@imageglow;
   imageglowcolor = xmlData.@imageglowcolor;
   imageglowstrength = xmlData.@imageglowstrength;
   imagedownload = xmlData.@imagedownload;
   
   reflection = xmlData.@reflection;
   reflectdistance = xmlData.@reflectiondistance;
   reflectionintensity1 = xmlData.@reflectionalpha;
   reflectiondensity2 = xmlData.@reflectionfactor;
   reflectionshadow = xmlData.@reflectionshadow;
   
   cameraaccelerate = xmlData.@cameraaccelerate;
   cameraangle = xmlData.@cameraangle / 10;
   
   deltaX = imagewidthdistance * columns / 2;
   deltaY = imageheightdistance * 1 / 2;
   
   for(var i:uint = 0; i < total; i++) {
      images[i] = data.mediadata[i].@image.toString();
      url[i] = data.mediadata[i].@url.toString();
      target[i] = data.mediadata[i].@target.toString();
   }

   loadImage();
};

function loadImage():void {
   for(var i:uint = 0; i < total; i++) {
      var myLoader:Loader = new Loader();
      var myRequest:URLRequest = new URLRequest(images[i]);

      myLoader.load(myRequest);
      myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, ImageLoaded);
      
      planeDictionary[myLoader] = i;
   }
};

function ImageLoaded(e:Event):void {
   var loadedObject:Loader = e.target.loader;
   
   var bmpData:BitmapData = new BitmapData(loadedObject.width, loadedObject.height, imagetransparent, 0x000000);
   bmpData.draw(loadedObject);

   var bitmapMaterial:BitmapMaterial = new BitmapMaterial(bmpData);
   bitmapMaterial.name = "BmpMaterial";
   bitmapMaterial.precise = true;
   bitmapMaterial.interactive = true;
   bitmapMaterial.doubleSided = false;
   bitmapMaterial.smooth = true;
 
   var plane:Plane = new Plane(bitmapMaterial, loadedObject.width, loadedObject.height, imagequality, imagequality);
   
   plane.useOwnContainer = true;
   
   if(imageshadow == true) {
       plane.filters = [new DropShadowFilter(0, 45, imageshadowcolor, 1, 8, 8, 3, 1)];
   }

   var index:Number = planeDictionary[loadedObject];
   
   scene.addChild(plane, "plane" + index);
   
   plane.extra = {
      index:new Number, width:new Number, height:new Number, x:new Number, y:new Number, z:new Number
   }

   plane.extra.index = index;
   plane.extra.width = loadedObject.width;
   plane.extra.height = loadedObject.height;
   
   plane.visible = false;
   
   cameraposition = ((imagewidthdistance * Math.ceil(columns/1)) - imagewidthdistance) * 0.5;

   reflectioncounter++;
   
   if(reflection == true) {
      plane.extra.reflection = new Plane();

      var bitmapDataReflection:BitmapData = new BitmapData(loadedObject.width, loadedObject.height, true, 0x000000);

      var matrix:Matrix = new Matrix();
      matrix.createBox(1, -1, 0, 0, loadedObject.height);
      bitmapDataReflection.draw(bmpData, matrix);

      var b2:Bitmap = new Bitmap(bitmapDataReflection);

      matrix.createGradientBox(loadedObject.width, loadedObject.height, Math.PI/2, loadedObject.height);
      var mymask:Shape = new Shape();
      mymask.graphics.lineStyle(0,0,0);
      mymask.graphics.beginGradientFill("linear", [0x000000, 0x000000], [reflectionintensity1, reflectionintensity2], [reflectiondensity1, reflectiondensity2], matrix) ;
      mymask.graphics.lineTo(0, loadedObject.height);
      mymask.graphics.lineTo(loadedObject.width, loadedObject.height);
      mymask.graphics.lineTo(loadedObject.width, 0);
      mymask.graphics.lineTo(0, 0);
      mymask.graphics.endFill();

      mymask.cacheAsBitmap = true;
      b2.cacheAsBitmap = true;

      b2.mask = mymask;

      addChild(b2);
      addChild(mymask);

      var bmp3:BitmapData = new BitmapData(loadedObject.width, loadedObject.height, true, 0x000000);
      bmp3.draw(b2);

      var bm2:BitmapMaterial = new BitmapMaterial(bmp3);
      bm2.precise = false;
      bm2.doubleSided = reflectionDoubleSide;
      bm2.smooth = reflectionSmooth;
      var p2:Plane = new Plane(bm2, 1, 0, 1, 1);
      
      plane.extra.reflection = p2;
      plane.extra.reflection.visible = false;
      
      plane.extra.reflection.useOwnContainer = true;
   
      if(imageshadow == true) {
         if(reflectionshadow == true) {
             plane.extra.reflection.filters = [new DropShadowFilter(0, 45, imageshadowcolor, 1, 8, 8, 3, 1)];
         }
      }
   
      scene.addChild(p2, "reflection" + index);
      
      removeChild(b2);
      removeChild(mymask);
   }
   
   plane.addEventListener(InteractiveScene3DEvent.OBJECT_RELEASE, onPlaneRelease, false, 0, true);
   plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onPlaneRollOver, false, 0, true);
   plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onPlaneRollOut, false, 0, true);
         
   currentPlane = plane;

   planesloaded++
 
    if(planesloaded == total) {
      render3DScene();
      
      distributePlanes();
    }
};
      
function render3DScene():void {
   renderer.renderScene(scene, camera, viewport);
   
   addEventListener(Event.ENTER_FRAME, update3D);
};

function distributePlanes():void {
   for(var i:uint = 0; i < total; i++) {
      var plane:Plane = scene.getChildByName("plane" + i) as Plane;
       var reflectionPlane:Plane = scene.getChildByName("plane" + i) as Plane;
      
      plane.x = distributehorizontal * imagewidthdistance - cameraposition;
      plane.y = distributevertical * imageheightdistance - deltaY + imageheightdistance / 2;

        plane.visible = true;
      
        if(reflection == true) {
         reflectionPlane.extra.reflection.x = plane.x;
         reflectionPlane.extra.reflection.y = -reflectdistance + plane.y;
         
         reflectionPlane.extra.reflection.visible = true;
       }
      
      else {
         scene.removeChild(reflectionPlane.extra.reflection);
      }
   
      distributehorizontal++;
   
       if(distributehorizontal % Math.ceil(columns/1) == 0) {
         distributehorizontal = 0;
         distributevertical++;
         reflection = false;
      }
   }
};

function onPlaneRelease(e:InteractiveScene3DEvent):void {
   navigateToURL(new URLRequest(planeLink), planeTarget);
};

function onPlaneRollOver(e:InteractiveScene3DEvent):void {
   var plane:Plane = e.target as Plane;
   var reflectionPlane:Plane = e.target as Plane;
   
   planeLink = url[plane.extra.index];
   planeTarget = target[plane.extra.index];
   
   if(imageglow == true) {
      plane.filters = [new GlowFilter(imageglowcolor, 1, imageglowstrength, imageglowstrength, 5, 1, false, false)]
   }
   
   buttonMode = true;
};

function onPlaneRollOut(e:InteractiveScene3DEvent):void {
   var plane:Plane = e.target as Plane;
   var reflectionPlane:Plane = e.target as Plane;
   
   if(imageshadow == true) {
       plane.filters = [new DropShadowFilter(0, 45, imageshadowcolor, 1, 8, 8, 3, 1)];
   }
   
   else {
      plane.filters = null;
   }
   
   buttonMode = false;
};

function update3D(e:Event):void {
   if(cameramove == true) {
      var position:Number = stage.mouseX/stage.stageWidth * 2-1;
   
      camera.extra.camerarotation = position * cameraangle;
      camera.extra.x += position * cameraaccelerate;

      camera.x += (camera.extra.x - camera.x)/5;
      camera.y = camera.extra.y - 15;
      
      camera.rotationX = camera.extra.rotationX;
      camera.rotationY += (camera.extra.camerarotation - camera.rotationY + camera.extra.rotationY)/8;
   }
   
   renderer.renderScene(scene, camera, viewport);
};

create3DScene();


Du kannst dir das ja mal anschauen, und wenn du Fragen hast dann melde dich einfach ;)

Gruß Atticus^^
Geändert von Atticus am 28.11.08 um 14:11 Uhr
niquito12#3
Benutzerbild von niquito12
Beiträge: 901
Wohnort: Nether-Bavaria
Registriert: Jun 2008

Themenautor/in

01.12.2008, 14:17

Also ich glaube der untere Teil macht die Reflexion der Planes.

Könntest du mir noch ein paar Antworten geben? Das wär super, es ist nämlich nicht so trivial wie ich dachte. ( Fragen Als Kommentar eingefügt )

ActionScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
  if(reflection == true) {
      plane.extra.reflection = new Plane(); // 1. Hier erstellst du eine neue Ebene die die Reflexion der vorhandenen darstellt. Als extra definierst du es , damit die Reflexion immer an der Quelle hängt.

      var bitmapDataReflection:BitmapData = new BitmapData(loadedObject.width, loadedObject.height, true, 0x000000);// 2. Hier erstellst du die Daten der Reflexion mit den Dimensionen der Quellebene ( die die reflektiert werden soll ) . Die Daten sind momentan noch schwarz.

      var matrix:Matrix = new Matrix(); // 3. Hier erstellst du eine Matrix mit ,drehst die Bitmapdaten um und verschiebst um die Höhe der Quelle nach unten.
      matrix.createBox(1, -1, 0, 0, loadedObject.height);
      bitmapDataReflection.draw(bmpData, matrix);

      var b2:Bitmap = new Bitmap(bitmapDataReflection);// 4. Erstellen einer neuen Bitmap

      matrix.createGradientBox(loadedObject.width, loadedObject.height, Math.PI/2, loadedObject.height);// 5. Erstellen eines neuen Verlaufs und drehen des selben um 90°. Jetzt hast du die Matrix positioniert und den Verlauf drauf.
// Das letzte Attribut verstehe ich nicht ganz. Laut API hast du hier bereits einen Offset der halben Weite drauf. Wieso verschiebst du noch einmal um die Höhe?
     

var mymask:Shape = new Shape(); // 6. Die Maske mit einem 2. Verlauf. Warum machst du das? Was stellt die dar?
      mymask.graphics.lineStyle(0,0,0);
      mymask.graphics.beginGradientFill("linear", [0x000000, 0x000000], [reflectionintensity1, reflectionintensity2], [reflectiondensity1, reflectiondensity2], matrix) ;
      mymask.graphics.lineTo(0, loadedObject.height);
      mymask.graphics.lineTo(loadedObject.width, loadedObject.height);
      mymask.graphics.lineTo(loadedObject.width, 0);
      mymask.graphics.lineTo(0, 0);
      mymask.graphics.endFill();

      mymask.cacheAsBitmap = true;
      b2.cacheAsBitmap = true;

      b2.mask = mymask;

      addChild(b2); // 7. Wieso addest du sie einzeln zur Stage? In b2 sollte ja die Maske schon drinnen sein. Nachher löscht du sie ja wieder.
      addChild(mymask);

      var bmp3:BitmapData = new BitmapData(loadedObject.width, loadedObject.height, true, 0x000000);
      bmp3.draw(b2); // 8. Jetzt hast du die Daten und zeichnest wieder neu damit du sie der Bitmapdata zusammenfügst - Sprich Compositing?

      var bm2:BitmapMaterial = new BitmapMaterial(bmp3);
      bm2.precise = false;
      bm2.doubleSided = reflectionDoubleSide;
      bm2.smooth = reflectionSmooth;
      var p2:Plane = new Plane(bm2, 1, 0, 1, 1); // 9. Die eigentliche Ebene die man zu sehen bekommt und aus den von oben durchgeführten Berechnungen resultiert
     
      plane.extra.reflection = p2; // 10. Neuzuweisung der Plane
      plane.extra.reflection.visible = false;
     
      plane.extra.reflection.useOwnContainer = true
 
      if(imageshadow == true) {
        if(reflectionshadow == true) {
            plane.extra.reflection.filters = [new DropShadowFilter(0, 45, imageshadowcolor, 1, 8, 8, 3, 1)];  // 11. Was bringt der zusätzliche Filter darauf?
        }
      }
 
      scene.addChild(p2, "reflection" + index); // 11. Wie verhalten sich die xyz-Werte der Reflexionsebene beim bewegen des Ursprungs? Wird diese durch das Extraattribut nicht mitgenommen? Bzw wird durch das Extraattribut nicht p2 mit der zu reflektierenden Ebene automatisch mit angefügt?
     
      removeChild(b2);
      removeChild(mymask);
  }
Qt! www.adrianslaboratory.net
Atticus#4
Benutzerbild von Atticus
Beiträge: 1411
Wohnort: Leverkusen
Registriert: Jul 2006

01.12.2008, 14:41

Hallo niquito12^^

Ich versuche mal alle deine Fragen zu beantworten :) zunächst wollte ich dir sagen das du am besten alles so übernimmst, dann funktioniert es auch ;) Aber zu deinem Verständnis habe ich mal hier die Antowrten so gut ich es auch verstehe zu deinen Fragen:

Frage 5: Das muß so sein, Weil man sonnst einen falschen Bereich Spiegeln würde

Frage 6: Die maske ist für den Transparenten Farbverlauf zuständig und nötig

Frage 7: Wenn du das nicht zur Stage addest kann die Maske auch nicht auf die gespiegelte Bitmap gelegt werden

Frage 8: Da wird die Maske in eine Bitmapdata umgewandelt, ist auch nötig

Frage 11: Da verstehe ich jetzt nicht ganz was du meinst, aber die Bewegungen der Reflectionen sind woanders festgelegt

Ich hoffe das konnte dir helfen ;)

Gruß Atticus^^
niquito12#5
Benutzerbild von niquito12
Beiträge: 901
Wohnort: Nether-Bavaria
Registriert: Jun 2008

Themenautor/in

01.12.2008, 14:53

Ah , doch danke, das half mir sehr. Ich will eben auch verstehen was ich code , damit ich es wieder verwenden kann. Da kommen dann weniger Debugfragen *g*.

Zu 11. :
Also bewegst du die Reflexion bei jeder Bewegung mit?
Qt! www.adrianslaboratory.net
Atticus#6
Benutzerbild von Atticus
Beiträge: 1411
Wohnort: Leverkusen
Registriert: Jul 2006

01.12.2008, 14:58

Hallo^^

Freut mich das ich dir helfen konnte ;) Ja, die Reflektionen müßen wie eine normal Plane auch imemr mit bewegt werden wenn du eine Plane verschiebst. Du must dir die Reflektion genauso wie eine normale Plane vorstellen die immer mitbewegt werden muß da sich die Reflektion ja auch zum dazugehörigen Plane bewegen muß ;)

Gruß Atticus^^
Geändert von Atticus am 01.12.08 um 14:59 Uhr
niquito12#7
Benutzerbild von niquito12
Beiträge: 901
Wohnort: Nether-Bavaria
Registriert: Jun 2008

Themenautor/in

01.12.2008, 15:09

Man könnte natürlich eine spezielle Settermethode machen die Plane und Reflexion gleichzeitig ändert. Vielleicht kann ich da noch was verbessern. Aber erst muss ich mal umsetzen. Danke nochmal!
Qt! www.adrianslaboratory.net
Atticus#8
Benutzerbild von Atticus
Beiträge: 1411
Wohnort: Leverkusen
Registriert: Jul 2006

01.12.2008, 15:11

Kein Problem, und viel erfolg ;)

Gruß Atticus^^
niquito12#9
Benutzerbild von niquito12
Beiträge: 901
Wohnort: Nether-Bavaria
Registriert: Jun 2008

Themenautor/in

01.12.2008, 15:49

Wieo speicherst du eigentlich die Reflexion im Extra-Attribut?
Qt! www.adrianslaboratory.net
Atticus#10
Benutzerbild von Atticus
Beiträge: 1411
Wohnort: Leverkusen
Registriert: Jul 2006

01.12.2008, 16:07

Hi^^

Das mache ich dmit ich später die Möglichkeit habe die Reflektionen beliebig positionieren und ansprechen zu können ;)

Gruß Atticus^^

AntwortenRegistrieren Seite1  

Schnellantwort

Du musst registriert sein, um diese Funktion nutzen zu können.

 
Ähnliche Beiträge zum Thema
Partner Webseiten: art-and-law.de  Mediengestalter.info   phpwelt.de   Scubacube.de  
Haftungsausschluss   Datenschutzerklärung   Impressum
© 1999-2021 Sebastian Wichmann - Flashhilfe.de