Adding Interactivity to Papervision 3D

There are two types of Interactivity in this demo the first is controlling the camera and the second the 3D Animation i.e. making the panels spin when you click them. Controlling the Camera Controlling the camera is pretty simple in this example all you need to do is track the mouse movement and translate it into camera movement. To do this simply add the following code into your Event.ENTER_FRAME listener, where view is the Papervision View you are using.

view.camera.x += (((stage.mouseX - (stage.stageWidth * .5)) * 2) - view.camera.x ) * .02;
view.camera.y += (((stage.mouseY - (stage.stageHeight * .5)) * 2) - view.camera.y ) * .02;

Controlling 3D Animation The easiest what to control 3D animation is to use tweener. Basically Tweener helps you move things around on the screen using only code, instead of the timeline. Tweener has no idea about Papervision 3D and in fact it only changes a variable over time which means that you can change any variable as long as it is a number.

To do this you first need to set the view to interactive, then add event listeners to the 3D objects.

var controlPlane:Plane = new Plane();
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane1Clicked);
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane1Rollover);
controlPlane.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane1Rollout);

Then create functions and use tweener to manipulate the 3D objects

private function plane1Rollover (myEvent:InteractiveScene3DEvent):void {     
    //moves the panel back on roll over
    Tweener.addTween(myEvent.currentTarget, { z:120, time:.5, transition:"easeInOutQuint" } );
}

private function plane1Rollout (myEvent:InteractiveScene3DEvent):void {
    //moves the panel froward to its original position on roll out.
    Tweener.addTween(myEvent.currentTarget, { z:100, time:.5, transition:"easeInOutQuint" } );
}
        
private function plane1Clicked (myEvent:InteractiveScene3DEvent):void {
    //Resets the panels X rotation
    myEvent.currentTarget.rotationX = 0;
    //Flips the panel 360
    Tweener.addTween(myEvent.currentTarget, { rotationX:360, time:1, transition:"easeInOutQuint" } );
}

Follow this link to view a demo and as usual to view the full source right click the demo.