3D Grid

Sunday, February 1st, 2009 | examples

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: ,

  • kimpai

    Why isnt possible create the grid:Array3 with normal variables in the middle of the code, and not just with the private static const ???

  • Dan

    Hi there, great stuff!
    Though I'm wondering how can I load some photos in those elements ?
    That would be great!

    Thankyou for this very useful post!

  • sanjeev

    Sorry for the previous question i got through it. Also i noticed that if i click a tile i zooms out, but reclicking on it doesnot lace it back to its original position.
    Solution:- If you place this else condition
    "
    if(selectedPlane) TweenMax.to(selectedPlane, 1, {scale:1, rotationY:0}); selectedPlane = null;
    "
    in the else part of this if condition

    "if(selectedPlane != clickedPlane)"

    then the tile will get back to its original position.

    One more question if i have say 50-90 columns then is there a way i can add a scroller? Can u please suggest me something.
    Thanks in advance

  • sanjeev

    is there a way i can use it in flex?

  • John Lindquist

    The library is included in the source download. If you need more information, go here: http://lab.polygonal.de/ds/

  • what is this "import de.polygonal.ds.Array3;
    "?

    where do i download this library from?

blog comments powered by Disqus

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 ...