AS3: DistortionTweener Done Easier In Papervision3D

View Example
Get Papervision3D [Tutorial]
Get TweenMax
Download Source

Well, the first thing I have done in Papervision3D is a replica of what I essentially did with the DistortionTweener (or actually the reason I made the DistortionTweener). It is much easier to do and takes a lot less to do (the original DistortionTweener, with research, took me about a week to do while this took me about an hour). Keep in mind the code is probably not super optimized as this is THE first thing I've done with PV3D.

Actionscript:
  1. /**
  2. * @author Matt Przybylski [http://www.reintroducing.com]
  3. * @version 1.0
  4. */
  5.  
  6. package com.reintroducing
  7. {
  8.     import flash.display.Sprite;
  9.     import flash.events.Event;
  10.    
  11.     import org.papervision3d.cameras.Camera3D;
  12.     import org.papervision3d.core.proto.MaterialObject3D;
  13.     import org.papervision3d.events.InteractiveScene3DEvent;
  14.     import org.papervision3d.materials.MovieAssetMaterial;
  15.     import org.papervision3d.objects.DisplayObject3D;
  16.     import org.papervision3d.objects.primitives.Plane;
  17.     import org.papervision3d.render.BasicRenderEngine;
  18.     import org.papervision3d.scenes.Scene3D;
  19.     import org.papervision3d.view.Viewport3D;
  20.    
  21.     import gs.TweenMax
  22.  
  23.     public class Main extends Sprite
  24.     {
  25. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  26.  
  27.         private var _viewport:Viewport3D;
  28.         private var _scene:Scene3D;
  29.         private var _camera:Camera3D;
  30.         private var _renderer:BasicRenderEngine;
  31.         private var _front:Plane;
  32.         private var _back:Plane;
  33.        
  34. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  35.        
  36.        
  37.        
  38. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  39.    
  40.         public function Main():void
  41.         {
  42.             this.init();
  43.         }
  44.        
  45. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  46.        
  47.         /**
  48.          *
  49.          */
  50.         private function init():void
  51.         {
  52.             this.initPapervision();
  53.             this.initObjects();
  54.             this.initListeners();
  55.         }
  56.        
  57.         /**
  58.          *
  59.          */
  60.         private function initPapervision():void
  61.         {
  62.             this._viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true, true);
  63.             this._scene = new Scene3D();
  64.             this._camera = new Camera3D(null, 11);
  65.             this._renderer = new BasicRenderEngine();
  66.            
  67.             this.addChild(this._viewport);
  68.         }
  69.        
  70.         /**
  71.          *
  72.          */
  73.         private function initObjects():void
  74.         {
  75.             var frontMat:MovieAssetMaterial = new MovieAssetMaterial("front", true);
  76.             frontMat.interactive = true;
  77.            
  78.             this._front = new Plane(frontMat, 300, 150, 10, 10);
  79.            
  80.             var backMat:MovieAssetMaterial = new MovieAssetMaterial("back", true);
  81.             backMat.interactive = true;
  82.            
  83.             this._back = new Plane(backMat, 300, 150, 10, 10);
  84.             this._back.yaw(180);
  85.            
  86.             var holder:DisplayObject3D = new DisplayObject3D("holder");
  87.             holder.addChild(this._front);
  88.             holder.addChild(this._back);
  89.            
  90.             this._scene.addChild(holder);
  91.         }
  92.        
  93.         /**
  94.          *
  95.          */
  96.         private function initListeners():void
  97.         {
  98.             this._front.addEventListener(InteractiveScene3DEvent.OBJECT_RELEASE, onPlaneClicked);
  99.             this._back.addEventListener(InteractiveScene3DEvent.OBJECT_RELEASE, onPlaneClicked);
  100.            
  101.             this.addEventListener(Event.ENTER_FRAME, render);
  102.         }
  103.  
  104. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  105.    
  106.        
  107.    
  108. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  109.    
  110.         /**
  111.          *
  112.          */
  113.         private function render($evt:Event):void
  114.         {
  115.             this._renderer.renderScene(this._scene, this._camera, this._viewport);
  116.         }
  117.        
  118.         /**
  119.          *
  120.          */
  121.         private function onPlaneClicked($evt:InteractiveScene3DEvent):void
  122.         {
  123.             var mam:MovieAssetMaterial = MovieAssetMaterial($evt.target.material);
  124.            
  125.             if (mam.texture == "front")
  126.             {
  127.                 TweenMax.to(this._front, 1, {rotationY: -180});
  128.                 TweenMax.to(this._back, 1, {rotationY: 0});
  129.             }
  130.             else
  131.             {
  132.                 TweenMax.to(this._front, 1, {rotationY: 0});
  133.                 TweenMax.to(this._back, 1, {rotationY: 180});
  134.             }
  135.         }
  136.    
  137. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  138.    
  139.        
  140.    
  141. //- HELPERS -----------------------------------------------------------------------------------------------
  142.    
  143.         override public function toString():String
  144.         {
  145.             return "com.reintroducing.Main";
  146.         }
  147.    
  148. //- END CLASS ---------------------------------------------------------------------------------------------
  149.     }
  150. }

In the example, click on the plane to see the other side and click again to flip back to the front.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

8 Comments

How can you stop the distortion when you move the plane left or right?

I'm not sure I understand what you are asking. Can you elaborate a bit?

thanks for the demo. i would like to point out a detail:

in recent papervision releases the yaw() method isn't supported anymore. use rotationY instead. for your code this means you have to replace in the main.as the following code at line 81:

this._back.yaw(180);

with this:

this._back.rotationY = 180;

lauritz,
Thanks for pointing that out. I haven't played with Papervision in a while now so that's good to know.

hi matt, actually i wanted to post the link to the papervision blog post about this. but instead i found some (new) news about this topic. yaw, roll and pitch are now getters/setters. this means my above example is in fact wrong. this is the correct code:

this._back.yaw = 180;

rotationY would rotate relative to the world instead to the object itself.

Ah yes, I do remember reading something about that but again I forgot since I haven't worked with pv3d in a while. Thanks for clearing that up!

hm,
it only rotates correct with:

this._back.yaw(180);

and

if (mam.name == "front")
{
TweenMax.to(this._front, 1, {rotationY: -180});
TweenMax.to(this._back, 1, {rotationY: 180});
}
else
{
TweenMax.to(this._front, 1, {rotationY: 0});
TweenMax.to(this._back, 1, {rotationY: 0});
}
for testing i load a image from web insted:
var frontMat:BitmapFileMaterial = new BitmapFileMaterial();
frontMat.texture = "http://www.clickfinger.net/images/thorsten_becker1.jpg";
frontMat.name = "front";
frontMat.interactive = true;
this._front = new Plane(frontMat, 500, 500, 10, 10);
this._front.yaw(0);
and changed the line:
var mam:BitmapFileMaterial = BitmapFileMaterial(Plane($evt.target).material);

Nice idea by the way. Thanks for this code.

you may be using a new revision of papervision than this was done with. there has been alot of changes so the code probably won't work anymore as posted, sorry.

Leave a comment

(required)

(required)