7. Basic Mouse Interaction
In this tutorial, I'll simply show you how to do some basic movement in the scene by using the mouse.
This is the result:
Ugly, but simple. It's so simple that I'm just going to post the source code.. If you've been following my last tutorials, and you read the comments around the three lines of code in "ProcessFrame" then you should understand it.
Actionscript:
-
package {
-
-
import PaperBase;
-
import org.papervision3d.objects.DisplayObject3D;
-
import org.papervision3d.objects.parsers.Collada;
-
-
public class Main extends PaperBase {
-
-
public var cow:DisplayObject3D;
-
public var distance:Number = 1000; //Distance the camera should be from the model
-
-
public function Main() {
-
init();
-
}
-
-
override protected function init3d():void {
-
cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
-
cow.moveDown(100);
-
cow.scale = 3;
-
default_scene.addChild(cow);
-
}
-
override protected function processFrame():void {
-
// The next line is a bit of a mouthful, but it's quite simple really.
-
// It just gets the Y position of your mouse, and sets the camera.y to a
-
// value between -800 and 800, depending on the Y position of your mouse
-
// (If mouseY = 0 then camera.y = 800. If mouseY = stage.height, camera.y = -800)
-
default_camera.y = -(((mouseY - (stage.height / 2)) / stage.height) * 1600);
-
-
// We don't want the camera to move further away from the model, so we do this:
-
default_camera.moveForward(default_camera.distanceTo(cow) - distance);
-
-
// We now want to rotate the object depending on
-
// the Xmouse position. This is really simple.
-
cow.rotationY = -((mouseX / stage.width) * 360) //Rotation
-
-
// NOTE: This will only work if you only have one object in your scene.
-
// I'll write a more advanced movement tutorial soon
-
}
-
}
-
}




Luke I see a white screen, there is something that I'm missing?
Thank you very much! I'm following your blog, it is so helpfull.
Alek
Hi,
I changed it to fit for Flash CS3, as well:
package {
import base.PaperBase;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
public class CowExample extends PaperBase {
public var cow:DisplayObject3D;
public var distance:Number = 1000; //Distance the camera should be from the model
public var $currentRoot;
public function Main($root) {
this.$currentRoot = $root;
init($root);
}
override protected function init3d():void {
cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
cow.moveDown(100);
cow.scale = 3;
cow.pitch(-30);
default_scene.addChild(cow);
}
override protected function processFrame():void
{
// The next line is a bit of a mouthful, but it's quite simple really.
// It just gets the Y position of your mouse, and sets the camera.y to a
// value between -800 and 800, depending on the Y position of your mouse
// (If mouseY = 0 then camera.y = 800. If mouseY = stage.height, camera.y = -800)
default_camera.y = -(((this.$currentRoot.mouseY - (this.$currentRoot.height / 2)) / this.$currentRoot.height) * 1600);
// We don't want the camera to move further away from the model, so we do this:
default_camera.moveForward(default_camera.distanceTo(cow) - distance);
// We now want to rotate the object depending on
// the Xmouse position. This is really simple.
cow.rotationY = -((this.$currentRoot.mouseX / this.$currentRoot.width) * 360) //Rotation
// NOTE: This will only work if you only have one object in your scene.
// I'll write a more advanced movement tutorial soon
}
}
}
Mike
I have a white screen, too. The same as in tutorial 6. Can you explain what I have to write in my code when I have downloaded the model and texure files?
I`m an absolutely noob
Sorry for my English. I`m from Germany
Manuel
Hi Luke,
like Alek and Manuel i also have a whit screen :/ Why is that ? Did i miss some configurations steps ?
Hi to all! i am NOT a programmer or someone important, i am minipower but...in the first tryout i had white screen like others then.. i resolved copying the plain text code version and in flashdevelop it worked fine!!!
Maybe some kind of error writing comments or other
I have a white screen too, but only if the dimensions are less then 800x600...
Im getting a blank screen too, but if I test again with Ctrl + enter (simulates download) it gets it right. Im sure its not a code problem. Will probably work ok online.
Hi, I have found a solution for CS3
package {
import PaperBase;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
public class Main extends PaperBase {
public var cow:DisplayObject3D;
public var distance:Number = 1000;
public function Main() {
init();
}
override protected function init3d():void {
cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
cow.moveDown(100);
cow.scale = 3;
cow.pitch(-30);
default_scene.addChild(cow);
}
override protected function processFrame():void {
default_camera.y = -(((this.mouseY - (this.stage.stageHeight / 2)) / this.stage.stageHeight) * 1600);
default_camera.moveForward(default_camera.distanceTo(cow) - distance);
cow.rotationY = -((this.mouseX/this.stage.stageWidth)*360) //Rotation
}
}
}
the stage width and height in Flash CS3 is get by this.stage.stageWidth and this.stage.stageHeight
That works in flex 3, also:
change all stage.height to stage.stageHeight and stage.width to stage.stageWidth
Yes It does work in Flex 3...
probably simple question: is the reason the cow is at the lower right of the screen always because of the coordinates in the orignal .dae file?
First, I would like to thank you for this great work ! Papervision and flashdevelop look like great tools, but they definitely lack good tutorials. I can't tell you how grateful I am...
However, I feel realy stupid, as I am stuck with a problem I can't solve. It is probably simple, but I have to admit I am completely lost.
Everything is working fine with the tutorials. I've adapted this one to my object (a simple cube, instead of the cow...) When I test it, it does work fine (yeah ! I'm in 3D ! Awesome !)
Unfortunately, my ultimate goal is to put it on a website. Problem is : as soon as I move my swf file (on another folder or on my server), it doesn't work anymore.
Even if I move also the .dae, the texture, the .as files and the obj folder. Even when I change all paths (relative or absolute, even in the XML file...what is this one for, anyway ?)
I've been trying for a few hours now, but no luck. I think I'm gona cry !
So in short : what files will I need to upload on my server ? And do you know how to solve what seems to be a path problem ?
Thank you again for the good work, anyway.
Kea, maybe your problem is the sandbox security model. A explains about sandbox: work.whoischarles.com/files/flash_player_9_security_model.pdf
Thank you for the great tutorials, we are expecting more : )
a question: I have a project where the user can create a painting and then attach the painting to the 3D model as a texture. I can update the texture png while the swf is still running, but cannot update the texture on the model. Removing and adding "cow" child does not update the texture. How can I remove the "cow var" totally to be able to add later?
Thanks a lot!
[...] 不能轉球,那就移動 camera ;參考 Basic Mouse Interaction,搞定! « Demo 080523 ~ 3D 螺旋 Demo 080527 ~ iTune 封面 [...]
My cow doesn't stay locked to the center of the screen when I move my mouse vertically. The cow moves up and down vertically. The rotation works fine, I just can't figure out why the cow won't stay centered when I move my mouse along the Y axis.
Any ideas?
[...] tutorials over at this site definitely helps. I extended a base class downloaded from that site to get all the boilerplate code [...]