Share
Das Lernprogramm von Papervision3D Essentials fügt sich nahtlos in das Thema PV3D ein.
In diesem zweiteiligen Lernprogramm erfahren Sie, wie Sie mit der Papervision3D-Engine loslegen können. Anschließend können Sie Ihre Kreation mithilfe eines Anaglypheffekts in Kombination mit einer 3D-Brille aus dem Bildschirm springen lassen.
Haben Sie eine 3D-Brille herumliegen? Hier in Großbritannien veranstaltet Channel 4 eine spezielle 3D-Woche - sieben Tage von Fernsehsendungen, die in 3D ausgestrahlt werden - also viele Leute hier. Lassen Sie uns sie verwenden.
In diesem zweiteiligen Lernprogramm erfahren Sie, wie Sie mit der Papervision3D-Engine beginnen und anschließend Ihre Kreation aus dem Bildschirm springen lassen.
In diesem ersten Teil werden Sie die Grundlagen von PV3D lernen und am Ende etwa Folgendes anzeigen:
… Und im zweiten Teil erfahren Sie mehr über den Anaglypheneffekt für 3D-Brillen und wenden diesen auf das an, was Sie so gemacht haben:
Wenn Sie Flash verwenden, erstellen Sie eine neue ActionScript 3.0 Flash-Datei. Stellen Sie die Größe der Bühne so ein, wie Sie möchten - ich bleibe bei der Standardeinstellung von 550 x 400 Pixel.
Erstellen Sie währenddessen eine neue ActionScript-Datei und speichern Sie sie als Main.as im selben Ordner wie Ihr FLA. Wir werden diese AS-Datei als FLA-Datei verwenden Dokumentenklasse, Klicken Sie also auf ein Leerzeichen in Ihrer FLA-Datei und geben Sie ein Main im Feld "Dokumentklasse" des Eigenschaftenfensters.
(Wenn Sie nicht die Flash-IDE verwenden, erstellen Sie einfach ein neues AS3-Projekt.)
Besuchen Sie die Papervision-Download-Seite. Es gibt viele verschiedene Versionen und verschiedene Dateitypen (zip, swc, mxp). Holen Sie sich einfach die neueste .zip-Datei (sollte es sagen.) Vorgestellt Daneben). Die, die ich benutze, heißt Papervision3D 2.1.920.zip (zur Verwendung mit dem Buch "Papervision3D Essentials").
Extrahieren Sie die soeben heruntergeladene ZIP-Datei an eine beliebige Stelle auf Ihrer Festplatte. Ich mag es, alle verschiedenen Engines, die ich verwende, im selben Ordner zu behalten, aber es liegt an Ihnen.
Flash muss wissen, wo Sie Papervision extrahiert haben, bevor es verwendet werden kann. Wir benutzen ein Klassenpfad dazu: klick Bearbeiten> Voreinstellungen, wählen ActionScript, dann klick ActionScript 3.0-Einstellungen… .
Klicken Sie im angezeigten Feld auf das kleine "Fadenkreuz" -Symbol, suchen Sie den Ordner, in den Sie Papervision entpackt haben, und klicken Sie auf OK. Klicken Sie in den anderen Feldern auf OK, bis Sie zur FLA zurückkehren.
Wenn Sie die Flash-IDE nicht verwenden, müssen Sie dies anders einstellen. In FlashDevelop sollten Sie beispielsweise auf klicken Extras> Globale Klassenpfade.
In Papervision müssen alle Ihre 3D-Objekte in einem platziert werden Szene. Es ist ein bisschen wie die Bühne in regulärem ActionScript. Bevor wir also etwas tun, müssen wir eine Scene3D Objekt, das alles andere enthält.
Wechseln Sie zu Ihrer Main.as-Datei. Fügen wir schnell den Basiscode für jede Dokumentenklasse hinzu:
package import flash.display.MovieClip; public class Main erweitert MovieClip öffentliche Funktion Main ()
Das Scene3D-Objekt befindet sich in org.papervision3d.scenes.Scene3D, also müssen wir einführen dann erstelle ein neues öffentlich var die Szene halten und schließlich das eigentliche Szenenobjekt erstellen: (Zeilen 4, 8 und 12)
package import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; public class Main erweitert MovieClip public var scene: Scene3D; öffentliche Funktion Main () Szene = neue Szene3D ();
Lassen Sie uns zunächst einen großen, einfachen Würfel in unserer Szene erstellen.
Wir folgen den gleichen Schritten wie oben, um es zu erstellen, und fügen es dann unserer Szene hinzu: (Zeilen 5, 10, 15, 16)
package import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; import org.papervision3d.objects.primitives.Cube; public class Main erweitert MovieClip public var scene: Scene3D; Öffentlicher Var-Würfel: Würfel; öffentliche Funktion Main () Szene = neue Szene3D (); Würfel = neuer Würfel (); scene.addChild (Cube);
Beachten Sie, dass wir "addChild ()" verwenden, um den Cube zur Szene hinzuzufügen, genau wie beim Hinzufügen eines MovieClips zur Bühne.
Der obige Code gibt einen Fehler aus, wenn Sie versuchen, es auszuführen. Das liegt daran, dass wir dem Würfel nicht gesagt haben, wie seine Flächen aussehen sollen.
Papervision verwendet Materialien um zu beschreiben, wie eine Oberfläche aussieht. Mit a können wir ein sehr einfaches, einfarbiges Material herstellen Farbmaterial:
var grayMaterial: ColorMaterial = neues ColorMaterial (0xCCCCCC);
Die "0xCCCCCC" steht für die Farbe Grau; Nimm einfach den Farbcode einer beliebigen Farbe und ersetze den # mit 0x:
Da ein Würfel sechs Gesichter hat, müssen wir ihm sechs Materialien geben. Dazu setzen wir alle sechs in eine Liste:
var materialsList: MaterialsList = neue MaterialsList (); materialsList.addMaterial (grayMaterial, "front"); materialsList.addMaterial (grayMaterial, "zurück"); materialsList.addMaterial (grayMaterial, "left"); materialsList.addMaterial (grayMaterial, "right"); materialsList.addMaterial (grayMaterial, "oben"); materialsList.addMaterial (grayMaterial, "bottom");
… Und übergeben Sie diese Liste dann an den Cube, wenn Sie sie erstellen:
Cube = neuer Cube (Materialliste);
Ihr ganzer Code sollte also so aussehen: (Vergessen Sie nicht das einführen Aussagen!)
package import flash.display.MovieClip; import org.papervision3d.scenes.Scene3D; import org.papervision3d.objects.primitives.Cube; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.materials.utils.MaterialsList; public class Main erweitert MovieClip public var scene: Scene3D; Öffentlicher Var-Würfel: Würfel; public function Main () var grayMaterial: ColorMaterial = neues ColorMaterial (0xCCCCCC); var materialsList: MaterialsList = neue MaterialsList (); materialsList.addMaterial (grayMaterial, "front"); materialsList.addMaterial (grayMaterial, "zurück"); materialsList.addMaterial (grayMaterial, "left"); materialsList.addMaterial (grayMaterial, "right"); materialsList.addMaterial (grayMaterial, "oben"); materialsList.addMaterial (grayMaterial, "bottom"); Szene = neue Szene3D (); Cube = neuer Cube (Materialliste); scene.addChild (Cube);
Wir haben also keine Fehler, aber um etwas zu sehen, müssen wir eine hinzufügen Kamera zur Szene Wir werden alles durch die "Linse" der Kamera sehen.
Das Hinzufügen einer Kamera ist genauso einfach wie das Hinzufügen eines Würfels - tatsächlich ist es einfacher, da wir sie nicht zur Szene hinzufügen müssen:
import org.papervision3d.cameras.Camera3D;
öffentliche Var-Kamera: Camera3D;
Szene = neue Szene3D (); Cube = neuer Cube (Materialliste); scene.addChild (Cube); Kamera = neue Kamera3D (); // Dies ist die neue Zeile in Main ()
Jetzt ist eine Kamera in der Szene, aber sie ist an keinen Ausgang angeschlossen, so dass wir den Würfel immer noch nicht sehen können!
Standardmäßig befindet sich der Würfel genau in der Mitte der Szene (bei x = 0, y = 0, z = 0), und die Kamera befindet sich 1000 Einheiten von dort entfernt (bei x = 0, y = 0, z = -1000).
Wie kann das Bild, das die Kamera sieht, im Flash Player-Fenster angezeigt werden??
Die Antwort ist, wir verwenden ein Sichtfenster. Dies ist ein DisplayObject-Typ wie ein MovieClip, also können wir es zur Bühne hinzufügen. Wir können aber auch Papervision machen machen (d. h. Zeichnen) Die Ansicht der Kamera auf dieses Ansichtsfenster - es ist ein bisschen so, als würde ein Künstler zeichnen, was er durch ein Kameraobjektiv sehen kann, dann seine Zeichnung nehmen und an einen Fernseher kleben. Außer schneller.
Daher müssen wir ein Ansichtsfenster und einen Renderer erstellen:
import org.papervision3d.view.Viewport3D; import org.papervision3d.render.BasicRenderEngine;
public var viewport: Viewport3D; Öffentlicher Var-Renderer: BasicRenderEngine;
// Dies am Ende von Main () setzen viewport = new Viewport3D (); viewport.autoScaleToStage = true; // Dadurch wird das Ansichtsfenster so groß wie die Bühne. addChild (viewport); Renderer = new BasicRenderEngine ();
Jetzt müssen wir nur noch den Renderer für das eigentliche Rendering einsetzen. Dazu muss die Szene, die Kamera und das Ansichtsfenster bekannt sein:
Renderer.RenderScene (Szene, Kamera, Darstellungsbereich);
Zu guter Letzt! Endlich können wir die SWF testen. Trommelwirbel bitte…
Unglaublich! Erstaunlich! OK gut, es ist eigentlich ziemlich lahm. Wie können wir überhaupt sagen, dass es ein Würfel ist? Es sieht aus wie ein Quadrat.
Wenn wir den Würfel drehen, können wir feststellen, ob es sich tatsächlich um einen Würfel handelt oder nicht.
Da der Würfel dreidimensional ist, ist das Wort "drehen" etwas verwirrend - welche Richtung meinen wir? Wir müssen angeben, ob wir uns um die X-Achse, die Y-Achse oder die Z-Achse drehen.
Das Würfel Objekt hat drei Eigenschaften, die wir verwenden können, um dies zu definieren, genannt (nicht überraschend) RotationX, rotationY und rotationZ. Lassen Sie uns ein paar von ihnen ändern:
Szene = neue Szene3D (); Cube = neuer Cube (Materialliste); cube.rotationX = 25; // Rotation wechseln cube.rotationY = 40; // Rotation wechseln scene.addChild (Cube); Kamera = neue Kamera3D ();
Es ist besser, aber da alle Gesichter genau dieselbe Farbe haben, verschmelzen sie einfach miteinander. Lass uns das reparieren.
Statt grau werde ich die Seiten mit dem ActiveTuts + -Logo bemalen.
Wenn Sie die Flash-IDE verwenden, erstellen Sie einen neuen Movieclip und zeichnen oder fügen Sie das Bild ein, das Sie verwenden möchten. Ich habe das Logo in die FLA-Bibliothek im Reißverschluss aufgenommen.
Klicken Sie mit der rechten Maustaste auf Ihren Movieclip und wählen Sie Eigenschaften. Aktivieren Sie "Export für ActionScript" und geben Sie ihm einen Klassennamen. Dadurch können Sie mit Code darauf zugreifen. (Wenn Sie nicht die Flash-IDE verwenden, enthält die ZIP-Datei auch eine SWC mit einem MovieClip namens ActiveTutsLogo, das Sie verwenden können. Sie können auch einen neuen MovieClip im Code erstellen und Ihr Bild hinzufügen. Ich gehe nicht dazu gehen Sie hier aber auf Details ein.)
Anstelle einer Farbmaterial wir werden eine verwenden MovieMaterial, Anstatt eine Farbe anzugeben, geben wir einen Movieclip an. So ersetzen Sie dies:
var grayMaterial: ColorMaterial = neues ColorMaterial (0xCCCCCC); var materialsList: MaterialsList = neue MaterialsList (); materialsList.addMaterial (grayMaterial, "front"); materialsList.addMaterial (grayMaterial, "zurück"); materialsList.addMaterial (grayMaterial, "left"); materialsList.addMaterial (grayMaterial, "right"); materialsList.addMaterial (grayMaterial, "oben"); materialsList.addMaterial (grayMaterial, "bottom");
… mit diesem:
var logoMaterial: MovieMaterial = neues MovieMaterial (neues ActiveTutsLogo ()); // Ersetzen Sie "ActiveTutsLogo" oben durch den Klassennamen Ihres Movieclips. var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (logoMaterial, "Vorderseite"); materialsList.addMaterial (logoMaterial, "zurück"); materialsList.addMaterial (logoMaterial, "left"); materialsList.addMaterial (logoMaterial, "rechts"); materialsList.addMaterial (logoMaterial, "oben"); materialsList.addMaterial (logoMaterial, "bottom");
Sie müssen auch das MovieMaterial importieren:
import org.papervision3d.materials.MovieMaterial;
Testen Sie es noch einmal:
Nun, es funktioniert, aber es sieht ein bisschen verbeult aus.
Das "verbeulte" Aussehen ist, weil Papervision standardmäßig so eingestellt ist, dass Dinge schnell und nicht genau gezeichnet werden. Ich möchte sicherstellen, dass dieses Lernprogramm auf langsameren Computern ausgeführt wird. Ich werde es dabei belassen, aber wie Sie es verbessern können:
Wenn Sie den Cube erstellen, können Sie ihn übergeben, um die Anzahl der Würfel festzulegen Segmente Jedes Gesicht ist in aufgeteilt. Je mehr Segmente Sie auswählen, desto genauer wirkt der Würfel - aber desto langsamer wird er gerendert.
Ich habe festgestellt, dass 10 eine gute Anzahl von Segmenten ist, die in jede Richtung verwendet werden können. So sieht der Code dafür aus:
Würfel = neuer Würfel (materialsList, 500, 500, 500, 10, 10, 10);
Der fünfte, sechste und siebte Parameter definieren die Anzahl der in jeder Richtung verwendeten Segmente. Um sie einzustellen, müssen wir jedoch alle Parameter angeben Vor der fünfte auch.
Wir geben bereits den ersten Parameter an - das ist die Materialliste. Der zweite, dritte und vierte Parameter definieren die Breite, Tiefe und Höhe des Würfels. Diese sind standardmäßig auf 500 eingestellt, daher habe ich sie hier beibehalten.
Wenn Sie die obige Codezeile verwenden, sieht Ihr Cube folgendermaßen aus:
Viel ordentlicher!
Wir können einen normalen MovieClip drehen, indem wir ihn vergrößern Drehung Eigenschaft für jeden Frame - und natürlich können wir dasselbe mit dem Cube und seinen RotationsX / Y / Z-Werten machen.
Erstellen Sie einen ENTER_FRAME-Ereignislistener, der jeden Frame ausführt:
import flash.events.Event;
// am Ende von Main () addEventListener (Event.ENTER_FRAME, onEnterFrame);
// als neue Funktion // innerhalb der Main-Klasse, aber außerhalb der Main () - Funktion public function onEnterFrame (evt: Event): void cube.rotationX = cube.rotationX + 5; WürfelrotationY = WürfelrotationY + 5;
Dadurch wird der Würfel bei jedem Frame etwas mehr gedreht. Wenn Sie also jetzt die SWF-Datei testen, bleibt der Würfel vollkommen still. Huh?
Denken Sie an den Maler zurück. Wir schauen immer noch auf sein altes Bild - wir brauchen ihn, um uns in jedem Frame ein neues zu zeichnen, sonst sehen wir keine Änderungen!
Ändern Sie also die onEnterFrame () - Funktion:
öffentliche Funktion onEnterFrame (evt: Event): void cube.rotationX = cube.rotationX + 5; WürfelrotationY = WürfelrotationY + 5; Renderer.RenderScene (Szene, Kamera, Darstellungsbereich);
Schau es dir jetzt an:
Ein Würfel ist großartig, aber da Roman Ihnen bereits gezeigt hat, wie Sie das mit Away3D machen können, gehen wir noch ein bisschen weiter.
Fügen wir noch ein paar hinzu, um eine horizontale Würfellinie zu bilden. Wir können ein einfaches verwenden zum Schleife, um das zu tun; Ersetzen Sie einfach diesen Code:
Cube = neuer Cube (Materialliste); cube.rotationX = 25; // Rotation wechseln cube.rotationY = 40; // Rotation wechseln scene.addChild (Cube);
… mit diesem:
für (var i: int = -1; i <= 1; i++ ) cube = new Cube( materialsList ); cube.x = i * 350; cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube );
Beachten Sie, dass die x-Position jedes Würfels davon abhängt, wie weit wir uns durch die Schleife bewegen. Wenn Sie dies ausführen, erhalten Sie Folgendes:
Whoops, die Würfel sind zu nahe beieinander. Wir können sie verkleinern, um das zu umgehen; einfach das ändern Rahmen Eigenschaft jedes Würfels:
für (var i: int = -1; i <= 1; i++ ) cube = new Cube( materialsList ); cube.x = i * 350; cube.scale = 0.40; //make the cubes 40% of original size cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube );
Damit ist das Kreuzungsproblem behoben, aber nur einer unserer Würfel dreht sich. Woher?
Es ist wegen der Würfel Variable bezieht sich immer nur auf die zuletzt Cube erstellt - und unsere Funktion onEnterFrame () ändert nur die Rotationen dieses einen Cubes.
Um dies zu beheben, benötigen wir ein Array. So wie unsere Materialliste mehrere Materialien gespeichert hat, speichert unser Array mehrere Würfel.
public var cubeArray: Array;
cubeArray = new Array (); // das neue Array für erstellen (var i: int = -1; i <= 1; i++ ) cube = new Cube( materialsList ); cube.x = i * 350; cube.scale = 0.40; cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube ); cubeArray.push( cube ); //add the new cube to the array
("Push" bedeutet nur "am Ende der Liste hinzufügen".)
Da sich nun jeder Würfel im Array befindet, können wir jedes Frame einzeln durch das Array ziehen und jeden von ihnen drehen:
public function onEnterFrame (evt: Event): void for each (Würfel in cubeArray) cube.rotationX = cube.rotationX + 5; WürfelrotationY = WürfelrotationY + 5; renderer.renderScene (Szene, Kamera, Darstellungsbereich);
Die "für jede" Schleife macht das Würfel Variable bezieht sich nacheinander auf jeden Cube und nicht auf den zuletzt erstellten Cube. Hier ist das Ergebnis:
Erfolg!
Wir haben eine Reihe von Würfeln gemacht, sodass ein Quadrat nicht schwierig sein wird. Anstatt nur drei Würfel zu machen, machen wir drei Zeilen von drei Würfeln.
Um dies zu erreichen, können wir eine Schleife innerhalb einer Schleife wie folgt verwenden:
für (var i: int = -1; i <= 1; i++ ) for ( var j:int = -1; j <= 1; j++ ) //loop inside a loop cube = new Cube( materialsList ); cube.x = i * 350; cube.y = j * 350; //don't forget to change j! cube.scale = 0.40; cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube ); cubeArray.push( cube ); //don't forget this closing bracket either
Testen Sie es aus:
Nett. Beachten Sie, dass wir den Code in onEnterFrame () überhaupt nicht ändern mussten. Die Schleife, die jeden Frame ausführt, dreht nur jeden Würfel innerhalb des Arrays - und wir schieben immer noch jeden einzelnen Würfel auf das Array.
Nun, es wäre enttäuschend, an einem Platz Halt zu machen, oder? Immerhin ist dies ein 3D-Tutorial.
Ich denke, Sie können selbst herausfinden, wie Sie diesen Schritt machen. Aber wenn Sie vergleichen wollen:
für (var i: int = -1; i <= 1; i++ ) for ( var j:int = -1; j <= 1; j++ ) for ( var k:int = 0; k <= 2; k++ ) cube = new Cube( materialsList ); cube.x = i * 350; cube.y = j * 350; cube.z = k * 350; cube.scale = 0.40; cube.rotationX = 25; cube.rotationY = 40; scene.addChild( cube ); cubeArray.push( cube );
Ich war hier ein bisschen hinterlistig. Ich habe k bei 0 anstatt bei -1 begonnen, weil sonst die vorderste Würfelschicht zu nahe an der Kamera wäre. Natürlich können Sie die gewünschten Zahlen verwenden.
Hey, haben Sie bemerkt, dass der "verbeulte" Effekt im Grunde verschwunden ist, seit wir kleinere Würfel verwenden?
Genial!
Dies ist nur ein Kratzer an der Oberfläche von Papervision3D. Bevor wir uns mit der 3D-Brille beschäftigen, können Sie ein paar Dinge ausprobieren, mit denen Sie experimentieren könnten:
Im zweiten Teil erfahren Sie, wie Sie Ihre Szene mit einer 3D-Brille arbeiten lassen. Wenn Sie also ein Paar haben, werfen Sie sie nicht weg!
In der Zwischenzeit vielen Dank, dass Sie den ersten Teil gelesen haben. Ich hoffe du fandest es nützlich. Wenn Sie Fragen haben oder etwas verwirrend war, schreiben Sie bitte einen Kommentar.
Accentsconagua