Michael Jackson Pearl Jam Stevie Ray Vaughan Ozzy Osbourne Finntroll MP3 list A Fine Frenzy Capone Phil Collins Shakira Pink Floyd Keane

Monthly Archive for February, 2008

Panorama Viewer

Published
by
Charlie
on February 27, 2008
in Examples
. 12 Comments

*FIXED!!*

Here's a really simple example, all it does is texture a sphere and rotate it depending on what the camera is doing:

Click Here (1.3Mb download so I didn't embed this one)

Source Code (Uses the Base Class):

PLAIN TEXT
Actionscript:
  1. /**
  2. * ...
  3. * @author Luke Mitchell
  4. * @version 1
  5. */
  6.  
  7. packageВ  {
  8. \timport org.papervision3d.materials.BitmapFileMaterial;
  9. \timport flash.events.MouseEvent;
  10. \timport org.papervision3d.materials.ColorMaterial;
  11. \timport org.papervision3d.materials.utils.MaterialsList;
  12. \timport org.papervision3d.objects.primitives.Cube;
  13. \t
  14. \tpublic class Main extends PaperBase {
  15. \t\t
  16. \t\tpublic var materials:MaterialsList = new MaterialsList(
  17. \t\t{
  18. \t\t\tfront: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s1.gif"),
  19. \t\t\tback: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s3.gif"),
  20. \t\t\tleft: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s4.gif"),
  21. \t\t\tright: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s2.gif"),
  22. \t\t\ttop: new ColorMaterial(0x000000),
  23. \t\t\tbottom: new ColorMaterial(0x000000)
  24. \t\t});
  25. \t\tpublic var cubemap:Cube = new Cube(materials, 2000, 2000, 900, 5, 5, 5,Cube.ALL);
  26. \t\t
  27. \t\tpublic function Main() {
  28. \t\t\tinit(600,300);
  29. \t\t\tcubemap.x = 0;
  30. \t\t\tcubemap.y = 0;
  31. \t\t\tcubemap.z = 0;
  32. \t\t\t
  33. \t\t\tdefault_scene.addChild(cubemap);
  34. \t\t\tdefault_camera.z = 0;
  35. \t\t\tdefault_camera.x = 0;
  36. \t\t\tdefault_camera.y = 0;
  37. \t\t\tdefault_camera.lookAt(cubemap);
  38. \t\t\t
  39. \t\t\tdefault_camera.zoom = 5;
  40. \t\t\tstage.addEventListener(MouseEvent.MOUSE_WHEEL, mWheel);
  41. \t\t}
  42. \t\t
  43. \t\tpublic function mWheel(e:MouseEvent):void {
  44. \t\t\tdefault_camera.zoom += e.delta / 5;
  45. \t\t\tif (default_camera.zoom <5) {
  46. \t\t\t\tdefault_camera.zoom = 5;
  47. \t\t\t}else if (default_camera.zoom> 20) {
  48. \t\t\t\tdefault_camera.zoom = 20;
  49. \t\t\t}
  50. \t\t}
  51. \t\t
  52. \t\toverride protected function processFrame():void {
  53. \t\t\tcubemap.yaw( -((stage.mouseX - (stage.width / 2)) / stage.width)*4);
  54. \t\t\tdefault_camera.rotationX = -((stage.mouseY - (stage.height / 2)) / stage.height) * (Math.sqrt(default_camera.zoom*6));
  55. \t\t}
  56. \t}
  57. }

You can use this for pretty much any panoramic image, just change the image url and tweak it a bit :)

-Luke

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

11. Advanced Interactivity 2

Published
by
Charlie
on February 21, 2008
in Tutorials
. 57 Comments

**UPDATE
This tutorial has been updated
view-update

This tutorial will show you how to handle full interactivity on an objects surface, just as if it's a normal movieclip.

For my example, I've made this. The red spot in the centre is a button. You can click it to toggle it's glow on and off. The other button will reveal how it works!

There are other ways to do this, but I think this way is the easiest and most hassle-free, and it's pretty fast.

I've super-commented the source code, so from reading the comments in the code you should be able to figure out exactly what's going on.

The basic idea is, you add the movie clip which is being used as the texture to the scene, but make it invisible. You then move it so that your mouse is over the correct part of the movieclip, when your mouse touches the texture on the 3d model. I think the "Show Movieclip" button on the cube above will explain better than I can :)

PLAIN TEXT
Actionscript:
  1. package  {
  2.     import flash.display.Bitmap;
  3.     import flash.display.MovieClip;
  4.     import flash.events.MouseEvent;
  5.     import flash.filters.GlowFilter;
  6.     import org.papervision3d.materials.MovieMaterial;
  7.     import org.papervision3d.materials.utils.MaterialsList;
  8.     import org.papervision3d.objects.primitives.Cube;
  9.     import org.papervision3d.events.InteractiveScene3DEvent;
  10.    
  11.     public class Main extends PaperBase {
  12.        
  13.         // This is the movieclip that we'll use as the texture.
  14.         private var movie:MovieClip = new MovieClip();
  15.        
  16.         // This movieclip will be completley transparent and will hold the
  17.         // texture movieclip, then move it to the correct loaction under the mouse.
  18.         private var movieParent:MovieClip = new MovieClip();
  19.        
  20.         // These are buttons that I'm going to add to the texture movieclip
  21.         private var button:MovieClip = new MovieClip();
  22.         private var showbutton:MovieClip = new MovieClip();
  23.        
  24.         // A "MovieMaterial" will use a movieclip as a texture.
  25.         private var mat:MovieMaterial;
  26.        
  27.         // The cube that we're going to texture..
  28.         private var cube:Cube;
  29.        
  30.         // This will import the file "E:/Papervision/images/showtex.jpg" to the project, and
  31.         // store the data in "ButtonIm". (This is the "Show Movieclip" Button)..
  32.         [Embed(source = "E:/Papervision/images/showtex.jpg")] private var ButtonIm:Class;
  33.        
  34.         public function Main() {
  35.             // Initiate, 400px wide, 400px tall..
  36.             init(400, 400);
  37.         }
  38.        
  39.         override protected function init3d():void {
  40.             // - See the prepareMovieclip function. This just builds the movieclip called "movie".
  41.             // You can use ANY movie clip for this..
  42.             prepareMovieclip();
  43.            
  44.             // Prepare out moviematerial. Make it animated and interactive.
  45.             mat = new MovieMaterial(movie, false, true);
  46.             mat.interactive = true;
  47.            
  48.             // Zoom in a bit..
  49.             default_camera.zoom = 5;
  50.            
  51.             // Prepare the cube.
  52.             cube = new Cube(new MaterialsList( { all: mat } ), 500, 500, 500, 4, 4, 4);
  53.             // Listen for when the mouse is moved over the cube.
  54.             // Trigger the mMove function when this happens.
  55.             cube.addEventListener( InteractiveScene3DEvent.OBJECT_MOVE, mMove);
  56.            
  57.             // Add the cube to the scene.
  58.             default_scene.addChild(cube);
  59.            
  60.             // The movieParent movieclip will hold the movieclip which is being used
  61.             // as the texture. It will then move depending on the mouse posirion.
  62.             movieParent.addChild(movie);
  63.             // Make it invisible.
  64.             movieParent.alpha = 0;
  65.            
  66.             // Add the movieParent movieclip to the stage.
  67.             addChild(movieParent);
  68.            
  69.         }
  70.        
  71.        
  72.         private function prepareMovieclip():void {
  73.            
  74.             // - This code will set up our movieclip which is going to be used
  75.             // as the texture for the cube.
  76.             // Draw Outline:
  77.             movie.graphics.beginFill(0xFFFFFF);
  78.             movie.graphics.drawRect(0, 0, 500, 500);
  79.             movie.graphics.endFill();
  80.             movie.graphics.beginFill(0x000000);
  81.             movie.graphics.drawRect(0, 0, 10, 500);
  82.             movie.graphics.drawRect(490, 0, 10, 500);
  83.             movie.graphics.drawRect(0, 0, 500, 10);
  84.             movie.graphics.drawRect(0, 490, 500, 10);
  85.             movie.graphics.endFill();
  86.            
  87.             // Draw Circular Button:
  88.             button.graphics.beginFill(0xBB0000);
  89.             button.graphics.drawCircle(0, 0, 50);
  90.             button.graphics.endFill();
  91.             button.x = 250;
  92.             button.y = 250;
  93.             button.buttonMode = true;
  94.            
  95.             // Load bitmap button texture:
  96.             var Bim:Bitmap = new ButtonIm();
  97.             // Draw "Show Movieclip" Texture:
  98.             showbutton.graphics.beginBitmapFill(Bim.bitmapData);
  99.             showbutton.graphics.drawRect(0,0,100,30);
  100.             showbutton.graphics.endFill();
  101.             showbutton.buttonMode = true;
  102.             showbutton.x = 380;
  103.             showbutton.y = 450;
  104.            
  105.             // Add the buttons to the movieclip
  106.             movie.addChild(showbutton);
  107.             movie.addChild(button);
  108.            
  109.             // -- Listen for the buttons to be clicked --
  110.             button.addEventListener(MouseEvent.CLICK, mClickButton);
  111.             showbutton.addEventListener(MouseEvent.CLICK, showHide);
  112.             // --
  113.         }
  114.        
  115.         private function showHide( e:MouseEvent ):void {
  116.             // The "Show Movieclip" button has been clicked
  117.             if (movieParent.alpha == 0) { // If it's invisible,
  118.                 movieParent.alpha = 0.2; // Make it slightly visible.
  119.             }else {
  120.                 movieParent.alpha = 0; // Or make it invisible again
  121.             }
  122.         }
  123.        
  124.         private function mClickButton(e:MouseEvent):void {
  125.             // The cental round button has been clicked.
  126.             if(button.name == "on"){
  127.                 button.filters = null;
  128.                 button.name = "off"
  129.             }else {
  130.                 button.filters = [new GlowFilter(0x000000, 1, 15, 15, 10, 1)];
  131.                 button.name = "on";
  132.             }
  133.         }
  134.        
  135.         private function mMove( e:InteractiveScene3DEvent ):void {
  136.             // This code is run when the mouse is moved on the cube.
  137.             // This will move the movieclip to the right place beneath
  138.             // the mouse.
  139.             movieParent.x = root.mouseX -e.x;
  140.             movieParent.y = root.mouseY -e.y;
  141.         }
  142.        
  143.         override protected function processFrame():void {
  144.             // Spin our cube a bit.
  145.             cube.yaw(0.25);
  146.             cube.pitch(0.25);
  147.         }
  148.        
  149.        
  150.     }
  151. }

The image that's embedded in the code can be found here: showtex.jpg

Have fun! More Examples coming soon.

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

We Had Forums

Published
by
Charlie
on February 18, 2008
in News
. 5 Comments

We have had forums!

I've set up a Papervision 3d forum at http://papervision2.com/forum/

Hopefully these forums will help everyone to solve common problems that they're having with Papervision. I'm going to fill them with some problems which we've resolved in the past so they're all in one place.

I've set up Help, General Chat, Suggestions and Examples forums. If you can think of anything else that the forum needs then make a thread in the suggestions forum and I'll get round to it.

Hope you like it!

-Luke

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

10. Advanced Interactivity

Published
by
Charlie
on February 17, 2008
in Tutorials
. 72 Comments

**UPDATE
This tutorial has been updated:
Updates:
1) Removed InteractiveScene3DEvent and replaced it with standard MouseEvents
2) Updated to use papervision's BasicView.as class

view-update

Today we're going to learn how to handle more advanced interactivity. We'll be making something like this:

Click on a face of the cube to zoom into it. Click it again to make the cube spin again.

So, in this tutorial I'm going to show you exactly how to work out which material has been clicked on the cube and act accordingly.

If you haven't read it already, I strongly suggest that you read the Basic Interactivity tutorial first or you'll probably miss something.

Ok, so on to the code.

Firstly we'll want six materials to apply to each face of the cube. Here are mine, although you can create whatever materials you like:

PLAIN TEXT
Actionscript:
  1. private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  2.         private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
  3.         private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
  4.         private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
  5.         private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
  6.         private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");

So, in this code I'm just loading six images from my server to use as each face.

Also, add the following declaration beneath the texture declarations to hold our Cube object:

PLAIN TEXT
Actionscript:
  1. private var cube:Cube;

Now we need to set up the 3d initiation code. In this code we will firstly set all of our materials as interactive, and then give each of our materials a name. This is VERY important to be able to easily find out which material has been clicked. If we didn't give each material a name then we wouldn't be able to easily work out which face has been clicked.

So, add the following code to your init3d() function:

PLAIN TEXT
Actionscript:
  1. override protected function init3d():void {
  2.             // We need to be able to identify each side. We'll do this
  3.             // by asssigning names to each material. During this process
  4.             // we'll also make the materials interactive.
  5.             frontMaterial.interactive = true;
  6.             frontMaterial.name = "front";
  7.             backMaterial.interactive = true;
  8.             backMaterial.name = "back";
  9.             leftMaterial.interactive = true;
  10.             leftMaterial.name = "left";
  11.             rightMaterial.interactive = true;
  12.             rightMaterial.name = "right";
  13.             topMaterial.interactive = true;
  14.             topMaterial.name = "top";
  15.             bottomMaterial.interactive = true;
  16.             bottomMaterial.name = "bottom";
  17.             // ---------------------------------------------
  18.            
  19.             cube = new Cube(new MaterialsList( {
  20.                 front: frontMaterial,
  21.                 back: backMaterial,
  22.                 left: leftMaterial,
  23.                 right: rightMaterial,
  24.                 top: topMaterial,
  25.                 bottom: bottomMaterial
  26.                 } ), 500, 500, 500, 3, 3, 3);
  27.             cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
  28.             default_scene.addChild(cube);
  29.         }

So, In this code, we've set each material as interactive, given each one a sensible name, and initialised our cube with the materials assigned to the correct faces.

We then add an event listener to trigger the "onPress" event when the cube is clicked, then finally we add the cube to the scene.

We've now got a cube with six materials on it listening for a click event.

Now, the code which will let us work out which face has been clicked:

PLAIN TEXT
Actionscript:
  1. private function onPress( e:InteractiveScene3DEvent ):void {
  2.     switch(e.face3d.material.name) {
  3.         case "front":
  4.             // This code will be run when the front face is clicked
  5.         break;
  6.         case "back":
  7.             // This code will be run when the back face is clicked
  8.         break;
  9.         case "left":
  10.             // This code will be run when the left face is clicked
  11.         break;
  12.         case "right":
  13.             // This code will be run when the right face is clicked
  14.         break;
  15.         case "top":
  16.             // This code will be run when the top face is clicked
  17.         break;
  18.         case "bottom":
  19.             // This code will be run when the bottom face is clicked
  20.         break;
  21.     }
  22. }

Pretty self explanitary. The "e" variable in this code holds lots of data about the click event, including which material has been clicked, so, because we know which material is on each face, we can tell by the materials name which face has been clicked!

With a little bit of code, you can make a nice spinning cube gallery like the example above:

Here is my final code, have fun!

PLAIN TEXT
Actionscript:
  1. package  {
  2.    
  3.     import flash.display.DisplayObject;
  4.     import org.papervision3d.materials.BitmapFileMaterial;
  5.     import org.papervision3d.materials.utils.MaterialsList;
  6.     import org.papervision3d.events.InteractiveScene3DEvent;
  7.     import org.papervision3d.objects.primitives.Cube;
  8.    
  9.     public class Main extends PaperBase {
  10.        
  11.         private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  12.         private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
  13.         private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
  14.         private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
  15.         private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
  16.         private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");
  17.        
  18.         private var targetrotationX:Number = 0;
  19.         private var targetrotationY:Number = 0;
  20.         private var targetrotationZ:Number = 0;
  21.        
  22.         private var tweening:Boolean = false;
  23.        
  24.         private var cube:Cube;
  25.        
  26.         public function Main() {
  27.             init(400, 400);
  28.         }
  29.        
  30.         override protected function init3d():void {
  31.             // We need to be able to identify each side. We'll do this
  32.             // by asssigning names to each material. During this process
  33.             // we'll also make the materials interactive.
  34.             frontMaterial.interactive = true;
  35.             frontMaterial.name = "front";
  36.             backMaterial.interactive = true;
  37.             backMaterial.name = "back";
  38.             leftMaterial.interactive = true;
  39.             leftMaterial.name = "left";
  40.             rightMaterial.interactive = true;
  41.             rightMaterial.name = "right";
  42.             topMaterial.interactive = true;
  43.             topMaterial.name = "top";
  44.             bottomMaterial.interactive = true;
  45.             bottomMaterial.name = "bottom";
  46.             // ---------------------------------------------
  47.            
  48.             cube = new Cube(new MaterialsList( {
  49.                 front: frontMaterial,
  50.                 back: backMaterial,
  51.                 left: leftMaterial,
  52.                 right: rightMaterial,
  53.                 top: topMaterial,
  54.                 bottom: bottomMaterial
  55.                 } ), 500, 500, 500, 3, 3, 3);
  56.             // Listen for the click:
  57.             cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
  58.             // Add to scene:
  59.             default_scene.addChild(cube);
  60.         }
  61.        
  62.         private function onPress( e:InteractiveScene3DEvent ):void {
  63.             // If the cube has been moved to the front:
  64.             if (tweening) {
  65.                 // Let it rotate again
  66.                 tweening = false;
  67.             }else {
  68.                 // Find which rotation we need to be able to see
  69.                 // the face image:
  70.                 switch(e.face3d.material.name) {
  71.                     case "front":
  72.                         targetrotationX = 0;
  73.                         targetrotationY = 180;
  74.                         targetrotationZ = 0;
  75.                         tweening = true;
  76.                     break;
  77.                     case "back":
  78.                         targetrotationX = 0;
  79.                         targetrotationY = 0;
  80.                         targetrotationZ = 0;
  81.                         tweening = true;
  82.                     break;
  83.                     case "left":
  84.                         targetrotationX = 0;
  85.                         targetrotationY = -90;
  86.                         targetrotationZ = 0;
  87.                         tweening = true;
  88.                     break;
  89.                     case "right":
  90.                         targetrotationX = 0;
  91.                         targetrotationY = 90;
  92.                         targetrotationZ = 0;
  93.                         tweening = true;
  94.                     break;
  95.                     case "top":
  96.                         targetrotationX = 90;
  97.                         targetrotationY = 0;
  98.                         targetrotationZ = 0;
  99.                         tweening = true;
  100.                     break;
  101.                     case "bottom":
  102.                         targetrotationX = -90;
  103.                         targetrotationY = 0;
  104.                         targetrotationZ = 180;
  105.                         tweening = true;
  106.                     break;
  107.                 }
  108.             }
  109.         }
  110.        
  111.         override protected function processFrame():void {
  112.             if (tweening) {
  113.                 // If a face has been clicked
  114.                 if (default_camera.zoom <6.8) {
  115.                     // If the camera isn't zoomed enough then zoom in a bit more:
  116.                     default_camera.zoom += Math.sqrt(6.8-default_camera.zoom)/5;
  117.                 }
  118.                
  119.                 // Test each rotation and rotate it towards the target rotation:
  120.                 // X axis:
  121.                 if (cube.rotationX <targetrotationX) {
  122.                     cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
  123.                     cube.rotationX = Math.round(cube.rotationX);
  124.                 }else if (cube.rotationX> targetrotationX) {
  125.                     cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
  126.                     cube.rotationX = Math.round(cube.rotationX);
  127.                 }
  128.                 // Y axis:
  129.                 if (cube.rotationY <targetrotationY) {
  130.                     cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
  131.                     cube.rotationY = Math.round(cube.rotationY);
  132.                 }else if (cube.rotationY> targetrotationY) {
  133.                     cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
  134.                     cube.rotationY = Math.round(cube.rotationY);
  135.                 }
  136.                 // Z axis:
  137.                 if (cube.rotationZ <targetrotationZ) {
  138.                     cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
  139.                     cube.rotationZ = Math.round(cube.rotationZ);
  140.                 }else if (cube.rotationZ> targetrotationZ) {
  141.                     cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
  142.                     cube.rotationZ = Math.round(cube.rotationZ);
  143.                 }
  144.             }else {
  145.                 // If the camera is zoomed in, it shouldn't be now
  146.                 if (default_camera.zoom> 2) {
  147.                     // So zoom out a bit.
  148.                     default_camera.zoom -= Math.sqrt(default_camera.zoom-2)/5;
  149.                 }
  150.                
  151.                 // Rotate the cube a bit:
  152.                 cube.rotationX += 2;
  153.                 cube.rotationY += 2;
  154.                
  155.                 // Make sure that we dont "wind up" the rotation
  156.                 if (cube.rotationX>= 360) cube.rotationX = 0;
  157.                 if (cube.rotationY>= 360) cube.rotationY = 0;
  158.             }
  159.         }
  160.     }
  161. }

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

9. Basic Interactivity

Published
by
Charlie
on February 9, 2008
in Tutorials
. 72 Comments

In this tutorial, we're going to learn how to handle "interactive scene3d events", in particular the events which occur when your mouse moves over an object, out of an object and clicks an object. We're going to make something like this:

When you place your mouse over the plane, the material will change. When you click it, it will spin in the opposite direction.

Unfortunately we have to edit the base class.. again.. All we need to do is change one line so that the viewport becomes interactive when we initialise it.

Open up PaperBase.as, and find this line:

PLAIN TEXT
Actionscript:
  1. viewport = new Viewport3D(vpWidth, vpHeight);

Swap it for this line:

PLAIN TEXT
Actionscript:
  1. viewport = new Viewport3D(vpWidth, vpHeight, false, true);

This will make the viewport interactive, which means it can trigger events.

Now that you've updated the base class, create a new project. Make the Main class extend PaperBase as usual and then add the following imports:

PLAIN TEXT
Actionscript:
  1. import org.papervision3d.materials.BitmapFileMaterial;
  2.     import org.papervision3d.objects.DisplayObject3D;
  3.     import org.papervision3d.events.InteractiveScene3DEvent;
  4.     import org.papervision3d.objects.primitives.Plane;

Now, add the following declarations under "public class Main extends PaperBase {" :

PLAIN TEXT
Actionscript:
  1. private var ourMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  2.         private var ourOverMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front_over.jpg");
  3.         private var yawspeed:Number = 5;
  4.         private var plane :DisplayObject3D;

ourMaterial is the material that we'll put onto the plane.
ourOverMaterial is the material that will be activated on mouse over.
We'll load both of these materials from files on my server.
yawspeed will be how much we're going to yaw() the plane by each frame
and "plane" will be the plane.

This next function will show you how to make the material interactive, and how to add an event listener to the stage:

PLAIN TEXT
Actionscript:
  1. override protected function init3d():void {
  2.             ourMaterial.interactive = true; // You need to set the interactive property of the materal to true.
  3.             ourMaterial.doubleSided = true; // We want to be able to see both sides of the plane
  4.             ourOverMaterial.interactive = true; // Same for the mouseover material
  5.             ourOverMaterial.doubleSided = true;
  6.            
  7.             plane = new Plane(ourMaterial, 1000, 1000, 4, 4); // Create a new plane
  8.             default_scene.addChild(plane); // Add it to the scene
  9.            
  10.             // These lines add event listeners to the plane which will trigger the functions on the event specified.
  11.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress ); // Will trigger "onPress" when the object is pressed (clicked)
  12.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, onOver ); // Will trigger "onOver" when the mouse rolls over the object
  13.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_OUT, onOut ); // Will trigger "onOut" when the mouse rolls out of the object
  14.         }

I've commented the code so it should be easy to understand.

Now we need to add the "on..." functions. You can do whatever you want in these functions, but in this tutorial we're going to make the effect like above.

PLAIN TEXT
Actionscript:
  1. private function onOver ( e:InteractiveScene3DEvent ):void {
  2.             plane.material = ourOverMaterial; // Change the material to "ourOverMaterial"
  3.         }
  4.        
  5.         private function onOut ( e:InteractiveScene3DEvent ):void {
  6.             plane.material = ourMaterial; // Change the material back to "ourMaterial"
  7.         }
  8.        
  9.         private function onPress( e:InteractiveScene3DEvent ):void {
  10.             yawspeed *= -1; // Reverse the yaw speed
  11.         }

Finally, we need to add the processFrame code, to rotate the plane by the angle "yawspeed".

PLAIN TEXT
Actionscript:
  1. override protected function processFrame():void {
  2.             plane.yaw(yawspeed);
  3.         }

Done! Run the project and you should see the result like above. Here's the complete code:

PLAIN TEXT
Actionscript:
  1. package  {
  2.     import org.papervision3d.materials.BitmapFileMaterial;
  3.     import org.papervision3d.objects.DisplayObject3D;
  4.     import org.papervision3d.events.InteractiveScene3DEvent;
  5.     import org.papervision3d.objects.primitives.Plane;
  6.    
  7.     public class Main extends PaperBase {
  8.        
  9.         private var ourMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  10.         private var ourOverMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front_over.jpg");
  11.         private var yawspeed:Number = 5;
  12.         private var plane :DisplayObject3D;
  13.        
  14.         public function Main() {
  15.             init();
  16.         }
  17.        
  18.         override protected function init3d():void {
  19.             ourMaterial.interactive = true;
  20.             ourMaterial.doubleSided = true;
  21.             ourOverMaterial.interactive = true;
  22.             ourOverMaterial.doubleSided = true;
  23.            
  24.             plane = new Plane(ourMaterial, 1000, 1000, 4, 4);
  25.             default_scene.addChild(plane);
  26.            
  27.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress );
  28.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, onOver );
  29.             plane.addEventListener( InteractiveScene3DEvent.OBJECT_OUT, onOut );
  30.         }
  31.        
  32.         private function onOver ( e:InteractiveScene3DEvent ):void {
  33.             plane.material = ourOverMaterial; // Change the material to "ourOverMaterial"
  34.         }
  35.        
  36.         private function onOut ( e:InteractiveScene3DEvent ):void {
  37.             plane.material = ourMaterial; // Change the material back to "ourMaterial"
  38.         }
  39.        
  40.         private function onPress( e:InteractiveScene3DEvent ):void {
  41.             yawspeed *= -1; // Reverse the yaw speed
  42.         }
  43.        
  44.         override protected function processFrame():void {
  45.             plane.yaw(yawspeed);
  46.         }
  47.     }
  48. }

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

Poll Results

Published
by
Charlie
on February 9, 2008
in News
. 0 Comments

Hi,

Thanks for voting! The poll results are in, and I'll be publishing the next tutorials in this order:

  1. Basic Interactivity
  2. Advanced Interactivity
  3. Advanced Texturing
  4. Creating an interface
  5. Using Multiple Cameras and Scenes
  6. I'll publish more effects and shading examples

Interactivity tutorials coming right up!!

Be sure to check back later!

- Luke

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