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

Tag Archive for 'MaterialsList'

Advanced Interactivity

Published
by
Charlie
on November 26, 2009
in Actionscript 3.0, Papervision 3D, Tutorials and TweenLite
. 8 Comments

advancedinteractivity1

download-source

This is just another example of how to do some advanced interactivity in Papervision 3D. This tutorial is just a slightly updated version of the #10 : Advanced Interactivity tutorial from a while back.

Here is what has been updated:
1) Removed InteractiveScene3DEvent and replaced it with standard MouseEvents
2) Updated to use papervision's BasicView.as class

For a full description of what is going on please refer back to this link: #10 : Advanced Interactivity

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.events.Event;
  5.     import flash.events.MouseEvent;
  6.     import flash.text.TextField;
  7.     import org.papervision3d.materials.ColorMaterial;
  8.     import org.papervision3d.materials.MovieMaterial;
  9.     import org.papervision3d.materials.utils.MaterialsList;
  10.     import org.papervision3d.objects.primitives.Cube;
  11.     import org.papervision3d.view.BasicView;
  12.    
  13.     /**
  14.      * ...
  15.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  16.      */
  17.    
  18.     public class Main extends BasicView
  19.     {
  20.         protected var cube:Cube;
  21.         protected var interactiveMats:Array;
  22.         protected var materialsList:MaterialsList;
  23.         protected var targetrotationX:Number;
  24.         protected var targetrotationY:Number;
  25.         protected var targetrotationZ:Number;
  26.         protected var tweening:Boolean;
  27.        
  28.         public function Main():void
  29.         {
  30.             super();
  31.             init();
  32.         }
  33.         protected function init():void
  34.         {
  35.             createChildren();
  36.             startRendering();
  37.         }
  38.         protected function createChildren():void
  39.         {
  40.             //Set the viewport to interactive
  41.             viewport.interactive = true;
  42.            
  43.             //Create Materials:
  44.             materialsList       = new MaterialsList();
  45.             interactiveMats         = ["front", "back", "left", "right", "bottom", "top"];
  46.             var colorsArray:Array   = [0x76b6f8, 0x4291e1, 0x1f73c8, 0xe77111, 0xe8914c, 0xfad2b2];
  47.            
  48.             for (var i:int = 0; i <interactiveMats.length; i++)
  49.             {
  50.                 //Create a color box so we can use our MouseEvents
  51.                 var colorBox:Sprite = new Sprite();
  52.                 colorBox.graphics.beginFill(colorsArray[i]);
  53.                 colorBox.graphics.drawRect(0, 0, 100, 100);
  54.                 colorBox.graphics.endFill();
  55.                 colorBox.name = interactiveMats[i];
  56.                
  57.                 //Add a textField for reference
  58.                 var textField:TextField = new TextField()
  59.                 colorBox.addChild(textField)
  60.                 textField.text = interactiveMats[i];
  61.                
  62.                 //Add a MouseEvent to the Sprite
  63.                 colorBox.mouseChildren = false;
  64.                 colorBox.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
  65.                
  66.                 //Create the MovieMat
  67.                 var movieMat:MovieMaterial   = new MovieMaterial(colorBox, true, true);
  68.                 movieMat.interactive          = true;
  69.                 movieMat.smooth                 = true;
  70.                 materialsList.addMaterial(movieMat, interactiveMats[i]);
  71.             }
  72.            
  73.             //Create Cube
  74.             cube    = new Cube(materialsList, 100, 100, 100);
  75.            
  76.             //Add cube to the scene
  77.             scene.addChild(cube);
  78.         }
  79.        
  80.         protected function onMovieMatClicked(evt:MouseEvent):void
  81.         {
  82.             if (tweening)
  83.             {
  84.                 // Let it rotate again
  85.                 tweening = false;
  86.             }
  87.             else
  88.             {
  89.                 switch(evt.target.name) {
  90.                     case "front":
  91.                         targetrotationX = 0;
  92.                         targetrotationY = 180;
  93.                         targetrotationZ = 0;
  94.                         tweening = true;
  95.                     break;
  96.                     case "back":
  97.                         targetrotationX = 0;
  98.                         targetrotationY = 0;
  99.                         targetrotationZ = 0;
  100.                         tweening = true;
  101.                     break;
  102.                     case "left":
  103.                         targetrotationX = 0;
  104.                         targetrotationY = -90;
  105.                         targetrotationZ = 0;
  106.                         tweening = true;
  107.                     break;
  108.                     case "right":
  109.                         targetrotationX = 0;
  110.                         targetrotationY = 90;
  111.                         targetrotationZ = 0;
  112.                         tweening = true;
  113.                     break;
  114.                     case "top":
  115.                         targetrotationX = -90;
  116.                         targetrotationY = 0;
  117.                         targetrotationZ = 0;
  118.                         tweening = true;
  119.                     break;
  120.                     case "bottom":
  121.                         targetrotationX = 90;
  122.                         targetrotationY = 0;
  123.                         targetrotationZ = 180;
  124.                         tweening = true;
  125.                     break;
  126.                 }
  127.             }
  128.         }
  129.        
  130.         override protected function onRenderTick(event:Event = null):void
  131.         {
  132.             super.onRenderTick(event);
  133.            
  134.             if (tweening) {
  135.                 // If a face has been clicked
  136.                 if (camera.zoom <230) {
  137.                     // If the camera isn't zoomed enough then zoom in a bit more:
  138.                     camera.zoom += Math.sqrt(230-camera.zoom)/5;
  139.                 }
  140.                 // Test each rotation and rotate it towards the target rotation:
  141.                 // X axis:
  142.                 if (cube.rotationX <targetrotationX)
  143.                 {
  144.                     cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
  145.                     cube.rotationX = Math.round(cube.rotationX);
  146.                 }
  147.                 else if (cube.rotationX> targetrotationX)
  148.                 {
  149.                     cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
  150.                     cube.rotationX = Math.round(cube.rotationX);
  151.                 }
  152.                
  153.                 // Y axis:
  154.                 if (cube.rotationY <targetrotationY)
  155.                 {
  156.                     cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
  157.                     cube.rotationY = Math.round(cube.rotationY);
  158.                 }
  159.                 else if (cube.rotationY> targetrotationY)
  160.                 {
  161.                     cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
  162.                     cube.rotationY = Math.round(cube.rotationY);
  163.                 }
  164.                
  165.                 // Z axis:
  166.                 if (cube.rotationZ <targetrotationZ)
  167.                 {
  168.                     cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
  169.                     cube.rotationZ = Math.round(cube.rotationZ);
  170.                 }
  171.                 else if (cube.rotationZ> targetrotationZ)
  172.                 {
  173.                     cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
  174.                     cube.rotationZ = Math.round(cube.rotationZ);
  175.                 }
  176.             }
  177.             else
  178.             {
  179.                 // If the camera is zoomed in, it shouldn't be now
  180.                 if (camera.zoom> 200)
  181.                 {
  182.                     // So zoom out a bit.
  183.                     camera.zoom -= Math.sqrt(camera.zoom-2)/5;
  184.                 }
  185.                 // Rotate the cube a bit:
  186.                 cube.rotationX += 2;
  187.                 cube.rotationY += 2;
  188.                 // Make sure that we dont "wind up" the rotation
  189.                 if (cube.rotationX>= 360) cube.rotationX = 0;
  190.                 if (cube.rotationY>= 360) cube.rotationY = 0;
  191.             }
  192.         }      
  193.     }
  194. }

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

Advanced Interactivity (Without InteractiveScene3DEvent)

Published
by
Charlie
on November 26, 2009
in Actionscript 3 Papervision, Examples, Source Code, Tutorials and TweenLite
. 6 Comments

advancedinteractivity3

download-source

There are multiple ways of accomplishing any task. With papervision that statement holds true. When you want to interact with 3D objects one way we have found works very well is to apply the MouseEvent's to the textureFile and bypass the InteractiveScene3DEvent all together.

Here are a few things to remember when working with anything interactive in Papervision

1) Always set your ViewPort to interactive
2) Always set your Material to interactive
3) Set your Material animation to "true" if you want to see the material update
4) Be sure that your render is running so you can see your material update

Here is some sample code that shows the basic building blocks of an animated / interactive papervision object:

PLAIN TEXT
Actionscript:
  1. //Viewport set to interactive
  2. viewport.interactive                      = true;
  3.  
  4. //Create your symbol - can be a class or MovieClip exported in your library
  5. var textureMC:TextureSymbol     = new TextureSymbol();
  6. textureMC.id                = i;
  7. textureMC.clickButton.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
  8.  
  9. //Create your movie Material - animated / interactive set to true
  10. var movieMat:MovieMaterial   = new MovieMaterial(textureMC, true, true);
  11. movieMat.doubleSided            = true;
  12. movieMat.interactive          = true;
  13. movieMat.smooth             = true;

This approach is nice because you can deal with native Flash events.

Here is the full class:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.     import gs.easing.Quint;
  6.     import gs.TweenLite;
  7.     import org.papervision3d.materials.MovieMaterial;
  8.     import org.papervision3d.materials.utils.MaterialsList;
  9.     import org.papervision3d.objects.primitives.Cube;
  10.  
  11.     import org.papervision3d.view.BasicView;
  12.     import TextureSymbol;
  13.    
  14.     /**
  15.      * ...
  16.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  17.      */
  18.    
  19.     public class Main extends BasicView
  20.     {
  21.         protected var cube:Cube;
  22.         protected var interactiveMats:Array;
  23.         protected var materialsList:MaterialsList;
  24.        
  25.         public function Main():void
  26.         {
  27.             super();
  28.             init();
  29.         }
  30.         protected function init():void
  31.         {
  32.             createChildren();
  33.             commitProperties();
  34.             startRendering();
  35.         }
  36.         protected function createChildren():void
  37.         {
  38.             //Set the viewport to interactive
  39.             viewport.interactive = true;
  40.            
  41.             //Create Materials:
  42.             materialsList = new MaterialsList();
  43.             interactiveMats = ["front", "back", "top", "bottom", "left", "right"];
  44.            
  45.             for (var i:int = 0; i <interactiveMats.length; i++)
  46.             {
  47.                 //Create the texture symbol from the library
  48.                 var textureMC:TextureSymbol     = new TextureSymbol();
  49.                 textureMC.id                    = i;
  50.                 textureMC.clickButton.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
  51.                
  52.                 //Create the MovieMat
  53.                 var movieMat:MovieMaterial   = new MovieMaterial(textureMC, true, true);
  54.                 movieMat.doubleSided            = true;
  55.                 movieMat.interactive          = true;
  56.                 movieMat.smooth                 = true;
  57.                
  58.                 materialsList.addMaterial(movieMat, interactiveMats[i]);
  59.             }
  60.            
  61.             //Create Cube
  62.             cube    = new Cube(materialsList, 100, 100, 100);
  63.            
  64.             //Add cube to the scene
  65.             scene.addChild(cube);
  66.         }
  67.        
  68.         protected function onMovieMatClicked(evt:MouseEvent):void
  69.         {
  70.             var randomX:Number = Math.random() * 600 - 300;
  71.             var randomY:Number = Math.random() * 200 - 100;
  72.             TweenLite.to(cube, 1, { x:randomX, y:randomY, ease:Quint.easeInOut});
  73.         }
  74.        
  75.         protected function commitProperties():void
  76.         {
  77.             //Set the properties of our camera
  78.             camera.zoom = 200;
  79.             camera.y    = 1000;
  80.         }
  81.         override protected function onRenderTick(event:Event = null):void
  82.         {
  83.             super.onRenderTick(event);
  84.             cube.yaw(2);
  85.         }
  86.     }
  87. }

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
. 9 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

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 &lt;5) {
  46. \t\t\t\tdefault_camera.zoom = 5;
  47. \t\t\t}else if (default_camera.zoom&gt; 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

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 &lt;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 &lt;targetrotationX) {
  122.                     cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
  123.                     cube.rotationX = Math.round(cube.rotationX);
  124.                 }else if (cube.rotationX&gt; targetrotationX) {
  125.                     cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
  126.                     cube.rotationX = Math.round(cube.rotationX);
  127.                 }
  128.                 // Y axis:
  129.                 if (cube.rotationY &lt;targetrotationY) {
  130.                     cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
  131.                     cube.rotationY = Math.round(cube.rotationY);
  132.                 }else if (cube.rotationY&gt; targetrotationY) {
  133.                     cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
  134.                     cube.rotationY = Math.round(cube.rotationY);
  135.                 }
  136.                 // Z axis:
  137.                 if (cube.rotationZ &lt;targetrotationZ) {
  138.                     cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
  139.                     cube.rotationZ = Math.round(cube.rotationZ);
  140.                 }else if (cube.rotationZ&gt; 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&gt; 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&gt;= 360) cube.rotationX = 0;
  157.                 if (cube.rotationY&gt;= 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


Follow WovenCharlie on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed