Papervision Double Sided Plane

Published
by
Charlie
on December 9, 2008
in AS3, Actionscript 3 Papervision, Actionscript 3.0, Flash, Papervision, Papervision 3D and Tutorials
. 12 Comments Tags: , , , , , .

Papervision double sided plane

Thanks to Luke I am the new proud owner of Papervision2.com. He is keeping busy and just ran out of time. I know he is sad to see it go, but glad that someone can take over and continue helping the Flash / Papervision community.

To introduce myself, I decided to take a tutorial from my site and add it to this new site.

The ole, doublesided plane. Lets get started.

Here are your options as we see it to create a double-sided plane.

Option 1:
Create two planes. Plane 1 with a z sorting of 1 and the other with 0 and the rotationY of one of those planes set to 180. You could then contain this in one display container.

Version 2:
Create one cube with a depth of 0. Then you just apply a material to the front and back. OK OK OK so this is not really a Plane... but I like this approach because it allows me to more easily use things like Bend Modifier.

If anyone has a better or more improved approach we would love to hear about it.

Here is what the code for Option 1:

PLAIN TEXT
Actionscript:
  1. package com.cs54.ui
  2. {
  3. import org.papervision3d.objects.primitives.Plane;
  4. import org.papervision3d.materials.MovieMaterial;
  5. import org.papervision3d.materials.utils.MaterialsList;
  6. import org.papervision3d.objects.DisplayObject3D;
  7. import com.everydayflash.pv3d.modifiers.Bend;
  8. import flash.display.DisplayObject;public class Tree2Planes extends DisplayObject3D
  9. {
  10. [Embed(source="/assets/tree-side-1.png")]
  11. public var TreeFront        :Class;[Embed(source="/assets/tree-side-2.png")]
  12. public var TreeBack            :Class;
  13.  
  14. protected var treeFront        :DisplayObject;
  15. protected var treeBack        :DisplayObject;
  16.  
  17. protected var treeFrontMat    :MovieMaterial;
  18. protected var treeBackMat    :MovieMaterial;
  19.  
  20. protected var treeMatList    :MaterialsList;
  21.  
  22. protected var _height        :Number = 175;
  23. protected var _width        :Number = 191;
  24. protected var _container    :DisplayObject3D;
  25.  
  26. protected var plane1        :Plane;
  27. protected var plane2        :Plane;
  28.  
  29. public function Tree2Planes():void
  30. {
  31. treeMatList     = new MaterialsList();
  32. treeFront        = new TreeFront();
  33. treeBack         = new TreeBack();
  34.  
  35. //Tree Materials
  36. treeFrontMat     = new MovieMaterial(treeFront, true);
  37. treeBackMat     = new MovieMaterial(treeBack, true);
  38.  
  39. treeFrontMat.allowAutoResize = false;
  40.  
  41. plane1        = new Plane(treeFrontMat,_width,_height);
  42. plane2        = new Plane(treeBackMat,_width,_height);
  43.  
  44. plane1.z = 1;
  45. plane1.rotationY = 180;
  46.  
  47. _container = new DisplayObject3D();
  48.  
  49. addChild(_container);
  50. _container.addChild(plane1);
  51. _container.addChild(plane2);
  52.  
  53. }
  54.  
  55. public function get height():Number
  56. {
  57. return _height;
  58. }
  59. public function get width():Number
  60. {
  61. return _width;
  62. }
  63.  
  64. }
  65.  
  66. }

Here is what the code for Option 2:

PLAIN TEXT
Actionscript:
  1. package com.cs54.ui
  2. {
  3. import org.papervision3d.materials.MovieMaterial;
  4. import org.papervision3d.materials.utils.MaterialsList;
  5. import org.papervision3d.objects.DisplayObject3D;
  6. import org.papervision3d.objects.primitives.Cube;
  7. import com.everydayflash.pv3d.modifiers.Bend;
  8. import flash.display.DisplayObject;
  9.  
  10. public class Tree extends DisplayObject3D
  11. {
  12. [Embed(source="/assets/tree-side-1.png")]
  13. public var TreeFront        :Class;
  14.  
  15. [Embed(source="/assets/tree-side-2.png")]
  16. public var TreeBack            :Class;
  17.  
  18. protected var treeFront        :DisplayObject;
  19. protected var treeBack        :DisplayObject;
  20.  
  21. protected var treeFrontMat    :MovieMaterial;
  22. protected var treeBackMat    :MovieMaterial;
  23.  
  24. protected var treeMatList    :MaterialsList;
  25.  
  26. protected var treeCube        :Cube;
  27. protected var _height        :Number = 175;
  28. protected var _width        :Number = 191;
  29. protected var _container    :DisplayObject3D;
  30.  
  31. public function Tree():void
  32. {
  33.  
  34. treeMatList     = new MaterialsList();
  35. treeFront        = new TreeFront();
  36. treeBack         = new TreeBack();
  37.  
  38. //Tree Materials
  39. treeFrontMat     = new MovieMaterial(treeFront, true);
  40. treeBackMat     = new MovieMaterial(treeBack, true);
  41.  
  42. treeFrontMat.allowAutoResize = false;
  43.  
  44. treeFrontMat.animated = true;
  45.  
  46. treeMatList.addMaterial( treeFrontMat, "front" );
  47. treeMatList.addMaterial( treeBackMat, "back" );
  48.  
  49. treeCube     = new Cube(treeMatList, _width, 0, _height, 6, 6, 6);
  50.  
  51. var bend:Bend = new Bend(treeCube);
  52.  
  53. bend.quickBend(1, .1);
  54.  
  55. addChild(treeCube);
  56.  
  57. }
  58.  
  59. public function get height():Number
  60. {
  61. return _height;
  62. }
  63. public function get width():Number
  64. {
  65. return _width;
  66. }
  67.  
  68. }
  69.  
  70. }

More to come in the weeks ahead. New papervision tutorials, full source, and support will all be provided.

Thanks for your continued support.

Charles Schulze,
CS54, LLC

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

12 Responses to “Papervision Double Sided Plane”

Feed for this Entry Trackback Address

Leave a Reply


Follow papervision2 on Twitter

RSS Feed