Tag Archive for '3D'

Full Source: Papervision Isometric View & Pathfinding with as3isolib and A* (A Star)

Published
by
Charlie
on February 22, 2010
in A Star, A*, Flash, Papervision, Source Code, Tutorials, as3isolib and pathfinding
. 0 Comments

This week’s example / tutorial for papervision2.com is on how to mix Papervision with as3isolib and A* for a nice 3D isometric pathfinding experience.

View Tutorial Here

Controlling a Papervision Cube

Published
by
Charlie
on May 4, 2008
in AS3, Adobe, Flash, Intermediate, Papervision, Source Code and Tutorials
. 2 Comments

Papervision 3D Cube Example

View Example

The goal for this example was to create a simple way to display a cube, then rotate it one side at a time. The image is just from Google Images which will be all 6 sides of the cube. This again like the exploding image example illustrates some control over your elements. You can easily modify this example to include mouse events that you can use trigger a view each side of the cube.

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3. import caurina.transitions.Tweener;
  4.  
  5. import com.foomonger.utils.Later;
  6.  
  7. import flash.display.*;
  8.  
  9. import flash.events.Event;
  10.  
  11. import org.papervision3d.cameras.Camera3D;
  12. import org.papervision3d.materials.ColorMaterial;
  13. import org.papervision3d.materials.MovieMaterial;
  14. import org.papervision3d.materials.utils.MaterialsList;
  15. import org.papervision3d.objects.primitives.Cone;
  16. import org.papervision3d.objects.primitives.Cube;
  17. import org.papervision3d.objects.primitives.Plane;
  18. import org.papervision3d.render.BasicRenderEngine;
  19. import org.papervision3d.scenes.Scene3D;
  20. import org.papervision3d.view.Viewport3D;
  21.  
  22. public class PapervisionControlledCube extends Sprite
  23. {
  24. private var __camera:Camera3D;
  25. private var __scene:Scene3D;
  26. private var __viewport:Viewport3D;
  27. private var __renderer:BasicRenderEngine;
  28.  
  29. private var __cube:Cube;
  30. private var __matList:MaterialsList;
  31.  
  32. private var __width:Number;
  33. private var __height:Number;
  34.  
  35. private var __background:Shape;
  36.  
  37. //Only needed if you are linking the image from FlexBuilder
  38. //[Embed(source="assets/brick.png")]
  39. //public var Brick:Class;
  40.  
  41. protected var __brick:DisplayObject;
  42.  
  43. protected var __brickClip:MovieClip;
  44.  
  45. protected var __rotation:Number;
  46.  
  47. public function PapervisionControlledCube():void
  48. {
  49.  
  50. init();
  51.  
  52. }
  53. protected function init():void
  54. {
  55. __rotation = 0;
  56.  
  57. setDefaultWidthHeight();
  58.  
  59. //Only needed for flexbuilder
  60. //setupStage();
  61. //--------------------------
  62.  
  63. createChildren();
  64. initPapervision();
  65. initMaterials();
  66. initObjects();
  67. initEvents();
  68. }
  69. protected function setDefaultWidthHeight():void
  70. {
  71. __width = 500;
  72. __height = 250;
  73. }
  74.  
  75. protected function initPapervision():void
  76. {
  77. __scene = new Scene3D();
  78. __camera = new Camera3D();
  79.  
  80. __camera.zoom = 11;
  81. __camera.z = -5000;
  82. __camera.y = 200;
  83.  
  84. __viewport = new Viewport3D(__width,__height,false,true,true);
  85. __renderer = new BasicRenderEngine();
  86. addChild(__viewport);
  87. }
  88.  
  89. protected function initMaterials():void
  90. {
  91. __matList = new MaterialsList();
  92.  
  93. var movieMat:MovieMaterial = new MovieMaterial(__brickClip);
  94.  
  95. __matList.addMaterial( movieMat, "front" );
  96. __matList.addMaterial( movieMat, "back" );
  97. __matList.addMaterial( movieMat, "left" );
  98. __matList.addMaterial( movieMat, "right" );
  99. __matList.addMaterial( movieMat, "top" );
  100. __matList.addMaterial( movieMat, "bottom" );
  101.  
  102. }
  103.  
  104. protected function initObjects():void
  105. {
  106. __cube = new Cube(__matList,250,130,130);
  107. __scene.addChild(__cube);
  108.  
  109. Later.call(this,zoomIn,1000,true);
  110.  
  111. }
  112. protected function zoomIn(e:Event = null):void
  113. {
  114. Tweener.addTween(__camera,{z:-1000,transition:"easeInOutQuint",time:1,onComplete:rotateCube})
  115. }
  116.  
  117. //-----------------------------------------------------------------------
  118. //Rotate Cube
  119. //-----------------------------------------------------------------------
  120.  
  121. protected function rotateCube(e:Event = null):void
  122. {
  123.  
  124. __rotation += 90;
  125. Tweener.addTween(__cube,{rotationY:__rotation,delay:.6,transition:"easeInOutQuint",time:1,onComplete:rotateCube})
  126. }
  127.  
  128. protected function initEvents():void
  129. {
  130. this.addEventListener(Event.ENTER_FRAME,render);
  131. }
  132.  
  133. protected function render(e:Event):void
  134. {
  135. __renderer.renderScene(__scene,__camera,__viewport,true);
  136. }
  137.  
  138. protected function createChildren():void
  139. {
  140. __brick = new Brick();
  141. __brickClip = new MovieClip();
  142. __brickClip.addChild(__brick);
  143.  
  144. }
  145. //Only used in flexbuilder
  146. private function setupStage():void
  147. {
  148. stage.stageWidth         = __width;
  149. stage.stageHeight         = __height;
  150. stage.align             = "cc";
  151. stage.scaleMode         = "noScale";
  152. stage.stageFocusRect     = true;
  153.  
  154. }
  155. }
  156. }

Download Source

Other classes used:

1) Papervision 2.0

2) Foomonger's Code (Call Later)

3) Tweener

Papervision 2.0 – Getting started from a simple starting example

Published
by
Charlie
on May 4, 2008
in AS3, Adobe, Intermediate, Papervision and Tutorials
. 9 Comments

At first when trying to create my first few Papervision projects it seemed a bit overwhelming. As you work with it more and more you notice that there are really only a few elements for creating a simple Papervision project. Then you can forget about the code and just think about what cool things you can do.

For any Papervision 2.0 project you need:

PLAIN TEXT
Actionscript:
  1. //As always your imports
  2. import flash.display.*;
  3. import flash.events.Event;
  4. import org.papervision3d.scenes.Scene3D;
  5. import org.papervision3d.view.Viewport3D;
  6. import org.papervision3d.cameras.Camera3D;
  7. import org.papervision3d.materials.ColorMaterial;
  8. import org.papervision3d.objects.primitives.Plane;
  9. import org.papervision3d.render.BasicRenderEngine;
  10.  
  11. //1) A Scene
  12. var scene:Scene3D = new Scene3D()
  13.  
  14. //2) A Camera
  15. var camera = new Camera3D()
  16. //Setting the camera zoom to 11 will make sure your objects are rendered at 100%
  17. camera.zoom = 11;
  18.  
  19. //3) A view area "viewport" - think of this as your canvas or stage for your 3D objects
  20. var viewport:Viewport3D = new Viewport3D(500,300,false,true,true)
  21.  
  22. //4) A render engine
  23. var renderer:BasicRenderEngine = new BasicRenderEngine();
  24.  
  25. //5) add the viewport to the stage
  26. addChild(viewport);
  27.  
  28. //6) Something in your scene such as a Plane, Cube, Sphere, etc - in this case a plane with a black color material
  29. var plane:Plane = new Plane(new ColorMaterial(0x000000),100,100)
  30. //add your object to your scene
  31. scene.addChild(plane)
  32.  
  33. //7) Create a loop for rendering your animation
  34. this.addEventListener(Event.ENTER_FRAME,render);
  35. function render(e:Event):void
  36. {
  37. //Add some simple animation
  38. plane.rotationY += 2; //Could also be plane.yaw(2);
  39. //Render the scene
  40. renderer.renderScene(scene,camera,viewport,true);
  41. }

Don't forget to download the latest Papervision code

The great thing is that if you build this once into a nice clean class, you can just keep re-using that class as your papervision starting place. Then you can do what you do best, create and have fun!

Start with this and add a cube or different materials and animations. Then toss in some Tweener code to get some cool movement effects. In a few days you'll have some amazing things.


Follow papervision2 on Twitter

RSS Feed