Verfügbare Informationen zu "3D in Flash"
Qualität des Beitrags: Beteiligte Poster: wolf06 Forum: Wolf06Movies aus dem Unterforum: Flash 8 Tutorials Antworten: 1 Forum gestartet am: Freitag 13.10.2006 Sprache: deutsch Link zum Originaltopic: 3D in Flash Letzte Antwort: vor 16 Jahren, 4 Monaten, 31 Tagen, 6 Stunden, 33 Minuten
Alle Beiträge und Antworten zu "3D in Flash"
Re: 3D in Flash
wolf06 - 27.10.2006, 20:523D in Flash
3D in Flash
Du kennst das. Du gehst grad auf der Straße und ein hübsches Mädchen kommt vorbei. Sie spricht dich an, ihr kommt ins gespräch, aber irgendwie fehlt dem Gespräch die tiefe. Se merkt schnell woran das liegt: du bist ganz platt und sie verschwindet schnell.
Doch dieer Tutorial schafft abhilfe! Wir lernen heute wie wir in Flash 3-Dimensional werden - oder eher wirken.
Ein 3D-Modell
...besteht aus Polygonen. Diese Polygone sind entweder dreiecke oder vierecke, also eigentlich nichts besonderes.
Wie du siehst setzt sich diese Kugel aus Vierecken zusammen. Nun gut, Dreiecke sind kein Problem. Die kann man ganz einfach auf den Bildschirm zeichnen. Schauen wir uns so ein Dreieck mal genauer an:
Wow, ein Dreieck. Ein dreieck hat 3 Eckpunkte (man glaubt es kaum) mit jeweils 2 Korrdinaten: X und Y. Wir wollen aber in 3d arbeiten! Dazu fehlt uns noch die Z-Koordinate, die nach hinten geht.
HA! Die gibt es nicht. Auf jeden Fall nicht am Computer. Man kann sie nur simulieren und muss dann das ganze weder auf X- und Y-Koordinaten umrechnen, sodass es auf den Bildschirm gepackt werden kann. Eleganterweise interessiert das diejenigen herzlich wenig, die "nur" modellieren wollen. Doch wer in 3D programmieren will, wird so vor eine Herausforderung gestellt.
Dazu muss man eine sog. Viewplane benutzen. Diese fängt dann die 3D-Daten auf dem Bildschirm ein, die man sehen müsste (so kann man auch die Polygone, die außerhalb des Bildschirms sind nicht mit rendern, um rechenzeit zu sparen).
Diese Viewplane setzen wir so zusammen, wie wir alle in der Schule gelernt haben, in 3D zu zeichnen.
Wir gehen die vollen Werte auf der X und Y- achse, aber nur die halben auf der Z-Achse (z.B. jeweils 1 cm, auf der ZAchse dann aber nur 0,5cm). So simulieren wir einen Blickwinkel von 45° vorn. Reguliet man diesen Wert, so ändert man den Blickwinkel (bzw. dazu könnte man auch das Objekt bzw. alle Objekte drehen). Somit liegt der Punkt A(1,1,1) in etwa bei 1,3|1,3 (2-Dimensional betrachtet).
Schauen wir uns nochmal das Dreieck oben an. Dort sehen wir, wie so ein Polygon aufgebaut ist. Es besteht aus 3 (oder 4) Eckpunkten und eben dem Zeugs dazwischen (dieses "Zeugs" heißt Vertex). Wir müssen also die Koordinaten der Punkte speichern und immer speichern, welche Punkte zu einem Polygon zusammengefasst werden.
Das sollte es zur Theorie gewesen sein, ich werde im laufe des Tutorials hier und da nochmal was anmerken. Wer nciht alles auf Anheb verstanden hat sollte sich woanders noch schlau machen.
Grundfunktionen
Wie wir bereits wissen ist ein 3D-Modell aus Dreiecken und Vierecken zusammengebaut. Also brauchen wir zuerst 2 Funktionen dazu: eine für ein Dreieck und eine für ein Viereck.
Flash gibt uns dazu netterweise einige Funtkionen, mit denen wir Formen zeichnen können:
beginFill (fillcolor, fillalpha); - Sagt an, dass die nachfolgend gezeichnete Form gefüllt werden soll. Die Parameter erklären sich selbst.
lineStyle (dicke, linecolor, alpha); - Die Einstellungen für die Linien, die gezeichnet werden
moveTo (x1, y1); - Setzt die Startposition der Form an. Also eine Ecke des Dreiecks z.B.
lineTo (x2, y2); - Zeichnet eine Linie von der Startposition zu den Angegebenen Koordinaten und setzt diese als Startposition fest.
endFill(); - Gibt an dass ab jetzt nix mehr fgefüllt werden soll (oder anders gefüllt)
Na daraus können wir uns nette, dynamische Funktionen basteln:
PHP-Code:
function dreieck (fill, fillcolor, fillalpha, linecolor, dicke, alpha, x1,x2,x3, y1, y2, y3)
{ // Diese Funktion zeichnet ein Dreieck
if(fill) beginFill (fillcolor, fillalpha);
lineStyle (dicke, linecolor, alpha);
moveTo (x1, y1);
lineTo (x2, y2);
lineTo (x3, y3);
lineTo (x1, y1);
if(fill) endFill();
}
function viereck (fill, fillcolor, fillalpha, linecolor, dicke, alpha, x1,y1,x2,y2,x3,y3,x4,y4)
{ // Diese Funtkion zeichnet ein Viereck
if(fill) beginFill (fillcolor, fillalpha);
lineStyle (dicke, linecolor, alpha);
moveTo (x1, y1);
lineTo (x2, y2);
lineTo (x3, y3);
lineTo (x4, y4);
lineTo (x1, y1);
if(fill) endFill();
}
Ich denke der Code ist selbsterklärend, zumal ich die einzelnen Funtkionsaufrufe ja schon vorher erklärt habe. Das ganze ist vielleicht etwas unübersichtlich, da den Funtktionen so viele Werte übergeben werden.
Jetzt brauchen wir eine Funktion, die, wie oben erläutert, eine 3D-Koordinate in eine 2D-Koordinate umrechnet.
Na, wenn das man nicht einfach ist:
PHP-Code:
perspektive = 0.25;
function Koord3Dzu2D (x, y, z, zoffset)
{ // Rechnet 3D-Koordinaten zu 2D-Koordinaten um
if(z < 0) { // Wenn der Z-Wert negativ ist
x *= (1+((z*_root.perspektive)/100000)); // Skaliere die Koorinaten ein wenig herunter
y *= (1+((z*_root.perspektive)/100000)); // Das schafft perspektive :)
}
erebnis = new Object();
ergebnis.neux = x + Math.sqrt((zoffset*zoffset)/2);
ergebnis.neuy = y + Math.sqrt((zoffset*zoffset)/2);
return ergebnis;
}
zoffset ist dabei die größe des Schrittes, um den wir auf der z-Achse verschieben sollen, da dieser ja je nach Blickwinkel anders ist. Das ist in unserem Fall ersteinmal 0.5, denn: 45/90 = 0.5 (Blickwinkel/90).
Kommen wir noch einmal zurpck zum Grundgerüst eines Polygons. Wie bereits gesagt ist ein Polgon das Resultat von mehrern Daten. Da sind zum einen die (3D-) Koordinaten der Punkte. Dann sind da noch die errechneten 2D-Koordinaten und am Ende noch eine Liste die unserem Programm sagt, welche Punkte jeweils ein Polygon bilden. Somit müssten wir riesige Arrays haben um ein Objekt zu speichern.
Ich zeig euch der einfachheit wegen einfach mal diese Arrays am Beispiel eines Würfels:
PHP-Code:
anzahl_vertieces = 6; // 6 Seiten hat ein würfel
würfel = new Array();
obj = new Array();
vertices_map = new Array();
for(d = 0; d <= 8; d++) würfel[d] = new Object();
for(d = 0; d <= 8; d++) obj[d] = new Object();
for(i = 0; i < anzahl_vertieces; i++) vertices_map[i] = new Object();
////////////////////// KOORDINATEN DES WÜRFELS //////////////////////////
// Eine Zeile = 1 Punkt
würfel[0].x = -100; würfel[0].y = -100; würfel[0].z = -100;
würfel[1].x = 100; würfel[1].y = -100; würfel[1].z = -100;
würfel[2].x = -100; würfel[2].y = 100; würfel[2].z = -100;
würfel[3].x = 100; würfel[3].y = 100; würfel[3].z = -100;
würfel[4].x = -100; würfel[4].y = -100; würfel[4].z = 100;
würfel[5].x = 100; würfel[5].y = -100; würfel[5].z = 100;
würfel[6].x = -100; würfel[6].y = 100; würfel[6].z = 100;
würfel[7].x = 100; würfel[7].y = 100; würfel[7].z = 100;
würfel[8].x = 275; // Im achten Wert speichern wird die Koordinaten des Mittelpunktes
würfel[8].y = 200; // ums dann in Welt-Koordinaten umzurechnen
// Eine Zeile = 1 Polygon
vertices_map[0].m1 = 0; vertices_map[0].m2 = 1; vertices_map[0].m3 = 5; vertices_map[0].m4 = 4;
vertices_map[1].m1 = 2; vertices_map[1].m2 = 3; vertices_map[1].m3 = 7; vertices_map[1].m4 = 6;
vertices_map[2].m1 = 4; vertices_map[2].m2 = 5; vertices_map[2].m3 = 7; vertices_map[2].m4 = 6;
vertices_map[3].m1 = 0; vertices_map[3].m2 = 1; vertices_map[3].m3 = 3; vertices_map[3].m4 = 2;
vertices_map[4].m1 = 5; vertices_map[4].m2 = 1; vertices_map[4].m3 = 3; vertices_map[4].m4 = 7;
vertices_map[5].m1 = 6; vertices_map[5].m2 = 2; vertices_map[5].m3 = 0; vertices_map[5].m4 = 4;
Der Wert im "vertices_map"-Array ist jeweils nur die Stelle des Punktes im Punkte-Array. Ich hab euch mal was vorbereitet:
Nach ein bisschen überlegen sollte das eigentlich kein Problem mehr sein. Jetzt kommen wir zu einer Funktion, an die wir dieses Objekt schicken und die dann selbstständig das Rendern übernimmt (sprich: entscheidet ob Dreieck oder Viereck und alle Polygone durchgeht und zeichnet).
PHP-Code:
function rendern(vertices_map, anzahl_vertieces, obj)
{ // Malt ein Objekt
for(i = 0; i < anzahl_vertieces; i++) {
if(vertices_map[i].m4) { // Ist es ein Viereck, also gibt es einen 4ten Punkt?
// wenn ja, dann male ein Viereck
viereck(true, 0x00FF00, 30, 0x000000, 1, 100, obj[vertices_map[i].m1].x,obj[vertices_map[i].m1].y,obj[vertices_map[i].m2].x,obj[vertices_map[i].m2].y,obj[vertices_map[i].m3].x,obj[vertices_map[i].m3].y,obj[vertices_map[i].m4].x,obj[vertices_map[i].m4].y);
} else { // Wenn nein male Dreieck
dreieck(true, 0x00FF00, 30, 0x000000, 1, 100, obj[vertices_map[i].m1].x,obj[vertices_map[i].m1].y,obj[vertices_map[i].m2].x,obj[vertices_map[i].m2].y,obj[vertices_map[i].m3].x,obj[vertices_map[i].m3].y);
}
}
}
Ich denke das einzig komplizierte an dieser Funtkion sind die Verschachtelten Arrays. Wir haben ja im Array vertices_map gespeichert, welche Punkte jeweils ein Polygon bilden, und im Array obj (bzw. würfel) haben wir die Koordinaten der Punkte gespeichert. Sprich: wir schnappen uns den Namen des Punktes und nehmen die entsprechende Stelle aus dm Punkte-Array um unserer Funtkion die Koordinaten zu übermitteln (einfach mal Werte einsetzen und man sieht wie es funtkioniert).... auch wenn das einige Zeilen unserer Funtkion extrem lang macht (hier im Texteditor ca. 3 Zeilen)...
Sodele, packe diese Zeilen noch dazu und du wirst, wenn du das ganze ausführst, einen 3D-Würfel sehen:
PHP-Code:
for(i = 0; i <= (würfel.length-1); i++) {
obj[i] = Koord3Dzu2D (würfel[8].x+würfel[i].x, würfel[8].y+würfel[i].y, würfel[i].z, 0.5);
}
rendern(vertices_map, anzahl_vertieces, obj);
Das ganze sieht dann so aus:
__________________
(\ /)
(O.o) copy bunny into ur sig
(u u) 2 help him achieve world domination.
Mit folgendem Code, können Sie den Beitrag ganz bequem auf ihrer Homepage verlinken
Weitere Beiträge aus dem Forum Wolf06Movies
Ähnliche Beiträge wie "3D in Flash"
ÖGD Bundesgebiet: News-Flash - Uwe Gerber (Dienstag 16.05.2006)
Flash Board - spirti (Sonntag 29.05.2005)
Macromedia Flash MX 2004 - Mr. Hex (Dienstag 09.11.2004)
Ein Flash zur Hebung der Stimmung. - Amat (Dienstag 26.07.2005)
Flash - mandor (Mittwoch 10.05.2006)
WESTBAM im Flash - T@m (Donnerstag 16.02.2006)
vente privee... - prinzessin (Donnerstag 10.04.2008)
Flash Strike - starbuck77 (Dienstag 19.09.2006)
Flash Games - Pimperpeter (Sonntag 08.08.2004)
Flash - M4sterSn00b (Donnerstag 30.06.2005)
