cube

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

Cube Inside Faces and Outside Faces

Friday, January 2nd, 2009 | examples | Comments

*updated to address comments


source

package
{
	import flash.display.Bitmap;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import org.papervision3d.core.proto.MaterialObject3D;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.shaders.CellShader;
	import org.papervision3d.materials.shaders.ShadedMaterial;
	import org.papervision3d.materials.shaders.Shader;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.view.stats.StatsView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class InsideFacesOfACube extends BasicView
	{
		[Embed(source="assets/back.jpg")]
		private var backAsset:Class;
 
		[Embed(source="assets/bottom.jpg")]
		private var bottomAsset:Class;
 
		[Embed(source="assets/front.jpg")]
		private var frontAsset:Class;
 
		[Embed(source="assets/left.jpg")]
		private var leftAsset:Class;
 
		[Embed(source="assets/right.jpg")]
		private var rightAsset:Class;
 
		[Embed(source="assets/top.jpg")]
		private var topAsset:Class;
 
		[Embed(source="assets/287.jpg")]
		private var environmentAsset:Class;
 
		private var light:PointLight3D;
		private var cube:Cube;
		private var materialsList:MaterialsList;
		private var sides:int = Cube.ALL;
 
		public function InsideFacesOfACube()
		{
			createMaterialsList();
 
			cube = new Cube(materialsList, 500, 500, 500, 5, 5, 5, sides);
			scene.addChild(cube);
 
			startRendering();
 
			stage.addEventListener(MouseEvent.CLICK, stage_clickHandler);
		}
 
		private function createMaterialsList():void
		{
			materialsList = new MaterialsList();
 
			light = new PointLight3D();
 
			materialsList.addMaterial(createShadedMaterial(backAsset), "back");
			materialsList.addMaterial(createShadedMaterial(bottomAsset), "bottom");
			materialsList.addMaterial(createShadedMaterial(frontAsset), "front");
			materialsList.addMaterial(createShadedMaterial(leftAsset), "left");
			materialsList.addMaterial(createShadedMaterial(rightAsset), "right");
			materialsList.addMaterial(createShadedMaterial(topAsset), "top");
		}
 
		private function createShadedMaterial(bitmapAsset:Class):MaterialObject3D
		{
			var bitmap:Bitmap = new bitmapAsset() as Bitmap;
			var bitmapMaterial:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData, true);
			var shader:Shader = new CellShader(light, 0xffffff, 0xaaaaaa, 10); 
			var shadedMaterial:ShadedMaterial = new ShadedMaterial(bitmapMaterial, shader);
			return shadedMaterial;
		}
 
		private function stage_clickHandler(event:MouseEvent):void
		{
			if(sides == Cube.ALL)
			{
				sides = Cube.NONE;
			}
			else
			{
				//you could also specify specific sides you want
				//i.e. - if you want every side but the front do:
				//sides = Cube.ALL - Cube.Front;
				//or if you only want the top and the bottom do:
				//sides = Cube.TOP + Cube.BOTTOM;
				sides = Cube.ALL;
			}
 
			scene.removeChild(cube);
			createMaterialsList();
			var tempRotationX:Number = cube.rotationX;
			var tempRotationY:Number = cube.rotationY; 
			cube = new Cube(materialsList, 500, 500, 500, 5, 5, 5, sides);
			cube.rotationX = tempRotationX;
			cube.rotationY = tempRotationY; 
			scene.addChild(cube);
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			cube.rotationY += (viewport.containerSprite.mouseX - cube.rotationY) * .1;
			cube.rotationX += (viewport.containerSprite.mouseY - cube.rotationX) * .1;
			renderer.renderScene(scene, camera, viewport);
		}
	}
}

Tags: ,

 Subscribe to the pv3d.org feed!

Follow me on Twitter

Visit the Papervision3D Forum

Search

Recommended Books

Speaking at FITC Toronto

 

March 2010
M T W T F S S
« Jan    
1234567
891011121314
15161718192021
22232425262728
293031  

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