Nat King Cole Elton John Artist list Cobra Starship Used Free MP3 Whitney Houston Cat Stevens Phil Collins Ozzy Osbourne MP3 search Bob Dylan

Monthly Archive for November, 2009Page 2 of 2

Basic Mouse Interaction (v2)

Published
by
Charlie
on November 23, 2009
in Actionscript 3 Papervision, Examples, Papervision 3D, Source Code and Tutorials
. 9 Comments

basic-mouse-interaction

download-source

In the previous tutorial we showed you how to load a 3D model into Papervision. Now we are just going to show you how to rotate that model based off of your mouse movements.

The process is very simple. Since our render function is like the engine of our animations that is where we will add the code for the rotation. Later we'll cover animating objects via TweenLite / TweenMax.

PLAIN TEXT
Actionscript:
  1. override protected function onRenderTick(event:Event = null):void
  2. {
  3.     super.onRenderTick(event);
  4.     cow.rotationY = stage.mouseX / sceneWidth * 360
  5. }

When you first start moving objects in Papervision you may notice that rotationY and rotationX do not act as you might think they would. In flash you would think of something on a Y axis as going up and down and X as left and right. With Papervision RotationY rotates and object on its Y axis (left /right) and RotationX rotates an object on it's X axis (top / bottom).

Here is the full code:

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import flash.events.Event;
  4.     import org.papervision3d.materials.BitmapFileMaterial;
  5.     import org.papervision3d.materials.utils.MaterialsList;
  6.     import org.papervision3d.objects.DisplayObject3D;
  7.     import org.papervision3d.objects.parsers.Collada;
  8.     import org.papervision3d.view.BasicView;
  9.  
  10.     public class Main extends BasicView
  11.     {
  12.         protected var cow:DisplayObject3D;
  13.         protected var materialList:MaterialsList;
  14.         protected var bitmapFileMaterial:BitmapFileMaterial;
  15.        
  16.         protected var sceneWidth:Number;
  17.         protected var sceneHeight:Number;
  18.        
  19.         public function Main()
  20.         {
  21.             super();
  22.             init();
  23.             createChildren();
  24.             startRendering();
  25.         }
  26.         protected function init():void
  27.         {
  28.             sceneWidth = stage.stageWidth
  29.         }
  30.         public function createChildren():void
  31.         {
  32.             //Setup the materials manually (sometimes the dae handles this without issue)
  33.             materialList       = new MaterialsList();
  34.             bitmapFileMaterial  = new BitmapFileMaterial("daeModel/Cow.png");
  35.             materialList.addMaterial(bitmapFileMaterial,"all");
  36.            
  37.             //Create the new Collada Object with materialList
  38.             cow = new Collada("daeModel/cow.dae",materialList);
  39.  
  40.             ///Set some properties
  41.             cow.moveDown(150);
  42.             cow.scale = 3;
  43.             cow.pitch( -10);
  44.  
  45.             //Add to scene
  46.             scene.addChild(cow);
  47.         }
  48.        
  49.         override protected function onRenderTick(event:Event = null):void
  50.         {
  51.             super.onRenderTick(event);
  52.             cow.rotationY = stage.mouseX / sceneWidth * 360
  53.         }
  54.     }
  55. }

download-source

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

Loading Complex Models (v2)

Published
by
Charlie
on November 23, 2009
in Actionscript 3.0, Loading Complex Models, Papervision 3D, Source Code and Tutorials
. 8 Comments

complex-models

download-source

If you work long enough in Papervision you will eventually have to deal with loading complex models into Papervision. This is one of the more difficult things to do but not because of the actionscript or Papervision coding. Whenever we have had problems with models in the past; it has always been an issue model's source.

Hopefully you are one of the few blessed enough to have an resource available to modify and create Papervision ready models for you. If not, just know you're not alone.

Issues with 3D models aside, the code for loading a 3D model into Papervision is extremely easy. It is as simple as loading a plane, cube, or cone.

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import flash.events.Event;
  4.     import org.papervision3d.materials.BitmapFileMaterial;
  5.     import org.papervision3d.materials.utils.MaterialsList;
  6.     import org.papervision3d.objects.DisplayObject3D;
  7.     import org.papervision3d.objects.parsers.Collada;
  8.     import org.papervision3d.view.BasicView;
  9.  
  10.     public class Main extends BasicView
  11.     {
  12.         protected var cow:DisplayObject3D;
  13.         protected var materialList:MaterialsList;
  14.         protected var bitmapFileMaterial:BitmapFileMaterial;
  15.         public function Main()
  16.         {
  17.             super();
  18.             createChildren();
  19.             startRendering();
  20.         }
  21.         public function createChildren():void
  22.         {
  23.             //Setup the materials manually (sometimes the dae handles this without issue)
  24.             materialList       = new MaterialsList();
  25.             bitmapFileMaterial  = new BitmapFileMaterial("daeModel/Cow.png");
  26.             materialList.addMaterial(bitmapFileMaterial,"all");
  27.            
  28.             //Create the new Collada Object with materialList
  29.             cow = new Collada("daeModel/cow.dae",materialList);
  30.  
  31.             //Set some properties
  32.             cow.moveDown(150);
  33.             cow.scale = 3;
  34.             cow.pitch( -10);
  35.  
  36.             //Add to scene
  37.             scene.addChild(cow);
  38.         }
  39.        
  40.         override protected function onRenderTick(event:Event = null):void
  41.         {
  42.             super.onRenderTick(event);
  43.  
  44.             //Rotate
  45.             cow.yaw(1);
  46.         }
  47.     }
  48. }

Once you have a good model, in papervision all you need for this to work properly is to:
1) Create the model new Collada()
2) Create the model's texture new BitmapFileMaterial()
3) Create and add the bitmap material to a materials list new MaterialsList()
4) Add the model to the scene scene.addChild(cow)
5) Render startRendering()

It's too much to cover all the issues you may run into here but if you're up for it open up the cow.dae file. You'll find it is just a lot of XML. Go through it, see if you can find the texture file.

download-source

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

Basic Texturing (v2)

Published
by
Charlie
on November 22, 2009
in Actionscript 3 Papervision, Actionscript 3.0, Papervision, Papervision 3D, Source Code and Tutorials
. 4 Comments

basic-texturing
download-source

Even if you had a chance to look at Getting started using BasicView.as this tutorial provides another example of basic texturing in Papervision.

In Papervision for the most part you have objects (planes, cubes, cones, 3D Models, etc) and then you have the textures or materials that you add to these objects. Think of it as getting a brand new iPhone and then buying a case or skin for that iPhone. We are essentially doing the same thing in principle - we have our object a cone (iPhone) and a material a bitmapMaterial (iPhone skin).

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import flash.events.Event;
  4.     import org.papervision3d.view.BasicView;
  5.     import org.papervision3d.objects.primitives.Cone;
  6.     import org.papervision3d.materials.BitmapFileMaterial;
  7.    
  8.     public class Main extends BasicView
  9.     {
  10.         protected var cone:Cone
  11.         protected var bitmapMaterial:BitmapFileMaterial;
  12.        
  13.         public function Main()
  14.         {
  15.             super();
  16.             createChildren();
  17.             startRendering();
  18.         }
  19.         public function createChildren():void
  20.         {
  21.             //Create a new 3D object
  22.             bitmapMaterial = new BitmapFileMaterial("images/ourtex.jpg")
  23.             cone = new Cone(bitmapMaterial, 20, 200);
  24.            
  25.             //Set some properties
  26.             cone.scale = 4;
  27.             cone.pitch( -10);
  28.            
  29.             //Add to scene
  30.             scene.addChild(cone);
  31.         }
  32.        
  33.         override protected function onRenderTick(event:Event = null):void
  34.         {
  35.             super.onRenderTick(event);
  36.  
  37.             //Rotate
  38.             cone.yaw(3);
  39.         }
  40.     }
  41. }

As you can see from the code above we have a cone and a bitmap texture.

download-source

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

Getting started using BasicView.as

Published
by
Charlie
on November 22, 2009
in Actionscript 3 Papervision, Actionscript 3.0, Papervision, Papervision 3D, Source Code and Tutorials
. 9 Comments

basicview-image

download-source

In a previous tutorial (Creating a Papervision Base Template) we created a base Papervision template that we could re-use. Now however Papervision includes a form of this base template called BasicView.as

With just a few lines of code you're up and running. Here is the very simple / basic use of BasicView.as:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.events.Event;
  4.     import org.papervision3d.materials.ColorMaterial;
  5.     import org.papervision3d.objects.primitives.Plane;
  6.     import org.papervision3d.view.BasicView;
  7.    
  8.     /**
  9.      * ...
  10.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  11.      */
  12.    
  13.     public class Main extends BasicView
  14.     {
  15.         protected var plane:Plane;
  16.         protected var colorMaterial:ColorMaterial;
  17.        
  18.         public function Main():void
  19.         {
  20.             super();
  21.            
  22.             //Create one material and make it doublesided
  23.             colorMaterial = new ColorMaterial(0xFF0000, .5);
  24.             colorMaterial.doubleSided = true;
  25.            
  26.             //Create a plane using the colorMaterial
  27.             plane = new Plane(colorMaterial, 100, 100);
  28.             scene.addChild(plane);
  29.            
  30.             //Start the rendering
  31.             startRendering();
  32.         }
  33.        
  34.         override protected function onRenderTick(event:Event = null):void
  35.         {
  36.             super.onRenderTick(event);
  37.            
  38.             //Rotate the plane
  39.             plane.yaw(2);
  40.         }
  41.     }
  42. }

This very simple example you will just see a single light red plane rotating.

That is all you need to do to get started in Papervision. Test it out. Don't forget to add your 3D objects to the scene.

PLAIN TEXT
Actionscript:
  1. scene.addChild(plane);

Here is what the BasicView.as class looks like:

PLAIN TEXT
Actionscript:
  1. package org.papervision3d.view
  2. {
  3.     import org.papervision3d.cameras.SpringCamera3D;   
  4.     import org.papervision3d.cameras.Camera3D;
  5.     import org.papervision3d.cameras.CameraType;
  6.     import org.papervision3d.cameras.DebugCamera3D;
  7.     import org.papervision3d.core.view.IView;
  8.     import org.papervision3d.objects.DisplayObject3D;
  9.     import org.papervision3d.render.BasicRenderEngine;
  10.     import org.papervision3d.scenes.Scene3D;
  11.  
  12.     /**
  13.      * <p>
  14.      * BasicView provides a simple template for quickly setting up
  15.      * basic Papervision3D projects by creating a viewport, scene,
  16.      * camera, and renderer for you. Because BasicView is a subclass of
  17.      * Sprite, it can be added to any DisplayObject.
  18.      *
  19.      * </p>
  20.      *
  21.      * <p>
  22.      * <p>
  23.      * Example:
  24.      * </p>
  25.      * <pre><code>
  26.      * var width:Number = 640;
  27.      * var heigth:Number = 480;
  28.      * var scaleToStage:Boolean = true;
  29.      * var interactive:Boolean = true;
  30.      * var cameraType:String = Camera3D.TYPE;
  31.      *
  32.      * var myBasicView:BasicView = new BasicView(width, height, scaleToStage, interactive, cameraType);
  33.      * myDisplayObject.addChild(myBasicView);
  34.      * </code></pre>
  35.      * </p>
  36.      * @author Ralph Hauwert
  37.      */
  38.     public class BasicView extends AbstractView implements IView
  39.     {
  40.         /**
  41.          * @param viewportWidth  Width of the viewport
  42.          * @param viewportHeight    Height of the viewport
  43.          * @param scaleToStage    Whether you viewport should scale with the stage
  44.          * @param interactive      Whether your scene should be interactive
  45.          * @param cameraType        A String for the type of camera. @see org.papervision3d.cameras.CameraType
  46.          *
  47.          */ 
  48.         public function BasicView(viewportWidth:Number = 640, viewportHeight:Number = 480, scaleToStage:Boolean = true, interactive:Boolean = false, cameraType:String = "Target")
  49.         {
  50.             super();
  51.            
  52.             scene = new Scene3D();
  53.             viewport = new Viewport3D(viewportWidth, viewportHeight, scaleToStage, interactive);
  54.             addChild(viewport);
  55.             renderer = new BasicRenderEngine();
  56.            
  57.             switch(cameraType)
  58.             {
  59.                 case CameraType.DEBUG:
  60.                     _camera = new DebugCamera3D(viewport);
  61.                     break;
  62.                 case CameraType.TARGET:
  63.                     _camera = new Camera3D(60);
  64.                     _camera.target = DisplayObject3D.ZERO;
  65.                     break;
  66.                 case CameraType.SPRING:
  67.                     _camera = new SpringCamera3D();
  68.                     _camera.target = DisplayObject3D.ZERO;   
  69.                     break;     
  70.                 case CameraType.FREE:
  71.                 default:
  72.                     _camera = new Camera3D(60);
  73.                     break;
  74.             }
  75.            
  76.             cameraAsCamera3D.update(viewport.sizeRectangle);
  77.         }
  78.        
  79.         /**
  80.          * Exposes the camera as a <code>Camera3D</code>
  81.          */
  82.         public function get cameraAsCamera3D():Camera3D
  83.         {
  84.                 return _camera as Camera3D;
  85.         }
  86.        
  87.         /**
  88.          * Exposes the camera as a <code>DebugCamera3D</code>
  89.          */
  90.         public function get cameraAsDebugCamera3D():DebugCamera3D
  91.         {
  92.                 return _camera as DebugCamera3D;
  93.         }
  94.     }
  95. }

Since BasicView.as extends AbstractView.as you can see a few more of the methods available to you just by extending BasicView.as

PLAIN TEXT
Actionscript:
  1. package org.papervision3d.view
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.events.Event;
  5.    
  6.     import org.papervision3d.core.proto.CameraObject3D;
  7.     import org.papervision3d.core.view.IView;
  8.     import org.papervision3d.render.BasicRenderEngine;
  9.     import org.papervision3d.scenes.Scene3D;
  10.    
  11.     /**
  12.      * @Author Ralph Hauwert
  13.      */
  14.     public class AbstractView extends Sprite implements IView
  15.     {
  16.         protected var _camera:CameraObject3D;
  17.         protected var _height:Number;
  18.         protected var _width:Number;
  19.        
  20.         public var scene:Scene3D;
  21.         public var viewport:Viewport3D;
  22.         public var renderer:BasicRenderEngine;
  23.        
  24.         public function AbstractView()
  25.         {
  26.             super();
  27.         }
  28.        
  29.         public function startRendering():void
  30.         {
  31.             addEventListener(Event.ENTER_FRAME, onRenderTick);
  32.             viewport.containerSprite.cacheAsBitmap = false;
  33.         }
  34.        
  35.         public function stopRendering(reRender:Boolean = false, cacheAsBitmap:Boolean = false):void
  36.         {
  37.             removeEventListener(Event.ENTER_FRAME, onRenderTick);
  38.             if(reRender){
  39.                 onRenderTick(); 
  40.             }
  41.             if(cacheAsBitmap){
  42.                 viewport.containerSprite.cacheAsBitmap = true;
  43.             }else{
  44.                 viewport.containerSprite.cacheAsBitmap = false;
  45.             }
  46.         }
  47.        
  48.         public function singleRender():void
  49.         {
  50.             onRenderTick();
  51.         }
  52.        
  53.         protected function onRenderTick(event:Event = null):void
  54.         {
  55.             renderer.renderScene(scene, _camera, viewport);
  56.         }
  57.        
  58.         public function get camera():CameraObject3D
  59.         {
  60.             return _camera;
  61.         }
  62.        
  63.         public function set viewportWidth(width:Number):void
  64.         {
  65.             _width = width;
  66.             viewport.width = width;
  67.         }
  68.        
  69.         public function get viewportWidth():Number
  70.         {
  71.             return _width;
  72.         }
  73.        
  74.         public function set viewportHeight(height:Number):void
  75.         {
  76.             _height = height;
  77.             viewport.height = height;
  78.         }
  79.        
  80.         public function get viewportHeight():Number
  81.         {
  82.             return _height;
  83.         }
  84.        
  85.     }
  86. }

download-source

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

Time for an upgrade. Updated tutorials coming soon!

Published
by
Charlie
on November 22, 2009
in Actionscript 3 Papervision, Releases and Tutorials
. 0 Comments

upgrade
In an effort to keep the information on this site up to date over the next few weeks we will be re-writing the majority of the tutorials on this site.

All new tutorials will include:

1) More up to date PV3D code.
2) A version that can be compiled with the Flash IDE
3) A version that can be compiled with FlashDevelop, Flex etc.
4) Full source code.

Having two versions of the code, as well as full source (including pv3d code) will hopefully cut down on the confusion when getting started.

Please feel free to leave comments here for other requests. If we get several requests for features other than what has been mentioned we will do my best to incorporate them.

Enjoy and have fun.

Charlie

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


Follow WovenCharlie on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed