Tag Archive for 'Papervision Cube'

**Update
This tutorial has been updated using TweenLite and the most recent papervision BasicView class.

Hi,

In this tutorial we're going to use Tweener to move a cube around. This will teach you basics of animation, and how to use Tweener (which is awesome).

The example that I've produced is this:

So, in this example our solid red cube is trying to stay inside our green wireframe cube. Every time the red cube gets itself positioned completley inside the green cube, the green cube moves.

Tweener is the package which is smoothly moving the red cube around. The Tweener package is also firing the event to move the green cube when the tween is complete.

1: To start off, you'll need Tweener. You can download it here if you don't already have it: http://code.google.com/p/tweener/

Once you've got tweener, either add the source directory containing the "caurina" folder to your project's classpaths, or add the caurina folder into your current project.

2: Import tweener - Add this line to your imports:

import caurina.transitions.Tweener;

3: Add a Tween. You can add tweens to any parameter of any object. The Tweener package will gradually change any parameter in your code to a new value over time, so only numeric values will work nicely. Anyway, you can read a load more about tweener at the google code page above.

To add a tween, we use the code

Tweener.addTween(object, {parameter1: value, parameter2: value2, time: X, 
transition:"transition", onComplete: functionname});

This may look a little bit confusing at first, but it's really simple. Let's show you a real example..

Tweener.addTween(cube, { x: 1000, z: 500, time: 2, onComplete: randomize } );

The line above will add a tween. This tween will change the values "x" and "y" on the object "cube" to 1000 and 500 respectively. It will smoothly change the values over a period of 2 seconds and once the tween is complete and the cube.x is 1000 and cube.y is 500, it will trigger the "randomize" function.

Experiment with more ways to tween your objects. You can apply tweens to anything, including cameras, lights, rotations, sizes and camera zooms. Any numerical value you can think of.

Here is my source code (Uses latest version of my base class):

Delicious Digg This Post Facebook Stumble This Post

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

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

-Luke

Delicious Digg This Post Facebook Stumble This Post

**UPDATE
This tutorial has been updated

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

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

Have fun! More Examples coming soon.

Delicious Digg This Post Facebook Stumble This Post

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

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:

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:

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!

Delicious Digg This Post Facebook Stumble This Post