Archive for April, 2009

Sliced Cube

Thursday, April 9th, 2009 | examples | Comments

This is kind of combination of my last two examples which turned out pretty nicely.

I’m sorry the code is a big pile of crap. I’m too lazy right now to clean it up :)


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

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
 
	import gs.TweenMax;
	import gs.easing.Quad;
 
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="0xffffff", frameRate="31")]
	public class SlicedCube extends BasicView
	{
		[Embed(source="/assets/car.jpg")]
		private var carAsset:Class;
 
		[Embed(source="/assets/back.jpg")]
		private var backAsset:Class;
 
		[Embed(source="/assets/brabus.jpg")]
		private var brabusAsset:Class;
 
		[Embed(source="/assets/ferrari.jpg")]
		private var ferrariAsset:Class;
 
		private var mouseDownX:Number = 0;
		private var targetRotation:Number = 0;
 
		private var NUM_SLICES:int = 5;
 
		private var cubes:Array = [];
 
		public function SlicedCube()
		{
			super(900, 480);
 
			opaqueBackground = 0x000000;
			camera.focus = 100;
			camera.zoom = 10;
			camera.ortho = false;
 
			for(var i:int = 0; i < NUM_SLICES; i++)
			{
				var materialsList:MaterialsList = new MaterialsList();
				var sliceWidth:Number = 900 / NUM_SLICES;
				var sliceX:Number = sliceWidth * i;
 
 
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(carAsset, sliceX, sliceWidth, true), "front");
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(backAsset, sliceX, sliceWidth), "back");
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(brabusAsset, sliceX, sliceWidth), "top");
				materialsList.addMaterial(createSlicedBitmapMaterialFromAsset(ferrariAsset, sliceX, sliceWidth, true), "bottom");
				materialsList.addMaterial(new ColorMaterial(0xffffff), "right");
				materialsList.addMaterial(new ColorMaterial(0xffffff), "left");
 
				var cube:Cube = new Cube(materialsList, sliceWidth, 480, 480);
				cube.x = sliceX - 450 + sliceWidth / 2;
				cube.z = 240;
 
				scene.addChild(cube);
 
 
				cubes.push(cube);
			}
 
			startRendering();
 
			addEventListener(MouseEvent.CLICK, mouseDownHandler);
		}
 
		private function createSlicedBitmapMaterialFromAsset(asset:Class, sliceX:Number, sliceWidth:Number, isFlipped:Boolean = false):BitmapMaterial
		{
			var bitmap:Bitmap = new asset() as Bitmap;
			var bitmapData:BitmapData = new BitmapData(sliceWidth, 480, false, 0xcc0000);
			if(isFlipped)
			{
				var sliceMatrix:Matrix = new Matrix();
				sliceMatrix.translate(-180, -240);
				sliceMatrix.rotate(Math.PI);
				sliceMatrix.translate(sliceX, 240);
				bitmapData.draw(bitmap, sliceMatrix);
			}
			else
			{
				bitmapData.copyPixels(bitmap.bitmapData, new Rectangle(sliceX, 0, sliceWidth, 480), new Point());
			}
			var material:BitmapMaterial = new BitmapMaterial(bitmapData, true);
 
			return material;
		}
 
		private function mouseDownHandler(event:MouseEvent):void
		{
			targetRotation += 90 % 360;
			cubes.forEach(cubes_forEachCallback);
		}
 
		private function cubes_forEachCallback(cube:Cube, index:int, array:Array):void
		{
			index++;
			var time:Number = .3 * index;
			TweenMax.to(cube, time, {rotationX:targetRotation, ease:Quad.easeInOut});
		}
	}
}

Tags: , , ,

Full Screen Cube

Wednesday, April 8th, 2009 | examples | Comments

Click and drag the cube to spin (this simple example is based off of that sweet Compiz rotate cube effect):


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

package
{
	import flash.display.Bitmap;
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
	import gs.easing.Quad;
 
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="0xffffff", frameRate="31")]
	public class FullScreenCube extends BasicView
	{
		[Embed(source="/assets/car.jpg")]
		private var carAsset:Class;
 
		[Embed(source="/assets/back.jpg")]
		private var backAsset:Class;
 
		[Embed(source="/assets/brabus.jpg")]
		private var brabusAsset:Class;
 
		[Embed(source="/assets/ferrari.jpg")]
		private var ferrariAsset:Class;
 
		private var cube:Cube;		
		private var mouseDownX:Number = 0;
		private var targetRotation:Number = 0;
 
		public function FullScreenCube()
		{
			super(900, 480);
 
			opaqueBackground = 0x000000;
			camera.focus = 100;
			camera.zoom = 10;
 
			var materialsList:MaterialsList = new MaterialsList();
			materialsList.addMaterial(createBitmapMaterialFromAsset(carAsset), "front");
			materialsList.addMaterial(createBitmapMaterialFromAsset(backAsset), "back");
			materialsList.addMaterial(createBitmapMaterialFromAsset(brabusAsset), "left");
			materialsList.addMaterial(createBitmapMaterialFromAsset(ferrariAsset), "right");
			materialsList.addMaterial(new ColorMaterial(0xffffff), "top");
			materialsList.addMaterial(new ColorMaterial(0xffffff), "bottom");
 
			cube = new Cube(materialsList, 900, 900, 480);
			cube.z = 450;
			scene.addChild(cube);
 
			startRendering();
 
			addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}
 
		private function createBitmapMaterialFromAsset(asset:Class):BitmapMaterial
		{
			var bitmap:Bitmap = new asset() as Bitmap;
			var material:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData, true);
 
			return material;
		}
 
		private function mouseDownHandler(event:MouseEvent):void
		{
			mouseDownX = event.localX;
		}
 
		private function mouseUpHandler(event:MouseEvent):void
		{
			var currentMouseX:Number = event.localX;
			if(currentMouseX < mouseDownX)
			{
				targetRotation += 90;
 
			}
			else
			{
				targetRotation -= 90;
			}
			TweenMax.to(cube, .5, {rotationY:targetRotation, z:450, bezierThrough:[{z:700}], ease:Quad.easeInOut});
		}
	}
}

Tags: , ,

Download Source?

Monday, April 6th, 2009 | tutorials, videos | Comments

Many people ask me, “How do I use the source here?”

This video shows you exactly what to do:

https://admin.na3.acrobat.com/_a204547676/p50465260/

So if you see a little “source” or “download source” link in any of my posts (which is actually most of them), it’s as easy as that video.

(Yes, this is the same video that has been in the FAQ for a long time. But many people seemed to have missed it, so I put it up here.)

Sliced Plane

Sunday, April 5th, 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

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.events.Event;
	import flash.geom.Point;
	import flash.geom.Rectangle;
 
	import org.papervision3d.core.proto.MaterialObject3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#000000", frameRate="31")]
	public class SlicedPlane extends BasicView
	{
		[Embed(source="assets/image.jpg")]
		private var bannerAsset:Class;
 
		private static const IMAGE_WIDTH:Number = 900;
		private static const IMAGE_HEIGHT:Number = 480;
 
		private static const NUM_SLICES:int = 30;
 
		private var planeContainer:DisplayObject3D = new DisplayObject3D();
 
		public function SlicedPlane()
		{
			super(900, 480);
			opaqueBackground = 0x000000;
			camera.focus = 100;
			camera.zoom = 10;
 
			var bannerBitmap:Bitmap = new bannerAsset() as Bitmap;
 
			for(var i:int = 0; i < NUM_SLICES; i++)
			{
				var slice:BitmapData = new BitmapData(IMAGE_WIDTH / NUM_SLICES, IMAGE_HEIGHT);
				var sourceRectangle:Rectangle = new Rectangle(i * IMAGE_WIDTH / NUM_SLICES, 0, IMAGE_WIDTH / NUM_SLICES, IMAGE_HEIGHT);
				slice.copyPixels(bannerBitmap.bitmapData, sourceRectangle, new Point(0, 0));
 
				var material:MaterialObject3D = new BitmapMaterial(slice);
				material.doubleSided = true;
				var plane:Plane = new Plane(material);
				plane.x = i * IMAGE_WIDTH / NUM_SLICES - IMAGE_WIDTH / 2;
				plane.rotationX = 360 / NUM_SLICES * i;
 
				planeContainer.addChild(plane);
			}
 
			scene.addChild(planeContainer);
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			planeContainer.rotationX += 2;
			super.onRenderTick(event);
		}
	}
}

Tags: , ,

« Previous Entries Next Entries »

 Subscribe to the pv3d.org feed!

Follow me on Twitter

Visit the Papervision3D Forum

Search

Recommended Books

Speaking at FITC Toronto

Recent Comments

 

April 2009
M T W T F S S
« Mar   May »
 12345
6789101112
13141516171819
20212223242526
27282930  

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