Archive for February, 2009

Getting Started with Papervision3D

Wednesday, February 4th, 2009 | announcements | Comments

If you’re looking for info on how to get started with Papervision3D, we held a competition over at the forums for the best “Getting Started” tutorial. View them here and vote for your favorite:

http://forum.papervision3d.org/viewtopic.php?f=23&t=7

Internal Carousel

Tuesday, February 3rd, 2009 | examples | Comments

I’ve seen this effect pop up on a few sites, so I thought I’d make a demo:


source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

package
{
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Point;
 
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.view.BitmapViewport3D;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class InternalCarousel extends BasicView
	{
		private static const NUMBER_OF_PLANES:int = 20;
 
		private var carousel:DisplayObject3D = new DisplayObject3D();
		private var bitmapViewport:BitmapViewport3D = new BitmapViewport3D(900, 480);
		private const blur:BlurFilter = new BlurFilter(3, 3, 2);
		private const alphaTrans:ColorTransform = new ColorTransform(1, 1, 1, 1, 1, 1, 1, -35);
		private var point:Point = new Point();
 
 
 
		public function InternalCarousel()
		{
			bitmapViewport.fillBeforeRender = false;
			addChild(bitmapViewport);
			camera.z = 1;
			for(var i:int = 0; i < NUMBER_OF_PLANES; i++)
			{
				var randomColor:Number = Math.random() * 0xffffff;
				var colorMaterial:ColorMaterial = new ColorMaterial(randomColor);
				colorMaterial.doubleSided = true;
 
				var plane:Plane = new Plane(colorMaterial, 150, 300);
				plane.rotationY = 360 / NUMBER_OF_PLANES * i;
				plane.moveForward(1000);
				carousel.addChild(plane);
			}
 
			scene.addChild(carousel);
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			carousel.rotationY -= viewport.containerSprite.mouseX / 200;
			carousel.rotationZ = viewport.containerSprite.mouseX / 200;
 
			renderer.renderScene(scene, camera, bitmapViewport);
			bitmapViewport.bitmapData.applyFilter(bitmapViewport.bitmapData, bitmapViewport.bitmapData.rect, point, blur);
			bitmapViewport.bitmapData.colorTransform(bitmapViewport.bitmapData.rect, alphaTrans);
		}
	}
}

Tags:

3D Grid

Sunday, February 1st, 2009 | examples | Comments

This builds on the previous example.


source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

package {
	import de.polygonal.ds.Array3;
	import de.polygonal.ds.Iterator;
 
	import flash.display.DisplayObject;
	import flash.display.Shape;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class Grid3D extends BasicView
	{
		private static const GRID_COLS:int = 9;
		private static const GRID_X_SPACING:Number = 200;
		private static const CENTER_X_OFFSET:Number = GRID_COLS  * GRID_X_SPACING / 2 - GRID_X_SPACING / 2;
 
		private static const GRID_ROWS:int = 4;
		private static const GRID_Y_SPACING:Number = 200;
		private static const CENTER_Y_OFFSET:Number = GRID_ROWS * GRID_Y_SPACING / 2 - GRID_Y_SPACING / 2;
 
		private static const GRID_LAYERS:int = 4;
		private static const GRID_Z_SPACING:Number = 200;
		private static const CENTER_Z_OFFSET:Number = GRID_LAYERS * GRID_Z_SPACING / 2 - GRID_Z_SPACING / 2;
 
		private var grid:Array3 = new Array3(GRID_COLS, GRID_ROWS, GRID_LAYERS);
 
		private var selectedPlane:Plane;
		private var cameraPitch:Number = 90;
		private var cameraYaw:Number = 270;
		private var cameraTarget:DisplayObject3D = DisplayObject3D.ZERO;
		private var previousMouseX:Number = 0;
		private var isOrbiting:Boolean = false;
 
 
		public function Grid3D()
		{
			viewport.interactive = true;
			createGrid();
			startRendering();
 
			stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}
 
		private function createGrid():void
		{
			for(var i:int = 0; i < GRID_COLS; i++)
			{
				for(var j:int = 0; j < GRID_ROWS; j++)
				{
					for(var k:int = 0; k < GRID_LAYERS; k++)
					{
						var randomColor:Number = Math.random() * 0xffffff;
						var shape:Shape = new Shape();
						with(shape)
						{
							graphics.beginFill(randomColor);
							graphics.drawRect(0, 0, 50, 50);
							graphics.endFill();
						}
						var material:MovieMaterial = new MovieMaterial(shape);
						//animated needs to be true to tween the color
						material.animated = true;
						material.doubleSided = true;
						material.interactive = true;
 
						var plane:Plane = new Plane(material, 100, 100);
						plane.name = "plane_" + i + "_" +j;
						plane.x = i * GRID_X_SPACING - CENTER_X_OFFSET;
						plane.y = j * GRID_Y_SPACING - CENTER_Y_OFFSET;
						plane.z = k * GRID_Z_SPACING - CENTER_Z_OFFSET;
 
						plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
 
						//push planes references into our collection
						grid.set(i, j, k, plane); 
 
						scene.addChild(plane);
					}
				}
			}
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			var clickedPlane:Plane = Plane(event.target);
			if(selectedPlane != clickedPlane)
			{
				if(selectedPlane) TweenMax.to(selectedPlane, 1, {scale:1, rotationY:0});
				selectedPlane = Plane(event.target);
 
				TweenMax.to(selectedPlane, 1, {scale:2, rotationY:180});
 
				var randomColor:Number = Math.random() * 0xffffff;
 
				//loop through our grid using the iterator of Array2
				var time:Number = .1;
 
				var itr:Iterator = grid.getIterator();
				itr.start();
				while(itr.hasNext())
				{
					time += .1;
					if(itr.data != null) 
					{
						var plane:Plane = Plane(itr.data);
						//We don't tween the color of the selectedPlane
						if(plane != selectedPlane)
						{
							//tint the color of the movie asset in the material
							var movieClip:DisplayObject = MovieMaterial(plane.material).movie;
							TweenMax.to(movieClip, time, {tint:randomColor});
						}
					}
					itr.next();
				}	
			}
		}
 
		private function mouseDownHandler(event:MouseEvent):void
		{
			isOrbiting = true;
		}
 
		private function mouseUpHandler(event:MouseEvent):void
		{
			isOrbiting = false;
		}
 
 
		override protected function onRenderTick(event:Event=null):void
		{
 			if(isOrbiting)
 			{
				var differenceX:Number = viewport.containerSprite.mouseX - previousMouseX;
 
				cameraYaw += differenceX;
				cameraYaw %= 360;
 
				camera.orbit(cameraPitch, cameraYaw, true, camera.target);
 			}
 
			previousMouseX = viewport.containerSprite.mouseX;
			super.onRenderTick(event);
		}
	}
}

Tags: ,

Grid

Sunday, February 1st, 2009 | examples | Comments


source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

package {
	import de.polygonal.ds.Array2;
	import de.polygonal.ds.Iterator;
 
	import flash.display.DisplayObject;
	import flash.display.Shape;
 
	import gs.TweenMax;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class Grid extends BasicView
	{
		private static const GRID_COLS:int = 9;
		private static const GRID_X_SPACING:Number = 200;
		private static const CENTER_X_OFFSET:Number = GRID_COLS  * GRID_X_SPACING / 2 - GRID_X_SPACING / 2;
 
		private static const GRID_ROWS:int = 4;
		private static const GRID_Y_SPACING:Number = 200;
		private static const CENTER_Y_OFFSET:Number = GRID_ROWS * GRID_Y_SPACING / 2 - GRID_Y_SPACING / 2;
 
		private var grid:Array2 = new Array2(GRID_ROWS, GRID_COLS);
 
		private var selectedPlane:Plane;
 
		public function Grid()
		{
			viewport.interactive = true;
			createGrid();
			startRendering();
		}
 
		private function createGrid():void
		{
			for(var i:int = 0; i < GRID_COLS; i++)
			{
				for(var j:int = 0; j < GRID_ROWS; j++)
				{
					var randomColor:Number = Math.random() * 0xffffff;
					var shape:Shape = new Shape();
					with(shape)
					{
						graphics.beginFill(randomColor);
						graphics.drawRect(0, 0, 50, 50);
						graphics.endFill();
					}
					var material:MovieMaterial = new MovieMaterial(shape);
					//animated needs to be true to tween the color
					material.animated = true;
					material.doubleSided = true;
					material.interactive = true;
 
					var plane:Plane = new Plane(material, 100, 100);
					plane.name = "plane_" + i + "_" +j;
					plane.x = i * GRID_X_SPACING - CENTER_X_OFFSET;
					plane.y = j * GRID_Y_SPACING - CENTER_Y_OFFSET;
 
					plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
 
					//push planes references into our collection
					grid.set(j, i, plane); 
 
					scene.addChild(plane);
				}
			}
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			var clickedPlane:Plane = Plane(event.target);
			if(selectedPlane != clickedPlane)
			{
				if(selectedPlane) TweenMax.to(selectedPlane, 1, {scale:1, rotationY:0});
				selectedPlane = Plane(event.target);
 
				TweenMax.to(selectedPlane, 1, {scale:2, rotationY:180});
 
				var randomColor:Number = Math.random() * 0xffffff;
 
				//loop through our grid using the iterator of Array2
				var itr:Iterator = grid.getIterator();
				itr.start();
				while(itr.hasNext())
				{
					if(itr.data != null) 
					{
						var plane:Plane = Plane(itr.data);
						//We don't tween the color of the selectedPlane
						if(plane != selectedPlane)
						{
							//tint the color of the movie asset in the material
							var movieClip:DisplayObject = MovieMaterial(plane.material).movie;
							TweenMax.to(movieClip, 1, {tint:randomColor});
						}
					}
					itr.next();
				}	
			}
		}
	}
}

Tags: , , ,

Next Entries »

 Subscribe to the pv3d.org feed!

Follow me on Twitter

Visit the Papervision3D Forum

Search

Recommended Books

Speaking at FITC Toronto

 

February 2009
M T W T F S S
« Jan   Mar »
 1
2345678
9101112131415
16171819202122
232425262728  

Preferred Video Tutorial Resolution

  • 1024x768 (53%, 85 Votes)
  • 1280x1024 (15%, 24 Votes)
  • 1920x1080 (15%, 24 Votes)
  • 800x600 (13%, 20 Votes)
  • 480x320 (4%, 6 Votes)
  • 640x480 (0%, 2 Votes)

Total Voters: 160

Loading ... Loading ...