Pastor Pixel Tipps Tutorial Anleitungen Hilfe

3D mit Actionscript 3

Es gibt verschiedene Arten 3D Inhalte mit Actionscript darzustellen. Für einfache grundlegende Darstellungen gibt es einmal die AS3 Möglichkeiten von Actionscript. Will man komplexere Dinge darstellen kann man auf verschiedene Frameworkszurückgreifen, beispielsweise Papervision 3D, welche die Funktionalitäten und Möglichkeiten erweitern. In der Flash IDE gibt es auch ein paar 3D Werkzeuge für die Positionierung und Drehung im Raum.

Hilfe bei Adobe
in derAdobe Hilfe ist alles sehr schön erklärt hier einige wichtige Punkte:

Um ein zweidimensionales in ein dreidimensionales Anzeigeobjekt zu konvertieren, können Sie seine z-Eigenschaft explizit auf einen numerischen Wert setzen.

leaf.x = 100; leaf.y = 50; leaf.z = -30;

Auch die Drehung im 3dimensionalen Raum lässt sich definieren:

myMc.rotationX=20;
myMc.rotationY=20;
myMc.rotationZ=20;

Drei wichtige Begriffe (siehe Adobe Hilfe)

Sichtfeld

root.transform.perspectiveProjection.fieldOfView=180;

Dadurch können Sie erreichen, dass ein dreidimensionales Anzeigeobjekt, das sich dem Betrachter nähert, größer erscheint und ein Objekt, das sich entfernt, kleiner. Bei einem niedrigen fieldOfView-Wert werden die Objekte nur wenig verkleinert und scheinen sich nur leicht in den Hintergrund zu bewegen. Bei einem hohen fieldOfView-Wert werden die Objekte stärker verzerrt und auch der Eindruck von Bewegung ist stärker. Der Höchstwert von 180 Grad resultiert in einem extremen Fischauge-Kameralinseneffekt.

Projektionszentrum

	root.transform.perspectiveProjection.projectionCenter=new Point(mouseX,mouseY);

Der Fluchtpunkt auf den scheinbar alle perspektivischen Linien führen.

Brennweite

root.transform.perspectiveProjection.focalLength=mouseX;

Die Eigenschaft focalLength repräsentiert die Brennweite, also den Abstand zwischen dem Standort des Betrachters (0,0,0) und dem Bildschirm. Eine lange Brennweite ist wie ein Teleobjektiv mit Nahsicht und verkürzten Entfernungen zwischen den Objekten. Eine kurze Brennweite ist wie ein Weitwinkelobjektiv.

Im folgenden Beispiel müssen ein paar MCs mit 3D Eigenschaften hinzugefügt werden. Außerdem sollte auch der Hintergrund nicht leer sein, da sonst MouseMove nicht funktioniert.



function moveCenter(evt:MouseEvent):void
{
root.transform.perspectiveProjection.projectionCenter=new Point(mouseX,mouseY);
}

this.addEventListener(MouseEvent.MOUSE_MOVE, moveCenter);

Anordnung auf der Z-Achse

Auch dieses Beispiel gibt es in ähnlicher Form auf der oben erwähnten Adobe Seite. Es geht um die Anordnung auf der Z-Achse, gemäß der 3D Position im Raum. Vorraussetzung ist eine MovieClip Klasse namens Ellipse.

var faces:Array = new Array();

for (var i:uint=0; i<10; i++) {
	var ellip:Ellipse = new Ellipse();
	ellip.x=100;
	ellip.y=50*i+30;
	ellip.z=50*i+20;
	faces.push(ellip);
	addChild(ellip);
}


function ReorderChildren(evt:MouseEvent):void
{
		root.transform.perspectiveProjection.projectionCenter=new Point(mouseX,mouseY);

	for (var ind:uint = 0; ind < faces.length; ind++) {
		faces[ind].z=faces[ind].transform.getRelativeMatrix3D(root).position.z;
		trace(faces[ind].transform.getRelativeMatrix3D(root).position.z);
		this.removeChild(faces[ind]);
	}
	faces.sortOn("z", Array.NUMERIC | Array.DESCENDING);
	for (ind = 0; ind < faces.length; ind++) {
		this.addChild(faces[ind]);
	}
}

this.addEventListener(MouseEvent.MOUSE_DOWN, ReorderChildren);

 

Papervision 3D

Papervision ist ein Framework (Klassenstruktur), welches als open Source Project von vielen Codern erstellt, verändert und erweitert wird. Von daher gibt es verschiedene Versionen. Einige Coder verfolgen einen eigenen Weg, der eventuell von anderen weiterverfolgt wird oder irgendwo endet. So kann man sich diese Versionen wie den Stamm und die Äste eines Baumes vorstellen. Neben dem Stamm (Trunk), der die Hauptlinie oder die herkömmlichen Versionen eines Programmes repräsentiert, gibt es eben auch verschiedene Abzweigungen, Äste (branch).
Es gibt sehr viele Tutorials zu Papervision. Es macht Sinn darauf zu achten, dass das Tutorial zur aktuellesten Version von Papervision passt. Um einen Überblick zu erhalten, welche Version nun die "aktuelleste" ist, kann man sich das Hilfsmittel Turtoise SVN zur Hilfe nehmen, welches den Download managed. Wie das funktioniert wird bei madvertices anschaulich erklärt.

Für den Einstieg empfehle ich folgende Seiten:
http://www.madvertices.com/ Einstieg Tutorials
http://www.packtpub.com/ hier geht es um den Import und die Darstellung von 3D Objekten mit PV3D, welche man mit einem 3D Programm erstellt hat.

Referenzen zu Papervision3D: http://www.flashbookmarks.com/PV3D-GreatWhite-DOC/ oder
http://papervision3d.googlecode.com/svn/trunk/as3/trunk/docs/index.html?org/papervision3d/objects/parsers/Sketchup.html&org/papervision3d/objects/parsers/class-list.html

Setup

Legt euch irgendwo einen Ordner an, in dem ihr alle Klassen, die ihr öfter benötigt hinterlegt. Legt euch innerhalb dieses Ordners einen Ordner an und nennt ihn beispielsweise "papervision3D".

Nun könnt ihr entweder eure Klassen im Netz runterladen und dort entpacken oder ihr nehmt das Tool Turtoise SVN http://tortoisesvn.net/downloads und installiert es. Dann klickt ihr mit rechter Maustaste auf den Ordner "papervision3D" und wählt "SVN Checkout" Gebt beispielsweise folgende Adresse ein und klickt auf okay.
http://papervision3d.googlecode.com/svn/trunk/ Die Adresse findet ihr bei http://code.google.com/p/papervision3d/source/checkout
Nachdem alle Dateien runtergeladen worden sind, müsst ihr diese nur noch in Flash importieren. Vorsicht ist geboten, wenn man neuere Versionen von Papervison läd. Hierbei muss man natürlich darauf achten, dass alte Projekte mit neueren Versionen nicht funktionieren.

Geht auf Berabeiten / Voreinstellungen / Actionscript / Actionscript 3, Klickt auf das Pluszeichen und gebt den Pfad zu dem "papervision3D" Ordner auf eurer Festplatte an. Dann könnt ihr die Import Anweisungen aus meinen Klassendateien genauso übernehmen. Anhand der Import Anweisung könnt ihr auch die Ordnerstruktur erkennen, die in dem "papervision3D" Ordner liegt.

Zum Beispiel: eine Import Anweisung auf das ColorMaterial müsste so aussehen:

import org.papervision3d.materials.ColorMaterial;

Importanweisungen

Es folgen die wichtigsten Importanweisungen für die Darstellung einer einfachen Fläche (Plane). Mit der Klasse BasicView kann man auf diese Importanweisungen verzichten, da diese in BasicView enthalten sind.

import flash.display.Sprite; import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine; 

Schauen wir uns diese Klassen mal in den Referenzen an:

Viewport3D
viewport = new Viewport3D(Breite, Höhe, autoScaleToStage, interactive);
scaleToStage (boolean) Standard=false passt sich der Größe der Bühne an, wenn die Bühnengröße sich verändert
interactive (boolean) Standard= false, bestimmt ob Viewport auf MouseEvents hört, wenn man einen InteractiveSceneManager erstellt.

Scene3D
Eine Szene in der alle Objekte gerendert werden

Camera3D
Camera3D(fov:Number = 60, near:Number = 10, far:Number = 5000, useCulling:Boolean = false, useProjection:Boolean = false)
fov: Field of View oder Focus

materials
Hierzu gibt es ein ausführliches Tutorial bei madvertices

objects.primitives
object.primitves sind verschiedene Grundformen wie Plane (Fläche), cube (Würfel), cone(Zylinder) etc.

render
Mit render.BasicRenderEngine werden 3D Sachen gerendert oder sichtbar gemacht. Beispiel:
private var renderer:BasicRenderEngine;
renderer = new BasicRenderEngine();

Normalerweise wird in einer onEnterFrame Anweisung die render-Anweisung ausgeführt:

renderer.renderScene(scene, camera, viewport);

 

Plane mit MovieClip Material

Beispiel

Hier nun eine Documentklasse namens Plain1. In der Bibliothek der fla muss sich ein MovieClip mit Klassennamen "quad" befinden. Dieser wird als Material für das Plane Objekt benutzt.

package {

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Rectangle;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieMaterial;

	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.render.BasicRenderEngine;

	public class Plane1 extends Sprite {
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var material:MovieMaterial;
		private var primitive:Plane;
		private var renderer:BasicRenderEngine;
		//ein MovieClip in der Bibliothek mit Klassennamen "quad"
		private var mcMaterial:quad = new quad();

		public function Plane1():void {

			//viewport = new BasicRenderEngine(Breite, Höhe, autoScaleToStage, interactive);
			viewport=new Viewport3D(550,400,false,true);
			addChild(viewport);

			//instanziiert eine Scene3D Instanz
			scene = new Scene3D();

			//instanziiert eine Camera3D Instanz
			camera = new Camera3D();

			//renderer zeichnete die Scene auf die Bühne
			renderer = new BasicRenderEngine();

			//MovieMaterial, doubleSided zeichnet das Material auf beide Seite der Plane Instanz
			material=new MovieMaterial(mcMaterial,false,true,true);
			material.doubleSided=true;
			material.smooth=true;

			//primitive = new Plane(material applied to object, width, height, wSegments, hSegments);
			primitive=new Plane(material,400,400,3,3);
			scene.addChild(primitive);

			// enterFrame event listener
			addEventListener(Event.ENTER_FRAME, onEnterFrame);

			//definieren der EnterFrame Methode um Ansicht zu aktualisieren
			function onEnterFrame(e:Event):void {

				var yDist:Number=mouseY-stage.stageHeight*0.5;
				var xDist:Number=(360/stage.stageWidth)*mouseX;				
				primitive.rotationY=xDist;
				primitive.rotationX+=yDist*0.02;

				renderer.renderScene(scene, camera, viewport);
			}
		}
	}
}

 

BasicView 

Beispiel

BasicView ist eine Klasse oder ein Template, welche die Grundeinstellungen für ein papervision3D Projekt zur Verfügung stellt. Es enthält viewport, scene, camera, and renderer, siehe Referenzen Näheres zu Basic View siehe madvertices

package
{
	import flash.events.Event;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
	/**
	 * ...
	 * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
	 */
	public class Plane2 extends BasicView
	{
		protected var plane:Plane;
		protected var colorMaterial:ColorMaterial;
		public function Plane2():void
		{
			super();
			//material erschaffen mit Eigenschaft doubleSided=true
			colorMaterial = new ColorMaterial(0xFF0000, .5);
			colorMaterial.doubleSided = true;
			//Plane Instanz und colorMaterial, Breite und Höhe zuweisen
			plane = new Plane(colorMaterial, 400,400);
			scene.addChild(plane);
			// rendering starten
			startRendering();
		}
		override protected function onRenderTick(event:Event = null):void
		{
			super.onRenderTick(event);
			//plane drehen, yaw, pitch, roll = Drehung auf Achsen
			plane.yaw(2);
		}
	}
}

 

 

Material

Beispiel

Im folgenden Beispiel einer Dokumentenklasse werden 4 verschiedene Materialarten zugewiesen.
MovieAssetMaterial erwartet den Klassennamen eines in der Bibliothek befindlichen Movieclips als String oder den Instanznamen eines MCs (nicht als String).
BitmapFileMaterial erwartet eine URL, die auf das Bild verweist.

 

package {
	import flash.events.Event;

	import org.papervision3d.materials.*;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;

	public class Material1 extends BasicView {
		protected var plane1:Plane;
		protected var plane2:Plane;
		protected var plane3:Plane;
		protected var plane4:Plane;

		protected var colorMaterial:ColorMaterial;
		protected var wireframeMaterial:WireframeMaterial;
		protected var movieAssetMaterial:MovieAssetMaterial;
		protected var bitmapFileMaterial:BitmapFileMaterial;



		public function Material1():void {
			super();
			//material erschaffen mit Eigenschaft doubleSided=true
			colorMaterial=new ColorMaterial(0xFF0000,.5);
			colorMaterial.doubleSided=true;

			wireframeMaterial=new WireframeMaterial(0xff22aa);
			wireframeMaterial.doubleSided=true;

			//myMaterial Klassenname (linkage Id) des Movieclips
			movieAssetMaterial=new MovieAssetMaterial("myMaterial",false);
			movieAssetMaterial.animated=true;
			movieAssetMaterial.doubleSided=true;
			movieAssetMaterial.smooth=true;

			//url auf ein Bild
			bitmapFileMaterial=new BitmapFileMaterial("http://www.on-design.de/images/smallich.jpg");
			bitmapFileMaterial.doubleSided=true;

			//Plane Instanz und colorMaterial, Breite und Höhe zuweisen
			plane1=new Plane(colorMaterial,100,100);
			plane2=new Plane(wireframeMaterial,100,100,5,5);
			plane3=new Plane(movieAssetMaterial,100,100);
			plane4=new Plane(bitmapFileMaterial,100,100);


			plane1.x=-200;
			plane2.x=-70;
			plane3.x=40;
			plane4.x=200;

			scene.addChild(plane1);
			scene.addChild(plane2);
			scene.addChild(plane3);
			scene.addChild(plane4);

			camera.focus=20;
			// rendering starten
			startRendering();
		}
		override protected function onRenderTick(event:Event = null):void {
			super.onRenderTick(event);
			//plane drehen, yaw, pitch, roll = Drehung auf Achsen
			plane1.yaw(2);
			plane2.roll(2);
			plane3.pitch(2);
			plane4.yaw(2);
			plane4.roll(2);
			plane4.pitch(2);
		}
	}
}

 

Sphere

Beispiel

Sphere Referenzen

sphere = new Sphere(material applied to object, radius, wSegments, hSegments);

package {
	import flash.events.Event;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.materials.*;
	import org.papervision3d.view.BasicView;


	public class Sphere1 extends BasicView {

		private var sphere:Sphere;
		protected var movieAssetMaterial:MovieAssetMaterial;


		public function Sphere1():void {
			super();

			//material erschaffen mit Eigenschaft doubleSided=true
			movieAssetMaterial=new MovieAssetMaterial("myMaterial");
			movieAssetMaterial.smooth=true;
			
			//sphere = new Sphere(material applied to object, radius, wSegments, hSegments);
			sphere=new Sphere(movieAssetMaterial,150,10,10);
			scene.addChild(sphere);
			camera.focus=20;
			// rendering starten
			startRendering();
		}
		override protected function onRenderTick(event:Event=null):void {
			super.onRenderTick(event);
			var xDist:Number=mouseX-stage.stageWidth*0.5;
			var yDist:Number=mouseY-stage.stageHeight*0.5;
			sphere.rotationY+=xDist*0.02;
			sphere.rotationX+=yDist*0.02;
		}
	}
}

Cylinder

Beispiel

Cylinder Referenzen

cylinder = new Cylinder(material applied to object, radius, height, wSegments, hSegments, topRadius);

 

 

package {
	import flash.events.Event;
	import org.papervision3d.objects.primitives.Cylinder;
	import org.papervision3d.materials.*;
	import org.papervision3d.view.BasicView;


	public class Cylinder1 extends BasicView {

		private var cylinder:Cylinder;
		protected var movieAssetMaterial:MovieAssetMaterial;


		public function Cylinder1():void {
			super();

			//material erschaffen mit Eigenschaft doubleSided=true
			movieAssetMaterial=new MovieAssetMaterial("myMaterial");
			movieAssetMaterial.smooth=true;
			
			//cylinder = new Sphere(material applied to object, radius, wSegments, hSegments);
			cylinder = new Cylinder(movieAssetMaterial, 120, 250, 8, 3, 120); scene.addChild(cylinder);
			
			scene.addChild(cylinder);
			camera.focus=20;
			// rendering starten
			startRendering();
		}
		override protected function onRenderTick(event:Event=null):void {
			super.onRenderTick(event);
			var xDist:Number=mouseX-stage.stageWidth*0.5;
			var yDist:Number=mouseY-stage.stageHeight*0.5;
			cylinder.rotationY+=xDist*0.02;
			cylinder.rotationX+=yDist*0.02;
		}
	}
}

 

Cone

Beispiel

cone = new Cone(material applied to object, radius, height, wSegments, hSegments, topRadius);

package {
	import flash.events.Event;
	import org.papervision3d.objects.primitives.Cone;
	import org.papervision3d.materials.*;
	import org.papervision3d.view.BasicView;


	public class Cone1 extends BasicView {

		private var cone:Cone;
		protected var movieAssetMaterial:MovieAssetMaterial;


		public function Cone1():void {
			super();

			//material erschaffen mit Eigenschaft doubleSided=true
			movieAssetMaterial=new MovieAssetMaterial("myMaterial");
			movieAssetMaterial.smooth=true;
			
			//cone
			cone=new Cone(movieAssetMaterial,120,250,8,3);
			scene.addChild(cone);
			camera.focus=20;
			// rendering starten
			startRendering();
		}
		override protected function onRenderTick(event:Event=null):void {
			super.onRenderTick(event);
			var xDist:Number=mouseX-stage.stageWidth*0.5;
			var yDist:Number=mouseY-stage.stageHeight*0.5;
			cone.rotationY+=xDist*0.02;
			cone.rotationX+=yDist*0.02;
		}
	}
}

Cube

 

Beispiel

Hier erstellen wir einen Würfel (Cube). In der Bibliothek der fla befinden sich MovieClips mit den Klassennamen face1, face2...etc. Diese werden für die MaterialList des Cubes benötigt.

 

Cube Referenzen

package {
	import flash.events.Event;
	import org.papervision3d.materials.*;
	import org.papervision3d.materials.utils.*;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.view.BasicView;

	/**
	 * ...
	 * @author Michael Albers, mail[at]pastorpixel[dot]de
	 */
	public class Cube1 extends BasicView {

		protected var cube:Cube;


		public function Cube1():void {
			super();

			//material für jede Seite erschaffen
			var mm1:MovieAssetMaterial=new MovieAssetMaterial("face1");
			mm1.smooth=true;

			var mm2:MovieAssetMaterial=new MovieAssetMaterial("face2");
			mm2.smooth=true;

			var mm3:MovieAssetMaterial=new MovieAssetMaterial("face3");
			mm3.smooth=true;

			var mm4:MovieAssetMaterial=new MovieAssetMaterial("face4");
			mm4.smooth=true;

			var mm5:MovieAssetMaterial=new MovieAssetMaterial("face5");
			mm5.smooth=true;

			var mm6:MovieAssetMaterial=new MovieAssetMaterial("face6");
			mm6.smooth=true;


			//Cube Instanz MaterialList für jede Seite, Breite, Höhe, Tiefe, verices/Flächen zuweisen

			cube=new Cube(new MaterialsList({front:mm1,left:mm2,right:mm3,top:mm4,bottom:mm5,back:mm6}),200,200,200,10,10);

			scene.addChild(cube);
			camera.focus=30;

			// rendering starten
			startRendering();
		}
		override protected function onRenderTick(event:Event = null):void {
			super.onRenderTick(event);
			//cube drehen
			var xDist:Number=mouseX-stage.stageWidth*0.5;
			var yDist:Number=mouseY-stage.stageHeight*0.5;
			cube.rotationY+=xDist*0.02;
			cube.rotationX+=yDist*0.02;

		}
	}
}
 

Die MaterialsList könnte man auch in einer Schleife erzeugen. Hier der Konstruktor des gleichen Beispiels mit einer for-Schleife

 

		public function Cube2():void {
			super();


			//Array mit den Bezeichnungen der Seiten von Cube
			var sides:Array=new Array("front","back","left","right","top","bottom");

			matList= new MaterialsList();

			//die MC Klassennamen in der Bibliothek , welche die Bilder enthalten 
			//heißen face1, face2....face6
			//addMaterial(MaterialsObject3D, Name hier die Seiten des Cubes)

			for (var i:uint=1; i<=6; i++) {
				matList.addMaterial( new MovieAssetMaterial("face"+String(i)), sides[(i-1)] );
			}

			//MaterialsList, Breite, Höhe, Tiefe, Anzahl der Flächen
			cube=new Cube(matList,200,200,200,10,10);

			scene.addChild(cube);
			camera.focus=30;

			// rendering starten
			startRendering();
		}
        

Interactive Material

Beispiel

Es gibt die Möglichkeit die 3D-Objekte mit Click-Events zu versehen. Diese Möglichkeit wird später vorgestellt. Vorab habe ich hier eine Möglichkeit erstellt das Material anklickbar zu machen. Es wird zuerst eine Instanz einer MovieClip-Klasse aus der Bibliothek erstellt, welche später für eine Instanz von MovieMaterial benötigt wird. Das Ganze wird jeweils 6 mal gemacht für alle Flächen des Würfels. In den folgenden Erklärungen beschränke ich mich auf eine Instanz. Ich habe in diesem Beispiel auf Schleifen verzichtet, damit es etwas einfacher zu verstehen ist.

var f1:face1 = new face1();

Diese wird mit addChild() auf die Bühne gebracht und dann unsichtbar gemacht, da der Movieclip nicht auf der Bühne sichtbar sein soll, sonder nur innerhalb des Materials.

addChild(f1);
f1.visible=false;

Nun wird eine Instanz von MovieMaterial erstellt und die Movieclip Instanz dort zugewiesen. Außerdem wird der Movieclip Instanz "f1" der Event Listener zugewiesen, der die entsprechende Funktion aufruft, "faceClick1" (siehe unten);

var mm1:MovieMaterial=new MovieMaterial(f1,false,false,true);
mm1.interactive=true;
f1.addEventListener(MouseEvent.CLICK, faceClick1);

 

function faceClick1(evt:MouseEvent):void { navigateToURL( new URLRequest("http://www.on-design.de/jukeart/illu/darx.html")); }

 

Eine Cube Instanz wird erzeugt welche eine MaterialsList bekommt, in der alle Instanzen von MovieMaterial zugewiesen werden.

 

cube=new Cube(new MaterialsList({front:mm1,left:mm2,right:mm3,top:mm4,bottom:mm5,back:mm6}),400,400,400,10,10);

scene.addChild(cube);

 

package {

	import flash.display.Sprite;
	import flash.events.*;
	import flash.events.MouseEvent;
	import flash.net.navigateToURL;
	import flash.net.URLRequest;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.*;
	import org.papervision3d.materials.utils.*;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.render.BasicRenderEngine;


	public class Cube3 extends Sprite {

		protected var cube:Cube;
		protected var matList:MaterialsList;

		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var renderer:BasicRenderEngine;



		public function Cube3():void {

			//viewport = new BasicRenderEngine(width, height, scaleToStage, interactive);
			viewport=new Viewport3D(550,400,false,true);
			addChild(viewport);

			//instantiates a Scene3D instance
			scene = new Scene3D();

			//instantiates a Camera3D instance
			camera = new Camera3D();

			//renderer draws the scene to the stage
			renderer = new BasicRenderEngine();



			//die MC Klassennamen in der Bibliothek , welche die Bilder enthalten 
			//heißen face1, face2....face6

			var f1:face1 = new face1();
			var f2:face2 = new face2();
			var f3:face3 = new face3();
			var f4:face4 = new face4();
			var f5:face5 = new face5();
			var f6:face6 = new face6();
			addChild(f1);
			addChild(f2);
			addChild(f3);
			addChild(f4);
			addChild(f5);
			addChild(f6);

			f1.visible=false;
			f2.visible=false;
			f3.visible=false;
			f4.visible=false;
			f5.visible=false;
			f6.visible=false;


			var mm1:MovieMaterial=new MovieMaterial(f1,false,false,true);
			var mm2:MovieMaterial=new MovieMaterial(f2,false,false,true);
			var mm3:MovieMaterial=new MovieMaterial(f3,false,false,true);
			var mm4:MovieMaterial=new MovieMaterial(f4,false,false,true);
			var mm5:MovieMaterial=new MovieMaterial(f5,false,false,true);
			var mm6:MovieMaterial=new MovieMaterial(f6,false,false,true);

			mm1.interactive=true;
			mm2.interactive=true;
			mm3.interactive=true;
			mm4.interactive=true;
			mm5.interactive=true;
			mm6.interactive=true;


			f1.addEventListener(MouseEvent.CLICK, faceClick1);

			function faceClick1(evt:MouseEvent):void {
				navigateToURL( new URLRequest("http://www.on-design.de/jukeart/illu/darx.html"),"_self");
			}

			f2.addEventListener(MouseEvent.CLICK, faceClick2);

			function faceClick2(evt:MouseEvent):void {
				navigateToURL( new URLRequest("http://www.on-design.de/jukeart/illu/conc3.html"),"_self");
			}
			f3.addEventListener(MouseEvent.CLICK, faceClick3);

			function faceClick3(evt:MouseEvent):void {
				navigateToURL( new URLRequest("http://www.on-design.de/jukeart/illu/guitbal1.html"),"_self");
			}
			f4.addEventListener(MouseEvent.CLICK, faceClick4);

			function faceClick4(evt:MouseEvent):void {
				navigateToURL( new URLRequest("http://www.on-design.de/jukeart/illu/conc2.html"),"_self");
			}
			f5.addEventListener(MouseEvent.CLICK, faceClick5);

			function faceClick5(evt:MouseEvent):void {
				navigateToURL( new URLRequest("http://www.on-design.de/jukeart/illu/conc1.html"),"_self");
			}

			f6.addEventListener(MouseEvent.CLICK, faceClick6);

			function faceClick6(evt:MouseEvent):void {
				navigateToURL( new URLRequest("http://www.on-design.de/jukeart/illu/guitbal2.html"),"_self");
			}



			cube=new Cube(new MaterialsList({front:mm1,left:mm2,right:mm3,top:mm4,bottom:mm5,back:mm6}),400,400,400,10,10);

			scene.addChild(cube);



			addEventListener(Event.ENTER_FRAME, onEnterFrame);


			function onEnterFrame(e:Event):void {
				var xDist:Number=mouseX-stage.stageWidth*0.5;
				var yDist:Number=mouseY-stage.stageHeight*0.5;
				cube.rotationY+=xDist*0.02;
				cube.rotationX+=yDist*0.02;
				renderer.renderScene(scene, camera, viewport);
			}

		}
	}
}

Cube interaktiv mit Schleife

Hier ein fast identisches Beispiel mit dem Unterschied, dass anstatt des ellenlangen Codes eine for-Schleife eingesetzt wird. Einen Unterschied gibt es auch in der fla. Hier gibt es nur eine Movieclip Klasse die alle Bilder enthält. Der Klassenname ist "Cover". Die Bilder liegen in den ersten 6 Schlüsselbildern der Zeitleiste.

package {

	import flash.display.Sprite;
	import flash.events.*;
	import flash.events.MouseEvent;
	import flash.net.navigateToURL;
	import flash.net.URLRequest;
	import flash.display.*;
	import flash.utils.*;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.*;
	import org.papervision3d.materials.utils.*;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.render.BasicRenderEngine;


	public class Cube4 extends Sprite {

		protected var cube:Cube;
		protected var matList:MaterialsList;
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var renderer:BasicRenderEngine;




		public function Cube4():void {

			viewport=new Viewport3D(550,400,false,true);
			addChild(viewport);

			scene = new Scene3D();
			camera = new Camera3D();
			renderer = new BasicRenderEngine();

			//Array mit den Bezeichnungen der Seiten von Cube
			var sides:Array=new Array("front","back","left","right","top","bottom");


			matList= new MaterialsList();

			//in der Bibliothek gibt es eine MovieClip Klasse "Cover"
			//dort liegen die 6 Bilder für die Seiten des Cubes in den
			//ersten 6 Schlüsselbildern


			for (var i:uint=1; i<=6; i++) {
				var face:Cover= new Cover();
				face.gotoAndStop(i);
				face.name="f"+String(i);
				addChild(face);
				face.visible=false;
				face.addEventListener(MouseEvent.CLICK, faceClick);
				var mm:MovieMaterial=new MovieMaterial(getChildByName("f"+String(i)),false,false,true);
				mm.interactive=true;
				matList.addMaterial(mm, sides[(i-1)] );
			}

			cube=new Cube(matList,400,400,400,5,5);

			scene.addChild(cube);

			var links:Array = new Array();
			links["f1"]="http://www.on-design.de/jukeart/illu/conc1.html";
			links["f2"]="http://www.on-design.de/jukeart/illu/conc2.html";
			links["f3"]="http://www.on-design.de/jukeart/illu/conc3.html";
			links["f4"]="http://www.on-design.de/jukeart/illu/darx.html";
			links["f5"]="http://www.on-design.de/jukeart/illu/guitbal1.html";
			links["f6"]="http://www.on-design.de/jukeart/illu/guitbal2.html";

			//evt.target.name   oder 	face.name="f"+String(i);
			//wird für den Index des "links" Arrays genutzt

			function faceClick(evt:MouseEvent):void {
				trace("ich wurde geklickt "+evt.target.name);
				navigateToURL(new URLRequest(links[String(evt.target.name)]),"_self");
			}




			addEventListener(Event.ENTER_FRAME, onEnterFrame);

			function onEnterFrame(e:Event):void {
				var xDist:Number=mouseX-stage.stageWidth*0.5;
				var yDist:Number=mouseY-stage.stageHeight*0.5;
				cube.rotationY+=xDist*0.02;
				cube.rotationX+=yDist*0.02;
				renderer.renderScene(scene, camera, viewport);
			}

		}


	}
}

 

Bilder Gallerie / Bilder-Karusell / clickable / anklickbar

Beispiel

In dieser Bilder Gallerie kommen einige Techniken zusammen. In einer XML-Datei sind Links zu Bildern gespeichert, die in den Flashfilm geladen werden. Zu jedem Bild gibt es noch einen Link auf eine Webseite, die beim Klick auf das Bild aufgerufen wird.

 

Hier die XML Datei:

<? version ="1.0" encoding ="utf-8"?>
<images>
<image url="images/image1.jpg" link="http://www.on-design.de/jukeart/illu/conc1.html"/>
<image url="images/image2.jpg" link="http://www.on-design.de/jukeart/illu/conc2.html" />
<image url="images/image3.jpg" link="http://www.on-design.de/jukeart/illu/conc3.html" />
<image url="images/image4.jpg" link="http://www.on-design.de/jukeart/illu/darx.html" />
<image url="images/image5.jpg" link="http://www.on-design.de/jukeart/illu/guitbal1.html" />
<image url="images/image6.jpg" link="http://www.on-design.de/jukeart/illu/guitbal2.html" />
<image url="images/image7.jpg" link="http://www.on-design.de/jukeart/illu/angst.html" />
<image url="images/image8.jpg" link="http://www.on-design.de/jukeart/illu/arbeit.html" />
<image url="images/image9.jpg" link="http://www.on-design.de/jukeart/illu/last.html" />
<image url="images/image10.jpg" link="http://www.on-design.de/jukeart/illu/sunlife.html" />
<image url="images/image11.jpg" link="http://www.on-design.de/jukeart/illu/lilith.html" />
<image url="images/image12.jpg" link="http://www.on-design.de/jukeart/illu/mumie.html" />
<image url="images/image13.jpg" link="http://www.on-design.de/jukeart/illu/skarbaeus.html" />
<image url="images/image14.jpg" link="http://www.on-design.de/jukeart/illu/traum.html" />
</images>

 

package {

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.navigateToURL;
	import flash.net.URLRequest;
	import flash.net.URLLoader;

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

	public class activePlane extends Sprite {
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var movieAssetMaterial:BitmapFileMaterial;
		private var sphere:Plane;
		private var renderer:BasicRenderEngine;
		private var planes:Vector.=new Vector.  ;
		private var numImages:int;
		private var centerObject:DisplayObject3D=new DisplayObject3D  ;
		private var urlLoader:URLLoader;
		private var urls:Array=new Array  ;




		public function activePlane():void {
			
			viewport=new Viewport3D(800,600,false,true);
			addChild(viewport);
			scene=new Scene3D  ;
			camera=new Camera3D  ;
			renderer=new BasicRenderEngine  ;
			loadXML();
		}




		private function loadXML():void {
			urlLoader=new URLLoader(new URLRequest("images.xml"));
			urlLoader.addEventListener(Event.COMPLETE,onXMLLoaded);
		}



		private function onXMLLoaded(event:Event):void {
			var xml:XML=new XML(event.target.data);
			var images:XMLList=xml.image;
			numImages=images.length();
			for (var i:int=0; i< numImages; i++) {
				var url:String=images[i].@url;
				urls[i]=images[i].@link;

				var material:BitmapFileMaterial=new BitmapFileMaterial(url);
				
				material.precise=true;

				material.interactive=true;
				material.addEventListener(FileLoadEvent.LOAD_COMPLETE,onMaterialLoaded);

			}
		}



		private function onMaterialLoaded(event:FileLoadEvent):void {
			var material:BitmapFileMaterial=event.target as BitmapFileMaterial;
			material.interactive=true;
			var plane:Plane=new Plane(material);
			planes.push(plane);
			scene.addChild(plane);
			renderer.renderScene(scene,camera,viewport);

			if (planes.length==numImages) {
				createCarousel();
			}
		}




		private function createCarousel():void {
			var radius:int=950;
			scene.addChild(centerObject);

			for (var i:int=0; i < numImages; i++) {
				var plane:Plane=planes[i];
				plane.name=String(i);
				plane.rotationY=360/numImages*i;
				plane.moveForward(radius);
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS,onPress);
				centerObject.addChild(plane);

			}

			function onPress(e:InteractiveScene3DEvent):void {
				trace("ich wurde geklickt"+urls[int(e.target.name)]);
				navigateToURL(new URLRequest(urls[int(e.target.name)]));
			}

			addEventListener(Event.ENTER_FRAME,onEnterFrame);

		}





		private function onEnterFrame(e:Event):void {
			centerObject.yaw(viewport.containerSprite.mouseX*0.007);
			camera.y=viewport.containerSprite.mouseY*2;
			camera.z=110;
			renderer.renderScene(scene,camera,viewport);
		}

	}
}

Flat Shader

Beispiel

Material mit Shatteneffekt. Auch dieses Beispiel ist von Madvertices.

package {
	import flash.events.Event;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.materials.*;
	import org.papervision3d.view.BasicView;
	//um FlashShadeMaterial zu nutzen muss PointLight3D object importiert und instanziiert werden.
	import org.papervision3d.lights.PointLight3D;
	//Importiere die FlatShadeMaterial Klasse
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;



	public class SphereShader extends BasicView {

		private var sphere:Sphere;
		protected var movieAssetMaterial:MovieAssetMaterial;
		//Declare a FlatShadeMaterial instance
		private var flat:FlatShadeMaterial;
		//Declare a PointLight3D instance
		private var light:PointLight3D;


		public function SphereShader():void {
			super();

			//PointLight3D Instanz
			// Parameter for PointLight3D = (showLight)
			//z und y Koordinaten von light werden gesetzt,
			//um eine Distanz zum Objekt zu schaffen
			light=new PointLight3D(true);
			light.z=-800;
			light.y=300;
			//FlatShadeMaterial Instanz
			//FlatShadeMaterial Parameter = (PointLight3D, Diffuse Color, Ambient Color)
			flat=new FlatShadeMaterial(light,0xFFFFFF,0x444444);
			//FlatShadeMaterial wird  new Sphere zugewiesen
			sphere=new Sphere(flat,150,18,18);

			scene.addChild(sphere);
			camera.focus=20;
			// rendering starten
			startRendering();
		}
		override protected function onRenderTick(event:Event=null):void {
			super.onRenderTick(event);
			var xDist:Number=mouseX-stage.stageWidth*0.5;
			var yDist:Number=mouseY-stage.stageHeight*0.5;
			sphere.rotationY+=xDist*0.02;
			sphere.rotationX+=yDist*0.02;
		}
	}
}

Gouraud Shader

Beispiel

Mit dem GouraudShader kann man Bildtextur und Licht kombinieren. Das folgende Beispiel habe ich in leicht veränderter Form von madvertices übernommen.

Folgende Importfunktionen werden zusätzlich benötigt:

import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.shaders.GouraudShader;
import org.papervision3d.materials.shaders.ShadedMaterial;

Die Sache funktioniert folgendermaßen: Ich instanziiere eine MovieClip Klasse aus der Bibliothek. Diese wird für die Instanz von MovieMaterial gebraucht. Außerdem wird ein Light instanziiert, welches für die Instanz des GouradShaders gebraucht wird. Aus diesen beiden Dingen wird das ShadedMaterial gebildet, welches der Sphere Instanz zugewiesen wird.

MaterialMc Light
MovieMaterial GouraudShader
shadedMaterial
Sphere

 

private var materialMc:MaterialMc;
materialMc = new MaterialMc();
private var light:PointLight3D;
light = new PointLight3D();
mMat = new MovieMaterial(materialMc, false, false, true); gShader = new GouraudShader(light, 0xFFFFFF, 0x111111, 30);
gMaterial = new ShadedMaterial(mMat, gShader);
sphere = new Sphere(gMaterial, 250, 18, 18);

 

package {
	
	//nach einem Beispiel von:
	//http://www.madvertices.com/2009/02/pv3d-shader-materials-deeper.html
	
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
	import flash.events.Event;

	import org.papervision3d.cameras.CameraType;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.shaders.GouraudShader;
	import org.papervision3d.materials.shaders.ShadedMaterial;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;


	public class GShader extends Sprite {

		//MaterialMc ist eine Movieclipklasse in der Bibliothek
		private var materialMc:MaterialMc = new MaterialMc();
		private var mMat:MovieMaterial;
		private var gShader:GouraudShader;
		private var gMaterial:ShadedMaterial;
		private var light:PointLight3D;
		private var sphere:Sphere;
		private var view:BasicView;

		public function GShader() {
			stage.scaleMode=StageScaleMode.NO_SCALE;



			view=new BasicView(530,300,false,true,CameraType.FREE);
			light = new PointLight3D();
			mMat=new MovieMaterial(materialMc,false,false,true);
			gShader=new GouraudShader(light,0xFFFFFF,0x111111,30);
			gMaterial=new ShadedMaterial(mMat,gShader);
			sphere=new Sphere(gMaterial,250,18,18);
			view.scene.addChild(light);
			view.scene.addChild(sphere);
			addChild(view);
			//view.x = 200;

			addEventListener(Event.ENTER_FRAME, onRenderViewport);
		}

		private function onRenderViewport(e:Event):void {
			view.singleRender();
			var xDist:Number=mouseX-stage.stageWidth*0.5;
			var yDist:Number=mouseY-stage.stageHeight*0.5;
			sphere.rotationY+=xDist*0.02;
			sphere.rotationX+=yDist*0.02;
			//sphere.yaw(2);
			light.x = (mouseX - 250) * 5;
			light.y = -((mouseY - 150) * 5);
		}
	}
}