In this tutorial, we're going to learn how to handle "interactive scene3d events", in particular the events which occur when your mouse moves over an object, out of an object and clicks an object. We're going to make something like this:
When you place your mouse over the plane, the material will change. When you click it, it will spin in the opposite direction.
Unfortunately we have to edit the base class.. again.. All we need to do is change one line so that the viewport becomes interactive when we initialise it.
Open up PaperBase.as, and find this line:
-
viewport = new Viewport3D(vpWidth, vpHeight);
Swap it for this line:
-
viewport = new Viewport3D(vpWidth, vpHeight, false, true);
This will make the viewport interactive, which means it can trigger events.
Now that you've updated the base class, create a new project. Make the Main class extend PaperBase as usual and then add the following imports:
-
import org.papervision3d.materials.BitmapFileMaterial;
-
import org.papervision3d.objects.DisplayObject3D;
-
import org.papervision3d.events.InteractiveScene3DEvent;
-
import org.papervision3d.objects.primitives.Plane;
Now, add the following declarations under "public class Main extends PaperBase {" :
-
private var ourMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
-
private var ourOverMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front_over.jpg");
-
private var yawspeed:Number = 5;
-
private var plane :DisplayObject3D;
ourMaterial is the material that we'll put onto the plane.
ourOverMaterial is the material that will be activated on mouse over.
We'll load both of these materials from files on my server.
yawspeed will be how much we're going to yaw() the plane by each frame
and "plane" will be the plane.
This next function will show you how to make the material interactive, and how to add an event listener to the stage:
-
override protected function init3d():void {
-
ourMaterial.interactive = true; // You need to set the interactive property of the materal to true.
-
ourMaterial.doubleSided = true; // We want to be able to see both sides of the plane
-
ourOverMaterial.interactive = true; // Same for the mouseover material
-
ourOverMaterial.doubleSided = true;
-
-
plane = new Plane(ourMaterial, 1000, 1000, 4, 4); // Create a new plane
-
default_scene.addChild(plane); // Add it to the scene
-
-
// These lines add event listeners to the plane which will trigger the functions on the event specified.
-
plane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress ); // Will trigger "onPress" when the object is pressed (clicked)
-
plane.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, onOver ); // Will trigger "onOver" when the mouse rolls over the object
-
plane.addEventListener( InteractiveScene3DEvent.OBJECT_OUT, onOut ); // Will trigger "onOut" when the mouse rolls out of the object
-
}
I've commented the code so it should be easy to understand.
Now we need to add the "on..." functions. You can do whatever you want in these functions, but in this tutorial we're going to make the effect like above.
-
private function onOver ( e:InteractiveScene3DEvent ):void {
-
plane.material = ourOverMaterial; // Change the material to "ourOverMaterial"
-
}
-
-
private function onOut ( e:InteractiveScene3DEvent ):void {
-
plane.material = ourMaterial; // Change the material back to "ourMaterial"
-
}
-
-
private function onPress( e:InteractiveScene3DEvent ):void {
-
yawspeed *= -1; // Reverse the yaw speed
-
}
Finally, we need to add the processFrame code, to rotate the plane by the angle "yawspeed".
-
override protected function processFrame():void {
-
plane.yaw(yawspeed);
-
}
Done! Run the project and you should see the result like above. Here's the complete code:
-
package {
-
import org.papervision3d.materials.BitmapFileMaterial;
-
import org.papervision3d.objects.DisplayObject3D;
-
import org.papervision3d.events.InteractiveScene3DEvent;
-
import org.papervision3d.objects.primitives.Plane;
-
-
public class Main extends PaperBase {
-
-
private var ourMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
-
private var ourOverMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front_over.jpg");
-
private var yawspeed:Number = 5;
-
private var plane :DisplayObject3D;
-
-
public function Main() {
-
init();
-
}
-
-
override protected function init3d():void {
-
ourMaterial.interactive = true;
-
ourMaterial.doubleSided = true;
-
ourOverMaterial.interactive = true;
-
ourOverMaterial.doubleSided = true;
-
-
plane = new Plane(ourMaterial, 1000, 1000, 4, 4);
-
default_scene.addChild(plane);
-
-
plane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress );
-
plane.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, onOver );
-
plane.addEventListener( InteractiveScene3DEvent.OBJECT_OUT, onOut );
-
}
-
-
private function onOver ( e:InteractiveScene3DEvent ):void {
-
plane.material = ourOverMaterial; // Change the material to "ourOverMaterial"
-
}
-
-
private function onOut ( e:InteractiveScene3DEvent ):void {
-
plane.material = ourMaterial; // Change the material back to "ourMaterial"
-
}
-
-
private function onPress( e:InteractiveScene3DEvent ):void {
-
yawspeed *= -1; // Reverse the yaw speed
-
}
-
-
override protected function processFrame():void {
-
plane.yaw(yawspeed);
-
}
-
}
-
}
I’ve been working in Flex and trying to add interactivity to my papervision project. here’s whats happening, I add my papervision viewport3D to a mx:canvas components through canvas.rawChildren.addChild(view). I then create a pivot DisplayObject3D and add some objects to the pivot. I loop through all of the pivot.children and try adding the event listener to each item for an InteractiveScene3DEvent.OBJECT_CLICK but Im not getting my events to fire.
Has anyone had a similar experience? Is there something I need to add to my canvas component?? Or is there a better way to add the event listener to the objects?
Thanks a bunch for any help!!
I’m getting an error
Warning: 1090: Migration issue: The onPress event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( ‘mouseDown’, callback_handler).
and when I rename the function is simply does nothing.
The same as Nathaniel, I renamed the function but nothing happens. Also the other functions when mouse is over and out, are not working
Now it works for me, The problem was that I had renamed the PaperBase class to PaperBaseTres
so I had to change the line where I extend the class…
Hope it works for you!!
public class Interact extends PaperBaseTres { …
}
hi
I’m getting this error:
1024: Overriding a function that is not marked for override.
into my main class.
hi
I’m getting this error:
Warning: 1090: Migration issue: The onPress event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( ‘mouseDown’, callback_handler).
into my main class.
what happend?
im sorry to ask the same question again, but how can i fix this Migration Issue? thanks for the tut by the way, its the best i found.
All the warning people are getting are 100% ignorable. They are meant to help catch some errors that come up switching from as 1 and 2 to as 3
The migration issue is due to the fact that the code is using “onPress” as the name of the handler. It is just a default compiler error message letting you know you are using AS2 terminology.
This ignorable error is fixed by searching and replacing “onPress” to.. pretty much anything else you want as long as the name isn’t an Actionscript-reserved word.
Hi and thanks for those great tuto !
I tried to realize something like that but I have a problem : the events are not fired when my mouse does not move.
My object move and if the Mouse doesn’t, when the object came under the cursor, the event InteractiveScene3DEvent.OBJECT_OVER is not fired.
I’d like to know if I missed something…
Thanks a lot !
this is the most useful papervision site.
Hi, great tutorial, thanks!
At first I wasn’t able to get the press event to fire, but I figured it out. When I set the interactive property of the viewport to true it solved everything.
I didn’t use your base template class, so I’m sure you have included it there, but I missed it somehow.
Peace
hi
i’m on my first attempt to do a gallery using papervision 3d but it’s being tough.
if someon could help me, i would really appreciate it.
http://dev.globaz.pt/bial/site/homeReservada.html
as you can see here, my “over” isn’t working properly. the bottom label should switch on every OBJECT_OVER/OBJECT_OUT, but it’s not working(especially when i stop mooving the mouse)
I compared it with this tutorial and i can’t find out what’s the problem:S
probabli this isn’t the best place to ask for help, but still…
thank you
Hi! Very good and useful tutorial.
By the way I have same problem as boulet. I have copied the tutorial word by word and it works, but if I don’t move mouse pointer InteractiveScene3DEvent.OBJECT_OVER is not fired. In flash movie you included heading the tutorial it works… Is it a version issue related with “Great White” code chnages?
Is there a fix?
Thank you very much!
Hi!
to fix it, set viewport.interactive = true; in the init function.
Then in your MouseEvent funtion also set viewport.interactive = true;
That should work!
cheerz,
j
Thanks jolin, but it still doesn´t work for me… I have added the viewport.interactive lines and animation keeps showing the same behaviour…
:-S
On Adobe Flash CS3 / 4.. on the eventListener.. the “OBJECT_PRESS, onPress” , the onPress is highlighted.. so I changed it to “onPresx” and the function to ” private function onPresx(e.Inter…” , .. so I don’t get the Migration error…
Hope that helped out ;) .. and after 2 hours I finished to make my Plane Interactive xD.. ( Hey! It’s my first time that I work with Classes.. I never liked classes.. in PHP I don’t use them.. but that are very nice.. I would use them.. no I MUST use them to become better.. and more secure.. )
- ZoRNdYuKe
Hi. Those tutorials are really great and helpful. This Interactivity is working fine for me when i use Your Plane Objects, however its now working with other objects like DAE objects at all :< dunno exacly why. i set viewport.interactive = true and i used
var bitmapMaterial : BitmapMaterial = new BitmapMaterial(bm.bitmapData);
bitmapMaterial.interactive = true;
I think this material is still not interactive, i tried diffrent materials not only bitmaps and i found only way to set them interactive like above but this seem not working properly. Any ideas ?
Here is some code:
var bm : Bitmap …
var bitmapMaterial : BitmapMaterial = new BitmapMaterial(bm.bitmapData);
bitmapMaterial.interactive = true;
bitmapMaterial.doubleSided = true;
var mats : MaterialsList = new MaterialsList();
mats.addMaterial(bitmapMaterial, “sphere_Sphere_jpg-img”);
this._obj = new DAE();
this._obj.load(_dae,mats);
then im passing this object model to the Main class, similiar to the one from this tutorial, even tried to add it to the scene as DisplayObject3D but no diffrence. Rest of code is same like here…Please help ;)
Ok i found the solution on other website:
by zhivko :
had the same problem. You need to attach the event to a child of the DAE object, not to the DAE object directly. It is a bit quirky getting down to the name of the child – you need to attach a Event.COMPLETE to your DAE, and within it try trace myDAE.childrenList() to get the name of the first object in your DAE, then myDAE.getChildByName(“name of the first object in your DAE”).childrenList() and so on until you reach the innermost object. my code looked like this:
var plane:DAE = new DAE();
plane.load(“plane.dae”, materialsList);
plane.scale = 100;
default_scene.addChild(plane);
plane.addEventListener(Event.COMPLETE, daeCompleteHandler);
function daeCompleteHandler( event:Event ):void
{ plane.getChildByName(“COLLADA_root”).getChildByName(“Plane”).getChildByName(“6″).addEventListener( InteractiveScene3DEvent.OBJECT_OVER, onOver );
}
I actually traced my DAE objects till the innermost like he said but i didnt use Event.COMPLETE function and just skipped and went straight to addEventListener like he wrote and it solved my problem. Cheers :)
Hi there, great tutorial
I’ve managed to integrate the paperbase, the cone example and this basic interactive example into my flex project.
I’ve also looked at the 3D Cube advanced interactivity example.
I saw that it is possible to change the images assigned on each face of the cube.
I’m wondering if its possible to do the same thing on this plane example?
If so how?
Thanks in advance
plane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress );
plane.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, onOver );
plane.addEventListener( InteractiveScene3DEvent.OBJECT_OUT, onOut );
Scense u have add set the material’s interactive = true,I think it should add the listener to the material