This week I set out to create a Papervision Carousel in it's simplest form. At the heart of this carousel is a simple "for" loop / math which places the items in a circle in 3D space
This code allows us to just increment currentItem and rotate our carousel. Another easy add-on would be to setup a navigation along the bottom where you could control and change the currentItem to a specific number to rotate right to that section of the carousel.
It's also very easy to customize the number of items and radius of the carousel by adjusting these numbers.
**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
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:
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:
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:
// 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:
