kalle Saas | Blog

Ein kleines Javascript-Projekt:

MicroDateSelect

Ein einfacher “floating calendar”. Der Kalendar entstand aus der arbeit an staffomatic.

viel spass damit.

Wow, ich hatte in früheren Projekten schon image upload implementiert (mit: Attachment_fu, file_column, etc), aber gerade habe ich dasselbe mit dem Rails plugin Paperclip realisiert, und ich bin begeistert. Keine 3 Minuten coden und schon war es perfekt.

Installation:

$ cd /pfad/zum/railsapp/vendor/plugin
$ git clone git://github.com/thoughtbot/paperclip.git

Ressources
http://dev.thoughtbot.com/paperclip/

Anforderungen
ImageMagick wir benötigt um die Bilder zu schneiden etc.
Leopard installation mit MacPorts:

$ sudo port install ImageMagick

Los geht`s

Die Migration

class CreateUser < ActiveRecord::Migration
  def self.up
    create_table :user do |t|
      t.column :name, :string
      # picture
      t.column :photo_file_name, :string
      t.column :photo_content_type, :string
      t.column :photo_file_size, :integer
      t.timestamps
    end
  end
  def self.down
    drop_table :intersections
  end
end

Das Modell:

class User < ActiveRecord::Base
  has_attached_file :avatar, :styles => {
                                 :medium => “300×300>”,
                                 :thumb => “100×100>” }
end

In dem New oder Edit view:

<% form_for :user, :html => { :multipart => true } do |form| %>
  <%= form.file_field :avatar %>
<% end %>

Der Controller:

def create
  @user = User.create( params[:user] )
end

In den views:

<%= image_tag @user.avatar.url %>
<%= image_tag @user.avatar.url(:medium) %>
<%= image_tag @user.avatar.url(:thumb) %>

Natürlich gibt es ne menge mehr (validation, etc) dazu mehr später.

mysql hält mich auf trap.

Beim versuch eine Rails Migration zu starten, bekomme ich folgenden Fehler:

$ rake db:migrate(in /Users/kallesaas/Documents/railsapps/bucketlist)
dyld: NSLinkModule() error
dyld: Library not loaded: /usr/local/mysql/lib/mysql/libmysqlclient.15.dylib
Referenced from: /usr/local/lib/ruby/gems/1.8/gems/mysql-2.7/lib/mysql.bundle
Reason: image not found
Trace/BPT 

Scheint ein “linking” Problem zu sein. Lösung bei mir:

$ sudo install_name_tool -change /usr/local/mysql/lib/mysql/libmysqlclient.15.dylib /usr/local/mysql/lib/libmysqlclient.15.dylib /usr/local/lib/ruby/gems/1.8/gems/mysql-2.7/lib/mysql.bundle

Falls die Datei nicht vorhanden ist kann man mit Symbolik links nachhelfen:

$ cd /usr/local/mysql/lib
$ mkdir mysql
$ cd mysql
$ ln -s /usr/local/mysql/lib/lib* .

$sudo install_name_tool -change /usr/local/mysql/lib/mysql/libmysqlclient.15.dylib /usr/local/mysql/lib/libmysqlclient.15.dylib /usr/local/lib/ruby/gems/1.8/gems/mysql-2.7/lib/mysql.bundle

ref: http://www.railsforum.com/viewtopic.php?pid=23870

Eine Kleine Erweiterung des letzten Artikels.

source code

Die Änderung zum letzten Artikel sind folgende:

1. Nutzen der Relativen Koordinaten des Plane Objektes
2. Den Kegel als Kind des Plane Objektes einfügen.

Zu 1:
Da das Relative Koordinatensystem nur von x:0-1 und y:0-1 geht müssen wir eine kleine Transformation vornehmen:

var xNew = 450*viewport.interactiveSceneManager.virtualMouse.x - 225
var yNew = -450*viewport.interactiveSceneManager.virtualMouse.y     + 225

Also: Erst auf die Größe des Plane Objektes skalieren und dann verschieben.

Das “-” Zeichen bei yNew resultiert darus, dass ich das Plane Objekt um 90 grad um die X-Achse gedreht habe. Deshalb gilt y (Absolute) = -y Relative).

Viel Spass damit.

Warum Flash verwenden wenn nicht die Interaktionen mit dem Benutzer die Hauptrolle spielt…

Hier also eine kleine Einführung in Maus Interaktionen in Papervision3D.

source code

Um diese Art der Interaktion zu realisieren müssen 4 vorbereitende Schritte gemacht werden:

1. Interaktivität des Viewports einschalten.
2. Mouse3D “enable” Eigenschaft auf true setzen.
   
3. Die Materialeigenschaft “interactive” des DisplayObject3D auf “true” setzen.
4. Einen EventListener auf das DisplayObject3D setzen, mit dem ihr interagieren wollt.

1. Viewport

//Viewport3D(viewportWidth:Number, viewportHeight:Number, autoScaleToStage:Boolean, interactive:Boolean, autoClipping:Boolean, autoCulling:Boolean).
viewport = new Viewport3D( 800, 600, true, true );

2. Mouse3D

Mouse3D.enabled = true;

3. Die Materialeigenschaft

flmat = new FlatShadeMaterial(pointLight, 0x00ccff);
flmat.interactive = true;

4. EventListener

private function initListeners():void
{
	addEventListener( Event.ENTER_FRAME, onEnterFrame );
	// event listener for the plane
	objPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, mouseClick);
}

Nun können wir auf die Koordinaten der Maus Events zugreifen:

Absolute Koordinaten:

Die absolute Koordinaten spiegeln die x,y und z Koordinaten des PV3D Raumes wieder. Oder auch “Welt” Koordinaten genannt.

viewport.interactiveSceneManager.mouse3D.x
viewport.interactiveSceneManager.mouse3D.y
viewport.interactiveSceneManager.mouse3D.z

Relative Koordinaten:

Das Relative Koordinaten System ist ein normiertes System von: 0<x<1 und 0<y<1 für das DisplayObject3D (Plane)

viewport.interactiveSceneManager.virtualMouse.x
viewport.interactiveSceneManager.virtualMouse.y

Eigentlich recht einfach. Komplizierter wird es dann wenn ihr anfangt das DisplayObject3D zu bewegen…

Der Charme einer 3D Scene steigt und fällt mit der Qualität der Materialien und Texturen. Papervision bietet eine große Anzahl von Materialien. Im folgenden Werde ich nur auf die wesentlichen Materialien eingehen.

Beispiel:

source code

Zunächst ist eine Aufteilung sinnvoll:

Die Basics:

Einfache Materialien/Texturen/Videos oder so genannte Maps können 3D Objekten direkt zugewiesen werden.
(Auszug)

1. BitmapFileMaterial
2. BitmapViewportMaterial
3. ColorMaterial
4. MovieAssetMaterial
5. WireframeMaterial

Die shade Materialien:
Mit shade Materialien kann man beeinflussen wie das Licht an den 3D Objekten dargestellt wird. Siehe: Wikipedia

1. CellMaterial
2. EnvMapMaterial
3. FlatShadeMaterial
4. GouraudMaterial
5. PhongMaterial

1. BitmapFileMaterial
Richtig einfach:

bitmapFileMaterial = new BitmapFileMaterial('rocks.jpg');

‘rocks.jpg’ kann auch durch eine URL ersetzt werden.

2. BitmapViewportMaterial
Ein bisschen tricky.
Was hier im Prinzip passiert ist folgendes:
Man erstellt einen zweiten (Bitmap) Viewport:

// new BitmapViewport3D(viewportWidth:Number = 640, viewportHeight:Number = 480, interactive:Boolean = false, autoCulling:Boolean = true)
bitmapViewport3D = new BitmapViewport3D(800, 600, false, false, 0xDDDDDD);

Dieser wird in ein BitmapViewportMaterial umgewandelt:

// new BitmapViewportMaterial(bitmapViewport:BitmapViewport3D, precise:Boolean = false)
bitmapViewportMaterial 	= new BitmapViewportMaterial(bitmapViewport3D);

und schließlich einem Objekt zugewiesen:

bitmapViewportPlane = new Plane(bitmapViewportMaterial, 800, 600, 4, 4  )

Wie ich schon in einem vorherigen Artikel schon angemerkt habe, ist es notwendig den neu erstellten Viewport
auch zu rendern:

renderer.renderScene( scene, camera, bitmapViewport3D );

3. ColorMaterial
Wieder richtig einfach:

// new ColorMaterial( color:Number=0xFF00FF, alpha:Number = 1, interactive:Boolean = false )
colorMaterial = new ColorMaterial( 0x0099CB );

4. MovieAssetMaterial

// new MovieAssetMaterial( linkageID:String="", transparent:Boolean=false, animated:Boolean=false, createUnique:Boolean=false, precise:Boolean = false)
movieAssetMaterial = new MovieAssetMaterial("animation",false , true);

Wenn ihr ein Video, oder wie bei mir ein Gif, importiert muss der Parameter “animated” auf true gesetzt werden.
Ebenfalls ist darauf zu achten das der MovieClip in der Bibliothek der fla ist und die Verknüpfung gesetzt ist.

5. WireframeMaterial

// new WireframeMaterial( color:Number=0xFF00FF, alpha:Number=100, thickness:Number = 0 )
wireframeMaterial = new WireframeMaterial( 0x0099CB );

“Thickness” beschreibt die Dicke der Linien.

Der Source code:

// papervision3D greate white
// template v01
// kalle saas | http://kallesaas.com
package
{
	// flash
	import flash.display.Sprite;
	import flash.events.*;

	// Papervision
	import org.papervision3d.cameras.FreeCamera3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;

	// Primitives
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.objects.primitives.Plane;

	// Materials
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.BitmapViewportMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;

	// Wird für bitmapViewportMaterial benötigt
	import org.papervision3d.view.BitmapViewport3D;

	public class basicMaterial extends Sprite
	{
		// papervision3D
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:FreeCamera3D;
		private var renderer:BasicRenderEngine;

		// Primitives
		private var bitmapFileSphere:Sphere;
		private var bitmapViewportPlane:Plane;
		private var colorSphere:Sphere;
		private var movieAssetSphere:Sphere;
		private var wireframeSphere:Sphere;

		// Material
		private var bitmapFileMaterial:BitmapFileMaterial;
		private var bitmapViewportMaterial:BitmapViewportMaterial;
		private var colorMaterial:ColorMaterial;
		private var movieAssetMaterial:MovieAssetMaterial;
		private var wireframeMaterial:WireframeMaterial;

		// Wird für bitmapViewportMaterial benötigt
		private var bitmapViewport3D:BitmapViewport3D;

		/**
		* Konstruktor
		* @return
		*/
		public function basicMaterial()
		{
			init();
		}

		private function init():void
		{
			initPapervision();
			initMaterials();
			initObjects();
			initListeners();
			initAnimation();
		}

		/**
		* Alles was zum erstellen benötigt wird.
		* Viewport3D, scene, camera, renderer
		*/
		private function initPapervision():void
		{
			viewport = new Viewport3D( 800, 600, false, true );
			addChild( viewport);
			scene = new Scene3D();
			camera = new FreeCamera3D();
			camera.zoom = 5
			camera.y = 800
			camera.pitch(20)
			camera.focus = 80
			renderer = new BasicRenderEngine();

			// Wird für bitmapViewportMaterial benötigt
			// new BitmapViewport3D(viewportWidth:Number = 640, viewportHeight:Number = 480, autoScaleToStage:Boolean = false, bitmapTransparent:Boolean = false, bgColor:int = 0x000000, interactive:Boolean = false, autoCulling:Boolean = true)
			bitmapViewport3D = new BitmapViewport3D(800, 600, false, false, 0xDDDDDD);
		}

		/**
		* Erstelle alle Materialien die benötigt werden:
		*/
		private function initMaterials():void
		{
			// Primitives Material
			bitmapFileMaterial 		= new BitmapFileMaterial('rocks.jpg');
			bitmapViewportMaterial 	= new BitmapViewportMaterial(bitmapViewport3D);
			colorMaterial 			= new ColorMaterial( 0x0099CB );
			movieAssetMaterial 		= new MovieAssetMaterial("animation",true , true);
			wireframeMaterial 		= new WireframeMaterial( 0x0099CB );

		}

		/**
		* Erstelle alle Objekte
		*/
		private function initObjects():void
		{

			bitmapFileSphere = new Sphere(bitmapFileMaterial, 100, 10, 10 )
			scene.addChild(bitmapFileSphere, 'bitmapFileSphere')

			bitmapViewportPlane = new Plane(bitmapViewportMaterial, 800, 600, 4, 4  )
			bitmapViewportPlane.pitch(0);
			bitmapViewportPlane.yaw(70);
			bitmapViewportPlane.y = 100
			bitmapViewportPlane.z = 100
			bitmapViewportPlane.x = 600
			scene.addChild(bitmapViewportPlane, 'bitmapViewportPlane')

			colorSphere = new Sphere(colorMaterial, 100, 10, 10 )
			colorSphere.x = 400
			scene.addChild(colorSphere, 'colorSphere')

			movieAssetSphere = new Sphere(movieAssetMaterial, 100, 10, 10 )
			movieAssetSphere.x = 400
			movieAssetSphere.z = 400
			movieAssetSphere.rotationY = -90
			scene.addChild(movieAssetSphere, 'movieAssetSphere')

			wireframeSphere = new Sphere(wireframeMaterial, 100, 10, 10 )
			wireframeSphere.z = 400
			scene.addChild(wireframeSphere, 'wireframeSphere')

		}

		/**
		* Initiiere alle EventListener.
		*/
		private function initListeners():void
		{
			addEventListener( Event.ENTER_FRAME, onEnterFrame );
		}

		/**
		* Initiiere die EventListener für Animationen.
		*/
		private function initAnimation():void
		{
			addEventListener( Event.ENTER_FRAME, rotateObject );
		}

		/*_________________________________________________________________________
		* Funktionen für EventListener
		*/
		private function onEnterFrame( e:Event ):void
		{
			renderer.renderScene( scene, camera, viewport ); 

			// Wird für bitmapViewportMaterial benötigt
			renderer.renderScene( scene, camera, bitmapViewport3D );
		}

		/*_________________________________________________________________________
		* Funktionen für Animationen
		*/
		private function rotateObject( e:Event ):void
		{
			bitmapFileSphere.yaw(1);
			colorSphere.yaw(1);
		}
	}
}

Nicht vergessen alle nötigen Pakete einzubinden, Materials, Primitives, etc ( siehe Source code).

Den shade Materialien widme ich einen gesonderten Artikel.

Alles fängt irgendwie mit den einfachen geometrischen Objekten an oder man baut ganze Webseiten damit, wie in diesem Beispiel.

Eine kleine Zusammenstellung dieser “Einfachen Objekte”:

Alle verfügbaren Primitives findet ihr hier.

1. Cone
2. Cube
3. Cylindar
4. PaperPlane
5. Plane
6. Sphere

Papervision schmeißt derzeit bei PaperPlane ein Fehler, der wohl am Papervision Code liegt…

Cone

// new Cone( material:MaterialObject3D=null, radius:Number=100, height:Number=100, segmentsW:int=8, segmentsH:int=6, initObject:Object=null );
cone = new Cone(objectMaterial, 100, 100, 8, 6 )

Cube

// new Cube( materials:MaterialsList, width:Number=500, depth:Number=500, height:Number=500, segmentsS:int=1, segmentsT:int=1, segmentsH:int=1, insideFaces:int=0, excludeFaces:int=0, initObject:Object=null )
cube = new Cube(cubeMaterials, 100,100,100, 4, 4, 4)

Cylindar

// new Cylinder( material:MaterialObject3D=null, radius:Number=100, height:Number=100, segmentsW:int=8, segmentsH:int=6, topRadius:Number=-1, initObject:Object=null )
cylinder = new Cylinder(objectMaterial, 100,50, 8, 6, -1)

PaperPlane

// new PaperPlane( material:MaterialObject3D=null, scale :Number=0, initObject:Object=null )
paperPlane = new PaperPlane(objectMaterial, 10)

Plane

// Plane( material:MaterialObject3D=null, width:Number=0, height:Number=0, segmentsW:Number=0, segmentsH:Number=0, initObject:Object=null )
plane = new Plane(objectMaterial, 100, 100, 4, 4);

Sphere

// Sphere( material:MaterialObject3D=null, radius:Number=100, segmentsW:int=8, segmentsH:int=6, initObject:Object=null )
sphere = new Sphere(objectMaterial, 100, 10, 10 )

Der Code:

// papervision3D greate white
// template v01
// kalle saas | http://kallesaas.com

package
{
	// flash
	import flash.display.Sprite;
	import flash.events.*;

	// Papervision
	import org.papervision3d.cameras.FreeCamera3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;

	// Primitives
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.*;

	// Materials
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;

	public class Primitives extends Sprite
	{
		// papervision3D
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:FreeCamera3D;
		private var renderer:BasicRenderEngine;

		// Primitives
		private var cone:Cone;
		private var cube:Cube;
		private var cylinder:Cylinder;
		private var paperPlane:PaperPlane;
		private var plane:Plane;
		private var sphere:Sphere;
		// Material
		private var objectMaterial:WireframeMaterial;
		private var cubeMaterials:MaterialsList;

		/**
		* Konstruktor
		* @return
		*/
		public function Primitives()
		{
			init();
		}

		private function init():void
		{
			initPapervision();
			initMaterials();
			initObjects();
			initListeners();
			initAnimation();
		}

		/**
		* Alles was zum erstellen benötigt wird.
		* Viewport3D, scene, camera, renderer
		*/
		private function initPapervision():void
		{
			viewport = new Viewport3D( 800, 600, false, true );
			addChild( viewport);
			scene = new Scene3D();
			camera = new FreeCamera3D();
			camera.zoom = 5
			camera.y = 200
			camera.focus = 80
			renderer = new BasicRenderEngine();
		}

		/**
		* Erstelle alle Materialien die benötigt werden:
		*/
		private function initMaterials():void
		{
			// Primitives Material
			objectMaterial 	= new WireframeMaterial( 0x0099CB );

			cubeMaterials = new MaterialsList({
				all: objectMaterial
			});
		}

		/**
		* Erstelle alle Objekte
		*/
		private function initObjects():void
		{

			// new Cone( material:MaterialObject3D=null, radius:Number=100, height:Number=100, segmentsW:int=8, segmentsH:int=6, initObject:Object=null );
			cone = new Cone(objectMaterial, 100, 100, 8, 6 )
			cone.x = - 500
			scene.addChild(cone, 'cone')

			// new Cube( materials:MaterialsList, width:Number=500, depth:Number=500, height:Number=500, segmentsS:int=1, segmentsT:int=1, segmentsH:int=1, insideFaces:int=0, excludeFaces:int=0, initObject:Object=null )
			cube = new Cube(cubeMaterials, 100,100,100, 4, 4, 4)
			cube.x = - 250
			scene.addChild(cube, 'cube')

			// new Cylinder( material:MaterialObject3D=null, radius:Number=100, height:Number=100, segmentsW:int=8, segmentsH:int=6, topRadius:Number=-1, initObject:Object=null )
			cylinder = new Cylinder(objectMaterial, 100,50, 8, 6, -1)
			cylinder.x = 0
			scene.addChild(cylinder, 'cylindar')

			// Plane( material:MaterialObject3D=null, width:Number=0, height:Number=0, segmentsW:Number=0, segmentsH:Number=0, initObject:Object=null )
			plane = new Plane(objectMaterial, 100, 100, 4, 4);
			plane.x =  250;
			scene.addChild(plane, 'plane');

			// Sphere( material:MaterialObject3D=null, radius:Number=100, segmentsW:int=8, segmentsH:int=6, initObject:Object=null )
			sphere = new Sphere(objectMaterial, 100, 10, 10 )
			sphere.x = 500
			sphere.material.lineColor = 0xFFFFFF;
			scene.addChild(sphere, 'sphere')

			// new PaperPlane( material:MaterialObject3D=null, scale :Number=0, initObject:Object=null )
//			paperPlane = new PaperPlane(paperPlaneMaterial, 10)
//			paperPlane.x =  500
//			scene.addChild(paperPlane, 'paperPlane')
		}

		/**
		* Initiiere alle EventListener.
		*/
		private function initListeners():void
		{
			addEventListener( Event.ENTER_FRAME, onEnterFrame );
		}

		/**
		* Initiiere die EventListener für Animationen.
		*/
		private function initAnimation():void
		{
			addEventListener( Event.ENTER_FRAME, rotateObject );
		}

		/*_________________________________________________________________________
		* Funktionen für EventListener
		*/
		private function onEnterFrame( e:Event ):void
		{
			renderer.renderScene( scene, camera, viewport );
		}

		/*_________________________________________________________________________
		* Funktionen für Animationen
		*/
		private function rotateObject( e:Event ):void
		{
			cone.pitch(1);
			cone.yaw(1);

			cube.pitch(1);
			cube.yaw(1);

			cylinder.pitch(1);
			cylinder.yaw(1);

			plane.pitch(1);
			plane.yaw(1);

//			paperPlane.pitch(1);
//			paperPlane.yaw(1);

			sphere.pitch(1);
			sphere.yaw(1);
		}
	}
}

Jedes neue Papervision3D Projekt startet mit dem Aufsetzen einer Flash Datei und der dazugehörigen Document Class an.

Um mit einem funktionierenden Setup zu starten habe ich ein Template erstellt:

// papervision3D greate white
// template v01
// kalle saas | http://kallesaas.com

package
{
	// flash
	import flash.display.Sprite;
	import flash.events.*;

	// Papervision
	import org.papervision3d.cameras.FreeCamera3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;

	// Primitives
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Cube;

	// Materials
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;

	public class Primitives extends Sprite
	{
		// papervision3D
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:FreeCamera3D;
		private var renderer:BasicRenderEngine;

		// Primitives
		private var cube:Cube;
			// Material
			private var cubeMaterials:MaterialsList;

		/**
		* Konstruktor
		* @return
		*/
		public function Primitives()
		{
			init();
		}

		private function init():void
		{
			initPapervision();
			initMaterials();
			initObjects();
			initListeners();
			initAnimation();
		}

		/**
		* Alles was zum erstellen benötigt wird.
		* Viewport3D, scene, camera, renderer
		*/
		private function initPapervision():void
		{
			viewport = new Viewport3D( 800, 600, false, true );
			addChild( viewport);
			scene = new Scene3D();
			camera = new FreeCamera3D();
			renderer = new BasicRenderEngine();
		}

		/**
		* Erstelle alle Materialien die benötigt werden:
		*/
		private function initMaterials():void
		{
			// CubeMaterial
			cubeMaterials = new MaterialsList({
				all:  new WireframeMaterial( 0xDDDDDD, 100, 1 )
			});
		}

		/**
		* Erstelle alle Objekte
		*/
		private function initObjects():void
		{

			cube = new Cube(cubeMaterials, 500,500,500, 4, 4, 4)
			scene.addChild(cube, 'cube')
		}

		/**
		* Initiiere alle EventListener.
		*/
		private function initListeners():void
		{
			addEventListener( Event.ENTER_FRAME, onEnterFrame );
		}

		/**
		* Initiiere die EventListener für Animationen.
		*/
		private function initAnimation():void
		{
			addEventListener( Event.ENTER_FRAME, rotateObject );
		}

		/*_________________________________________________________________________
		* Funktionen für EventListener
		*/
		private function onEnterFrame( e:Event ):void
		{
			renderer.renderScene( scene, camera, viewport );
		}

		/*_________________________________________________________________________
		* Funktionen für Animationen
		*/
		private function rotateObject( e:Event ):void
		{
			cube.pitch(1);
			cube.yaw(1);
		}
	}
}

have fun!

In meinem ersten Artikel zu Papervision3D habe ich die Installation abgehandelt. Nun wollen wir mal zum interessanten Teil kommen.

PV3D ist im Prinzip eine Sammlung aus Actionscript 3.0 Klassen die es uns ermöglicht in einfacher Weise 3D Objekte zu erzeugen, zu manipulieren und Animationen zu erstellen.

Wir fangen ganz simple an:

source code

Ladet euch den Code herunter und probiert selber ob alles klappt.

Um zu verstehen was wir mit dem ganzen Code gemacht haben brauchen wir ein paar theoretische Grundlagen.

Ich stelle mir Papervision3D immer als Programm vor, etwas 3dsMax, indem ich 3D Objekte, Kameras, Materialien und Effekte erstelle und später das ganze dann zu einem fetzigem Bild rendern lasse.
Nichts anderes ist Papervision3D (nur leider ohne die Grafische Oberfläche …)

Im Folgenden Bild sind alle Objekte vorhanden, die man benötigt, um eine funktionierende Papervision3D Applikation zu erstellen:

Schauen wir uns zunächst die Funktion “initPapervision()”, “initObjects()” und “onEnterFrame()” in der Klasse PlaneAnimation_01 an.

private function initPapervision():void{
	scene = new Scene3D();
	camera = new FreeCamera3D();
	viewport = new Viewport3D( 800, 600, false, true );
	addChild( viewport);
	renderer = new BasicRenderEngine();
}

private function initObjects():void
{
	var materials:MaterialsList = new MaterialsList({
		all:  new WireframeMaterial( 0xDDDDDD, 100, 1 )
	});
	var cube:Cube = new Cube(materials, 500,500,500, 4, 4, 4)
	scene.addChild(cube, 'cube')
}

private function onEnterFrame( e:Event ):void
{
	var cube = scene.getChildByName('cube');
	cube.pitch(1)
	cube.yaw(1)
	renderer.renderScene( scene, camera, viewport );
}

Um in der Lage zu sein 3D Objekte zu erzeugen müssen wir eine Umgebung schaffen die dies ermöglicht.
In unserem Fall wie folgt:

	scene = new Scene3D();

Dann benötigt Papervision3D eine Kamera, durch die wir die Scene beobachten.

	camera = new FreeCamera3D();

Alles was die Kamera beobachten wird nicht einfach dargestellt, sondern wird auf dem “Viewport3D” abgebildet.

 viewport = new Viewport3D( 800, 600, false, true ); addChild( viewport);

Damit wir die Scene auch sehen können muss es gerendert werden, das passiert durch:

 renderer.renderScene( scene, camera, viewport );

Da sich der Würfel mit jedem neuen Frame bewegt muss auch die Scene bei jedem Frame gerendert werden.

Warum so Kompliziert ? Man könnte ja auch einfach den Viewport und die Kamera weglassen und so arbeiten wie bisher in 2D ?
Ganz einfach: Es lässt uns mehr Freiheit!

Ein paar Beispiele:
Wenn man zwei Viewports hinzufügt:

Das Resultat:

Sobald man mehr als ein Viewport hat, muss jeder Viewport seperat gerendert werden:

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

Im folgenden Beispiel habe ich einfach einen zweiten Würfel erzeugt und ihm ein Viewport als Material zugewiesen:

Es können natürlich auch mehr als eine Kamera eingesetzt werde.

Das war grob die Logik die hinter PV3D steckt.
Aber es gibt noch viel mehr auszuprobieren und zu entdecken…

Eine kleine Einführung in Papersision3D.

Inhalt:

1. Papervision3D “Installieren”.
2. Flash CS3 für Papervision3D vorbereiten.
3. Die Grundlagen.

1. Papervision3D “Installieren”

Den “Source code” für Papervision3D kann man am besten mit einem Subversion Client herunterladen (erheblich einfacheres updaten des PV3D Codes).

Also erstmal Subversion herunterladen und installieren. Da wir Subversion nicht über die Kommandozeile bedienen wollen brauchen wir “The coolest Interface to (Sub)Version Control”. Also herunterladen und installieren.

Nun können wir bequem den Papervision3D Source code zu unseren anderen “Custom Classes” hinzufügen.

Navigiert zu dem Order in dem ihr eure Flash Klassen aufbewahrt (oder erstellt einfach einen neuen) , erstellt darin einen neuen Ordner und nennt ihn “Papervision3D”. Dann Rechtsklick in den gerade erstellten Ordner und “SVN Checkout…” auswählen:

Auf der Google Code Seite des PV3D Projektes finden wir die Adresse für das Repository:

http://papervision3d.googlecode.com/svn/trunk/

Die Adresse in das Feld “URL of repository” Eintragen und OK klicken. Danach wird das komplette PV3D Repository herunterladen. Man achte auf die kleinen grünen Häkchen an den Ordnern. Wenn der download Vorgang beendet ist, einfach auf OK klicken.

2. Flash CS2 für papervision3D vorbereiten.

Nun Müssen wir der Flash CS3 IDE noch beibringen wo es die Pv3D Klassen finden kann.

In der Flash IDE auf “Bearbeiten->Voreinstellungen” gehen und unter Actionscript auf den Button “Actionscript 3.0-Einstellungen…” klicken. In dem Popup auf das kleine Fadenkreuz klicken und dann nach dem gerade erstellten Papervision3D Ordner suchen, dann weiter in der Baumstruktur runter: “Papervision3d->branches->GreateWhite->src”

Dann auf Ok klicken. Fertig!

Länger als gedacht, deshalb kommt der Abschnitt “Die Grundlagen” im nächsten Post.