10. Advanced Interactivity

**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:

        private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
        private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
        private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
        private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
        private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
        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:

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:

        override protected function init3d():void {
            // We need to be able to identify each side. We'll do this
            // by asssigning names to each material. During this process
            // we'll also make the materials interactive.
            frontMaterial.interactive = true;
            frontMaterial.name = "front";
            backMaterial.interactive = true;
            backMaterial.name = "back";
            leftMaterial.interactive = true;
            leftMaterial.name = "left";
            rightMaterial.interactive = true;
            rightMaterial.name = "right";
            topMaterial.interactive = true;
            topMaterial.name = "top";
            bottomMaterial.interactive = true;
            bottomMaterial.name = "bottom";
            // ---------------------------------------------
 
            cube = new Cube(new MaterialsList( {
                front: frontMaterial,
                back: backMaterial,
                left: leftMaterial,
                right: rightMaterial,
                top: topMaterial,
                bottom: bottomMaterial
                } ), 500, 500, 500, 3, 3, 3);
            cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
            default_scene.addChild(cube);
        }

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:

private function onPress( e:InteractiveScene3DEvent ):void {
    switch(e.face3d.material.name) {
        case "front":
            // This code will be run when the front face is clicked
        break;
        case "back":
            // This code will be run when the back face is clicked
        break;
        case "left":
            // This code will be run when the left face is clicked
        break;
        case "right":
            // This code will be run when the right face is clicked
        break;
        case "top":
            // This code will be run when the top face is clicked
        break;
        case "bottom":
            // This code will be run when the bottom face is clicked
        break;
    }
}

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!

package  {
 
    import flash.display.DisplayObject;
    import org.papervision3d.materials.BitmapFileMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.objects.primitives.Cube;
 
    public class Main extends PaperBase {
 
        private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
        private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
        private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
        private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
        private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
        private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");
 
        private var targetrotationX:Number = 0;
        private var targetrotationY:Number = 0;
        private var targetrotationZ:Number = 0;
 
        private var tweening:Boolean = false;
 
        private var cube:Cube;
 
        public function Main() {
            init(400, 400);
        }
 
        override protected function init3d():void {
            // We need to be able to identify each side. We'll do this
            // by asssigning names to each material. During this process
            // we'll also make the materials interactive.
            frontMaterial.interactive = true;
            frontMaterial.name = "front";
            backMaterial.interactive = true;
            backMaterial.name = "back";
            leftMaterial.interactive = true;
            leftMaterial.name = "left";
            rightMaterial.interactive = true;
            rightMaterial.name = "right";
            topMaterial.interactive = true;
            topMaterial.name = "top";
            bottomMaterial.interactive = true;
            bottomMaterial.name = "bottom";
            // ---------------------------------------------
 
            cube = new Cube(new MaterialsList( {
                front: frontMaterial,
                back: backMaterial,
                left: leftMaterial,
                right: rightMaterial,
                top: topMaterial,
                bottom: bottomMaterial
                } ), 500, 500, 500, 3, 3, 3);
            // Listen for the click:
            cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
            // Add to scene:
            default_scene.addChild(cube);
        }
 
        private function onPress( e:InteractiveScene3DEvent ):void {
            // If the cube has been moved to the front:
            if (tweening) {
                // Let it rotate again
                tweening = false;
            }else {
                // Find which rotation we need to be able to see
                // the face image:
                switch(e.face3d.material.name) {
                    case "front":
                        targetrotationX = 0;
                        targetrotationY = 180;
                        targetrotationZ = 0;
                        tweening = true;
                    break;
                    case "back":
                        targetrotationX = 0;
                        targetrotationY = 0;
                        targetrotationZ = 0;
                        tweening = true;
                    break;
                    case "left":
                        targetrotationX = 0;
                        targetrotationY = -90;
                        targetrotationZ = 0;
                        tweening = true;
                    break;
                    case "right":
                        targetrotationX = 0;
                        targetrotationY = 90;
                        targetrotationZ = 0;
                        tweening = true;
                    break;
                    case "top":
                        targetrotationX = 90;
                        targetrotationY = 0;
                        targetrotationZ = 0;
                        tweening = true;
                    break;
                    case "bottom":
                        targetrotationX = -90;
                        targetrotationY = 0;
                        targetrotationZ = 180;
                        tweening = true;
                    break;
                }
            }
        }
 
        override protected function processFrame():void {
            if (tweening) {
                // If a face has been clicked
                if (default_camera.zoom < 6.8) {
                    // If the camera isn't zoomed enough then zoom in a bit more:
                    default_camera.zoom += Math.sqrt(6.8-default_camera.zoom)/5;
                }
 
                // Test each rotation and rotate it towards the target rotation:
                // X axis:
                if (cube.rotationX < targetrotationX) {
                    cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
                    cube.rotationX = Math.round(cube.rotationX);
                }else if (cube.rotationX > targetrotationX) {
                    cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
                    cube.rotationX = Math.round(cube.rotationX);
                }
                // Y axis:
                if (cube.rotationY < targetrotationY) {
                    cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
                    cube.rotationY = Math.round(cube.rotationY);
                }else if (cube.rotationY > targetrotationY) {
                    cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
                    cube.rotationY = Math.round(cube.rotationY);
                }
                // Z axis:
                if (cube.rotationZ < targetrotationZ) {
                    cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
                    cube.rotationZ = Math.round(cube.rotationZ);
                }else if (cube.rotationZ > targetrotationZ) {
                    cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
                    cube.rotationZ = Math.round(cube.rotationZ);
                }
            }else {
                // If the camera is zoomed in, it shouldn't be now
                if (default_camera.zoom > 2) {
                    // So zoom out a bit.
                    default_camera.zoom -= Math.sqrt(default_camera.zoom-2)/5;
                }
 
                // Rotate the cube a bit:
                cube.rotationX += 2;
                cube.rotationY += 2;
 
                // Make sure that we dont "wind up" the rotation
                if (cube.rotationX >= 360) cube.rotationX = 0;
                if (cube.rotationY >= 360) cube.rotationY = 0;
            }
        }
    }
}
This entry was posted in Tutorials and tagged , , , , , , , , . Bookmark the permalink.

78 Responses to 10. Advanced Interactivity

  1. jmind says:

    thanks to Luke and thanks to ttubin for solving the bug. I could’nt really figure it out by myself

    sayd that, what about a panorama3D tutorial?

  2. Pedro says:

    I’m just getting used to PV and while looking at this file, apparently the Main.as has some errors, I tried fixing them but was not succesful. I’ d like to know if there’s a way to fix it. Thanks

  3. Dave says:

    I have completed this tutorial successfully, although I did have to alter some of the values of the targetrotation faces, because 2 of the faces were showing wrong sides when clicked, and they were upside down. Took me about 10 min to figure out what the proper values should be.

    I have a question though. I am using the PaperBase.as basis with this, I think? If it even imports those settings? Not sure.

    Anyways. I want to know if it is possible to make the camera position different, and what the code to do that would be. When I run this movie, the cube goes waayy into the distance, and I have to zoom like 400% in the flash player to see it properly.

    Got a link to altering camera position/movement? Or code?

  4. johnn says:

    PaperBase? I think Im using a newer version, seems to me that the biggest problem Im running into is refrencing all the classes

  5. Here is the CORRECTED targetrotation numbers for the ‘top’ and ‘bottom’ materials.. as Dave stated, those 2 faces were mixed up and upside down:

    case “top”:
    targetrotationX = -90;
    targetrotationY = 0;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “bottom”:
    targetrotationX = 90;
    targetrotationY = 0;
    targetrotationZ = 180;
    tweening = true;
    break;

  6. In the ‘if’ statement, try changing the ’6.8′ in both places to ’60.8′. This is for the zoomout when not clicked.

    and in the ‘else’, change the ’2′ in both places to ’30′. This is for the zoom in when clicked.

  7. Hello admin,

    Can you please remove that post where i started saying “My last post came out incorrectly and it won’t let me delete the..” That code snippet is not correct, there was some sort of pasting error.

    The post where i start off saying “Here is the CORRECTED targetrotation numbers for the ‘top’ and ‘bottom’ materials..” is in fact correct ;)

  8. Peter says:

    Thank you so much for the awesome tutorial!

    I’m a completely new to PV3D, and I have a rather stupid question.
    When I publish the swf file to my html website the cube and the interactivity works, but none of the images appear. Can you let me know if there’s anything special I need to do?

    Thanks again!

  9. Maciek says:

    I tried to add interactivity to your Cow from earlier tutorial but unfortunately I realised that only objects with explicit interactivity of material can work.
    Is it possible to add mouse events to other 3D objects?

    Kind regards,
    Maciek

  10. koxinaile says:

    hi!
    and thank you for this tutorial!
    i would like to ask you what “<” means ?
    because when I try to publish my swf, I have an error on it
    which is saying : (excuse me but it is in french)
    “1084: Erreur de syntaxe : rightparen est attendu devant semicolon.”
    and
    “1084: Erreur de syntaxe : semicolon est attendu devant rightparen.”
    “1084: Erreur de syntaxe : rightparen est attendu devant semicolon.”
    “1008: Attribut non valide.”
    “1084: Erreur de syntaxe : identifier est attendu devant rightparen.”
    etc…
    there are 17 errors like that…
    did I do something wrong?
    thank you for your answer.

  11. koxinaile says:

    sorry it’s me again

    when i post my message “<” appeared !
    and it was oncoding on my flash
    I changed that and it’s ok now

    sorry again… and lot of thanks !

  12. randygland says:

    very nice tutorial,

    it’s been mentioned in other posts but bear in mind this guy’s blog doesn’t like signs, and replaces them with unicode.

    also 6.8 and 2 should be replaced with 60.8 and 30 in the zooming logic, and the top and bottom cases are wrong..

    anyway, i’m loving learning pv3d with this series of tutorials, so very well done and many thanks :D

  13. batchas says:

    hello. thanx for sharing!
    when I clicked on any side noting happens.
    the listener dis not working…
    cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);

    thanx for any help

  14. soxx says:

    hello,
    looks great. unfortunately i cant get this running.. i allready tried to get help in german flash forums but no one could help.. as i can see here is allmost no one who didnt manage to run it properly.. maybe someone clould look at my script/file.. or more easy send me a file?
    im triing this for so long and i realy need this for my website navigation..
    thanx for any responding

  15. Peter says:

    You may also need to set:

    viewport.interactive = true;

    to make your press event working.

  16. Jenny says:

    Could someone zip up a working version of the files for this and post it here so I can compare them with mine? Thanks!

  17. Chris says:

    Hi there,
    thanx for this great tutorial! It runs as it should, but maybe you can help me to solve another problem:

    I want to load the final cube.swf via loader-class into another swf (interface.swf), created in Flash CS3 Pro. If I test this swf in Flash, it loads the cube as wanted. In a Flash-Projector, it works too. But with the local Flashplayer or online, the cube seems not to get loaded. If I try to load a JPG instead, it works fine.

    Any ideas?
    Thank you very much, greetings from Germany,

    Chris

  18. Chris says:

    Problem solved! The interface.fla / swf has to be stored inside the cube.swf-folder. But theres another problem appearing now: If i reload the cube over and over using a loader-button inside the interface.swf, the cube gets slower and slower with each reload. Ideas?

    THX,
    Chris

  19. ju says:

    I can get the cube loaded, with images, but when I click on it it dissapears :(

  20. Nils N. H. says:

    I did the tutorial, and compared the code to the best of my ability. The cube isn’t quite performing as the example.

    On click it spins around lovely, but sometimes it ends up zooming on a corner. Or when I click the “green side” it spins around to the blue side…

    Anyhow, I’m glad I got the rotating cube. Thanks for the tutorial.

    *Inching towards enlightenment* ^^

  21. Pingback: Advanced Interactivity at Papervision 3D Tutorials

  22. Charlie says:

    Hey Everyone,

    This tutorial has been updated.
    http://papervision2.com/advanced-interactivity/

    It includes a fix for targeting the proper panel of the cube when clicking the top / bottom sides.

    Charlie

  23. spin says:

    Thank’s (–)(__)

  24. Pingback: Roundup of the Best Papervision 3D Tutorials | Papervision Tutorials

  25. Hello! great tutorial. I need to do something similar, but with buttons for other scenes or urls. can you help me? thanks!

  26. SDAS says:

    if (cube.rotationY < targetrotationY) {
    cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
    cube.rotationY = Math.round(cube.rotationY);
    }else if (cube.rotationY > targetrotationY) {
    cube.rotationY -= Math.sqrt(cu

  27. THE FIXER MAN says:

    //THE LAS FINAL CODE FIXED

    package {

    import flash.display.DisplayObject;
    import org.papervision3d.materials.BitmapFileMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.objects.primitives.Cube;

    public class Main extends PaperBase {

    private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/front.jpg”);
    private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/back.jpg”);
    private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/left.jpg”);
    private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/right.jpg”);
    private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/top.jpg”);
    private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/bottom.jpg”);

    private var targetrotationX:Number = 0;
    private var targetrotationY:Number = 0;
    private var targetrotationZ:Number = 0;

    private var tweening:Boolean = false;

    private var cube:Cube;

    public function Main() {
    init(400, 400);
    }

    override protected function init3d():void {
    // We need to be able to identify each side. We’ll do this
    // by asssigning names to each material. During this process
    // we’ll also make the materials interactive.
    frontMaterial.interactive = true;
    frontMaterial.name = “front”;
    backMaterial.interactive = true;
    backMaterial.name = “back”;
    leftMaterial.interactive = true;
    leftMaterial.name = “left”;
    rightMaterial.interactive = true;
    rightMaterial.name = “right”;
    topMaterial.interactive = true;
    topMaterial.name = “top”;
    bottomMaterial.interactive = true;
    bottomMaterial.name = “bottom”;
    // ———————————————

    cube = new Cube(new MaterialsList( {
    front: frontMaterial,
    back: backMaterial,
    left: leftMaterial,
    right: rightMaterial,
    top: topMaterial,
    bottom: bottomMaterial
    } ), 500, 500, 500, 3, 3, 3);
    // Listen for the click:
    cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
    // Add to scene:
    default_scene.addChild(cube);
    }

    private function onPress( e:InteractiveScene3DEvent ):void {
    // If the cube has been moved to the front:
    if (tweening) {
    // Let it rotate again
    tweening = false;
    }else {
    // Find which rotation we need to be able to see
    // the face image:
    switch(e.face3d.material.name) {
    case “front”:
    targetrotationX = 0;
    targetrotationY = 180;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “back”:
    targetrotationX = 0;
    targetrotationY = 0;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “left”:
    targetrotationX = 0;
    targetrotationY = -90;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “right”:
    targetrotationX = 0;
    targetrotationY = 90;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “top”:
    targetrotationX = 90;
    targetrotationY = 0;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “bottom”:
    targetrotationX = -90;
    targetrotationY = 0;
    targetrotationZ = 180;
    tweening = true;
    break;
    }
    }
    }

    override protected function processFrame():void {
    if (tweening) {
    // If a face has been clicked
    if (default_camera.zoom < 6.8) {
    // If the camera isn’t zoomed enough then zoom in a bit more:
    default_camera.zoom += Math.sqrt(6.8-default_camera.zoom)/5;
    }

    // Test each rotation and rotate it towards the target rotation:
    // X axis:
    if (cube.rotationX < targetrotationX) {
    cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
    cube.rotationX = Math.round(cube.rotationX);
    }else if (cube.rotationX > targetrotationX) {
    cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
    cube.rotationX = Math.round(cube.rotationX);
    }
    // Y axis:
    if (cube.rotationY < targetrotationY) {
    cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
    cube.rotationY = Math.round(cube.rotationY);
    }else if (cube.rotationY > targetrotationY) {
    cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
    cube.rotationY = Math.round(cube.rotationY);
    }
    // Z axis:
    if (cube.rotationZ < targetrotationZ) {
    cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
    cube.rotationZ = Math.round(cube.rotationZ);
    }else if (cube.rotationZ > targetrotationZ) {
    cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
    cube.rotationZ = Math.round(cube.rotationZ);
    }
    }else {
    // If the camera is zoomed in, it shouldn’t be now
    if (default_camera.zoom > 2) {
    // So zoom out a bit.
    default_camera.zoom -= Math.sqrt(default_camera.zoom-2)/5;
    }

    // Rotate the cube a bit:
    cube.rotationX += 2;
    cube.rotationY += 2;

    // Make sure that we dont “wind up” the rotation
    if (cube.rotationX >= 360) cube.rotationX = 0;
    if (cube.rotationY >= 360) cube.rotationY = 0;
    }
    }
    }
    }

  28. QWEQWE says:

    package {

    import flash.display.DisplayObject;
    import org.papervision3d.materials.BitmapFileMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.objects.primitives.Cube;

    public class Main extends PaperBase {

    private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/front.jpg”);
    private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/back.jpg”);
    private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/left.jpg”);
    private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/right.jpg”);
    private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/top.jpg”);
    private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial(“http://papervision2.com/wp-content/pvTex/bottom.jpg”);

    private var targetrotationX:Number = 0;
    private var targetrotationY:Number = 0;
    private var targetrotationZ:Number = 0;

    private var tweening:Boolean = false;

    private var cube:Cube;

    public function Main() {
    init(400, 400);
    }

    override protected function init3d():void {
    // We need to be able to identify each side. We’ll do this
    // by asssigning names to each material. During this process
    // we’ll also make the materials interactive.
    frontMaterial.interactive = true;
    frontMaterial.name = “front”;
    backMaterial.interactive = true;
    backMaterial.name = “back”;
    leftMaterial.interactive = true;
    leftMaterial.name = “left”;
    rightMaterial.interactive = true;
    rightMaterial.name = “right”;
    topMaterial.interactive = true;
    topMaterial.name = “top”;
    bottomMaterial.interactive = true;
    bottomMaterial.name = “bottom”;
    // ———————————————

    cube = new Cube(new MaterialsList( {
    front: frontMaterial,
    back: backMaterial,
    left: leftMaterial,
    right: rightMaterial,
    top: topMaterial,
    bottom: bottomMaterial
    } ), 500, 500, 500, 3, 3, 3);
    // Listen for the click:
    cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
    // Add to scene:
    default_scene.addChild(cube);
    }

    private function onPress( e:InteractiveScene3DEvent ):void {
    // If the cube has been moved to the front:
    if (tweening) {
    // Let it rotate again
    tweening = false;
    }else {
    // Find which rotation we need to be able to see
    // the face image:
    switch(e.face3d.material.name) {
    case “front”:
    targetrotationX = 0;
    targetrotationY = 180;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “back”:
    targetrotationX = 0;
    targetrotationY = 0;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “left”:
    targetrotationX = 0;
    targetrotationY = -90;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “right”:
    targetrotationX = 0;
    targetrotationY = 90;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “top”:
    targetrotationX = 90;
    targetrotationY = 0;
    targetrotationZ = 0;
    tweening = true;
    break;
    case “bottom”:
    targetrotationX = -90;
    targetrotationY = 0;
    targetrotationZ = 180;
    tweening = true;
    break;
    }
    }
    }

    override protected function processFrame():void {
    if (tweening) {
    // If a face has been clicked
    if (default_camera.zoom < 6.8) {
    // If the camera isn’t zoomed enough then zoom in a bit more:
    default_camera.zoom += Math.sqrt(6.8-default_camera.zoom)/5;
    }

    // Test each rotation and rotate it towards the target rotation:
    // X axis:
    if (cube.rotationX < targetrotationX) {
    cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
    cube.rotationX = Math.round(cube.rotationX);
    }else if (cube.rotationX > targetrotationX) {
    cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
    cube.rotationX = Math.round(cube.rotationX);
    }
    // Y axis:
    if (cube.rotationY < targetrotationY) {
    cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
    cube.rotationY = Math.round(cube.rotationY);
    }else if (cube.rotationY > targetrotationY) {
    cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
    cube.rotationY = Math.round(cube.rotationY);
    }
    // Z axis:
    if (cube.rotationZ < targetrotationZ) {
    cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
    cube.rotationZ = Math.round(cube.rotationZ);
    }else if (cube.rotationZ > targetrotationZ) {
    cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
    cube.rotationZ = Math.round(cube.rotationZ);
    }
    }else {
    // If the camera is zoomed in, it shouldn’t be now
    if (default_camera.zoom > 2) {
    // So zoom out a bit.
    default_camera.zoom -= Math.sqrt(default_camera.zoom-2)/5;
    }

    // Rotate the cube a bit:
    cube.rotationX += 2;
    cube.rotationY += 2;

    // Make sure that we dont “wind up” the rotation
    if (cube.rotationX >= 360) cube.rotationX = 0;
    if (cube.rotationY >= 360) cube.rotationY = 0;
    }
    }
    }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>