this is portable

Papervision3D - cubes in white void-like motion (almost)

July 15th, 2008

flash

UPDATE - Thanks to the Papervsion3D list, I found a better approach, see this post.

This is a quick Papervsion3D 2.0 thing I've been working. The white void app is still one of my favourite Papervision sites, and I thought trying to build something similar would make a good a first Papervision project.

So far it's only a small step towards the finished product.  It's based on BasicView which is so helpful in getting you started with Papervision3D because it saves a whole lot of set up.

I have an outer cube that contains the two inner "cubes" and I'm moving that outer cube in response to the mouse movment.  Right now the closer your mouse is to the x and y coordinates of the outer cube, the less movement there is.

The two green lines you see intersect at the x=0, y=0 point of the outer cube just to help give some reference.  If you download the source files (a FlexiBuilder project) you can uncomment a line to wireframe the entire outer cube.

Oh, and if you like BasicView, check out Seb Lee-Delisle's ReflectionView class.

Here's the source of the CubeCamera class (aka the class that's doing most of the work here).  Pardon the terrible appearance, it seems that my code highlighting plug-in has crapped out on me today.  The Source is here if you're not into scrolling lots of un-highlighted code.

This experiment could  be done in Flash instead of FlexBuilder just as easily, if you're wondering.

Actionscript:
  1. package {
  2. import flash.events.Event;
  3. import org.papervision3d.materials.ColorMaterial;
  4. import org.papervision3d.materials.WireframeMaterial;
  5. import org.papervision3d.materials.utils.MaterialsList;
  6. import org.papervision3d.objects.primitives.Cube;
  7. import org.papervision3d.objects.primitives.Plane;
  8. import org.papervision3d.view.BasicView;
  9.  
  10. public class CubeCamera extends BasicView
  11. {
  12. private var bigBox:Cube;
  13. private var cube1:Cube;
  14. private var cube2:Cube;
  15. private var line1:Plane;
  16. private var line2:Plane;
  17.  
  18. public function CubeCamera() {
  19. super(1,1,true,true);
  20. initScene();
  21. startRendering();
  22. }
  23.  
  24. private function initScene():void {
  25.  
  26. //Set the background
  27. opaqueBackground = 0x000000;
  28.  
  29. //use this line for visible wireframe on the outter cube
  30. //var wireFrameMaterial:WireframeMaterial = new WireframeMaterial(0x999999, 1, 2);
  31. //use this line for an invisible outter cube
  32. var wireFrameMaterial:WireframeMaterial = new WireframeMaterial(0x999999, 0, 0);
  33. var wml:MaterialsList = new MaterialsList({all:wireFrameMaterial});
  34.  
  35. //create the main  3D container
  36. bigBox = new Cube(wml, 400,200,400, 3,3,3);
  37.  
  38. //cube 1
  39. var cubeMaterial:ColorMaterial = new ColorMaterial(0xcecece,1,true);
  40. cubeMaterial.doubleSided = true;
  41. cubeMaterial.interactive = true;
  42. var ml:MaterialsList = new MaterialsList({all:cubeMaterial});
  43.  
  44. cube1 = new Cube(ml,100,50,100,1,1,1);
  45. bigBox.addChild(cube1);
  46. cube1.x = -100;
  47. cube1.y = 0;
  48. cube1.z = 0;
  49.  
  50. //cube2
  51. cube2 = new Cube(ml,100,50,100,1,1,1);
  52. bigBox.addChild(cube2);
  53. cube2.x = cube1.x + 200;
  54. cube2.y = 0;
  55. cube2.z = 0;
  56.  
  57. //add the container object to the stage
  58. scene.addChild(bigBox);
  59. bigBox.visible = true;
  60.  
  61. //set up the camera
  62. camera.zoom = 10;
  63. camera.lookAt(bigBox);
  64.  
  65. //add a plane to show where bigBox zero point is
  66. var lineMaterial:ColorMaterial = new ColorMaterial(0x00ff00,1,false);
  67. line1 = new Plane(lineMaterial, 1,500,1,1);
  68. line2 = new Plane(lineMaterial, 500, 1, 1,1);
  69. bigBox.addChild(line1);
  70. bigBox.addChild(line2);
  71. line1.x = line2.x = 0;
  72. line1.y = line2.y = 0;
  73. }
  74.  
  75. override protected function onRenderTick(event:Event = null):void
  76. {
  77. //changing the amount of pitch on bigBox (the outter cue) based on how close mouseY is to bigBox.y
  78. if (viewport.mouseY-bigBox.y>1) {
  79. bigBox.pitch( -((viewport.mouseY - (stage.stageHeight / 2)) / stage.stageHeight)*4);
  80. } else if ( viewport.mouseY - bigBox.y <1) {
  81. bigBox.pitch(0);
  82. }
  83.  
  84. //changing the amount of yaw on bigBox (the outter cue) based on how close mouseX is to bigBox.X
  85. if (viewport.mouseX-bigBox.x> 1) {
  86. bigBox.yaw( -((viewport.mouseX - (stage.stageWidth / 2)) / stage.stageWidth)*4);
  87. }else if(viewport.mouseX - bigBox.x <1) {
  88. bigBox.yaw(0);
  89. }
  90.  
  91. super.onRenderTick(event);
  92. }
  93.  
  94. }
  95. }

*permalink*

« Flashpitt2008 tickets on sale | Simple Papervision3D Panoramic (PittMFUG presentation) »

Leave a Comment

your name and email are required to post a comment. however, your email will NOT be published.