《超简易papervision3D基础 第六篇 超简易鼠标交互》 DDM君 (2012-03-16 05:50:42)

DDM君 , Flab3D.com （允许转载，转载请注明）


鼠标交互可能是新时代软件的基本要求之一,连NDS掌机都能交互=_=。没有鼠标交互，做出的作品/产品会不那么用户亲和。
但是，flash3d中鼠标交互是个问题非常多的主题。在我们的实战中，会遇到很多难以解决的麻烦。我们flash3d研究所也对这类问题开发了自己的包。 这里我们不可能一一讨论，只能讲解最基本的思路。如果实际遇到任何问题，欢迎到讨论区留言

（鼠标点击任意球放大）


原理解释：
我们认为是点击在物体上触发的事件，实际上是点击在物体的贴图上。也就是说flash3d的鼠标点击还是和点击平面图形的原理相同，只不过是点击在一群构成某个物体的平面图形上。由于flash3d交互的思想并没有定型，所以我们暂时不对这方面原理做细致分析。

这次我们要制作一个让被鼠标点击的那个球体放大的程序。
请先下载-> 源代码下载


代码解释：

首先最重要的是把’窗口’的交互设成true，（如果不记得什么是窗口，请参考《第一篇 人人都能PV3D》—点击到第一篇
)
viewport.interactive=true;

下面这两步，是最正规的导入位图贴图的步骤，我们以前从来都是直接简写为new BitmapFileMaterial("map1.jpg")，这次我们来试试专门声明出来。
private var bfm1:BitmapFileMaterial;
private var bfm2:BitmapFileMaterial;

bfm1=new BitmapFileMaterial("map1.jpg");
bfm2=new BitmapFileMaterial("map2.jpg");

这步可能有点难以理解，因为要先把贴图变成可交互，常常有朋友忘掉这一步。（看了这篇以后谁忘掉了，还是自罚面壁半小时^_^）
bfm1.interactive=true;
bfm2.interactive=true;

侦听InteractiveScene3DEvent，这是pv3d鼠标交互的事件，分别触发onInter1和onInter2
sphere1.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onInter1);
sphere2.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onInter2);

鼠标点击到哪个球，就让哪个球变大
public function onInter1(evt:InteractiveScene3DEvent):void {
sphere1.scale=1.5;
sphere2.scale=1;
trace("gay");
}
private function onInter2(evt:InteractiveScene3DEvent):void {
sphere1.scale=1;
sphere2.scale=1.5;
trace("lesbian");
}

这里还是用我们前几天发布的方便镜头旋转的orbitY。 讨论区这里有具体的使用方法和参数代表的含义。--〉去讨论区
总之这句是为了能让我们更容易看出破面有没有解决慢慢转动摄像机用。
camera.orbitY(sphere1,1,900,500);

当然，为了使用上面的所有功能，要导入必须的类：
import org.papervision3d.events.InteractiveScene3DEvent;

鼠标交互，特别是网页软件中是非常重要的功能之一，好好掌握和研究它吧，它会让你的作品更有趣更完美。
这次也请继续加油哦。


有任何不清楚的地方，欢迎到讨论区发言。（无需注册）



DDM君
Flab3D.com

Flash3d研究所推荐的Pv3d傻瓜包下载
源文件下载

	(2008-11-25 13:55:03)	如何精确获得鼠标点击的三维坐标呢，DDM 你们有好的解决方案吗？ 回复
	(2008-11-25 14:16:05)	貌似用Mouse3D可以确定～～请问怎么激活手型鼠标呢？貌似没有buttonMode这个属性～～ 回复
	(2008-11-25 14:46:13)	我们就是在获取三维坐标这个方面在努力呢 主要是靠向量相交来判断 还是有一定难度 因为二维鼠标是不可能明确表达具体在什么空间位置的 必须要靠一些限制 目前还不能准确的获取 希望之后能有所有收获 回justin： Mouse3D获取的数据有点不正确，特别是平凡转动摄像机的时候。 什么叫手型鼠标呢？变成点击的形态吗？那个需要自己设置呢 呵呵 回复
	(2008-11-25 15:49:35)	比如上面的演示，鼠标移动到小球上，鼠标变成点击状态～～我看了下，材质和do3d都没有buttonMode～～是不是要加入viewportLayer才行？ 回复
	(2008-11-25 16:11:00)	多谢，这个问题困扰了我N久啊 获取的三维坐标总是有误差，而且误差是随机的，不是固定的，所以没办法补偿 希望你们能够找到合适的方法 加油！ 回复
	(2008-11-25 16:42:54)	to justin:这个。。。把鼠标隐藏然后替换成自己的鼠标图标应该就可以解决吧 当鼠标碰到任何物体的时候设置成自己的图标就可以了 应该不复杂的 算是个flash自己的功能嘛 呵呵 加入viewportlayer也是没有用的，不会自动变成手 回复
	(2008-11-25 17:18:08)	嗯 不会变成手的 因为虽然很像movieclip，但实际上并不是movieclip，没有继承至movieclip，只是简单的bitmap而已。 回复
	(2008-12-04 20:20:04)	我想问问在2.0之前的 plane.container.buttonMode=true 是不是不能用了? 回复
	(2008-12-07 14:21:10)	buttonMode是as3本来的方法，所以只要是sprite就可以用。 pv3d里想要用，只要保证是个sprite就行，比如：viewportlayer 回复
	(2008-12-16 16:40:06)	为什么在flash里编译总是造成flash卡死，而用flash develop编译就正常？？ 回复
	(2008-12-16 19:24:35)	要初始，编译和输出的东西太多了，每次用export movie就不会每次死了，不要按ctrl+enter 回复
	(2009-01-19 10:28:33)	我前两天都卡的要死。然后只能是任务管理器开出来直接关掉，最近我用调试，这样也是可以的，可以试下～～～ 回复
	(2009-01-21 14:02:45)	DDM君的PV3D入门教程很不错~~~ 在PV3D中如果要获得鼠标手形，只需: viewport.buttonMode = true; 加在viewport = new Viewport3D(400, 400);之后,无须考虑的更复杂。。。 回复
	(2009-01-21 17:49:58)	整个视窗获得手型很简单，但是正确的地方获得手型其实不是那么简单的。这篇教程有讲 http://www.flab3d.com/tutorial.php?top=t16buttonmode 回复
	(2009-02-18 16:09:31)	键盘交互呢？ 回复
	(2009-02-25 15:44:22)	键盘交互和平常二维flash的时候一样的呢^_^ 回复
	(2009-03-01 17:19:44)	用BitmapFileMaterialList贴图的物体怎样捕获鼠标事件? 回复
	(2009-03-02 11:30:09)	MaterialList需要贴图为‘all’才能捕获，目前很难多张贴图捕获 回复
	(2009-06-23 20:32:04)	十分感谢楼主 在这个类库下，Papervision3D_2.0.883.zip，楼主的好几个例子都无法运行，这个应该比楼主的新，而我用楼主的傻瓜包，学习《超简易papervision3D基础 第六篇 超简易鼠标交互》用flash软件一编译就挂了。不知道是怎么回事。我用的是flashcs4 回复
	(2009-06-30 16:57:03)	GAY?LESBIAN？。。。 这俩词儿选的好^_^ 回复
	(2009-08-17 16:33:19)	有什么办法可以让导入的模型来捕获鼠标事件不？我写的测试代码如下，但是失败了。 package {      import flash.display.Sprite;      import flash.events.Event;            import org.papervision3d.cameras.FreeCamera3D;      import org.papervision3d.events.FileLoadEvent;      import org.papervision3d.events.InteractiveScene3DEvent;      import org.papervision3d.materials.BitmapFileMaterial;      import org.papervision3d.materials.utils.MaterialsList;      import org.papervision3d.objects.parsers.Collada;      import org.papervision3d.objects.primitives.Plane;      import org.papervision3d.render.BasicRenderEngine;      import org.papervision3d.scenes.Scene3D;      import org.papervision3d.view.Viewport3D;      import org.papervision3d.view.layer.ViewportLayer;      public class pv3d003 extends Sprite      {            private var viewport:Viewport3D;            private var renderer:BasicRenderEngine;            private var scene:Scene3D;            private var camera:FreeCamera3D;            private var plane:Plane;            private var car:Collada;            private var layer1:ViewportLayer;            private var layer2:ViewportLayer;            private var bitmapL:BitmapFileMaterial;            private var bitmapR:BitmapFileMaterial;            public function pv3d003():void            {                  viewport=new Viewport3D(400,400);                  renderer=new BasicRenderEngine();                  scene=new Scene3D();                  camera=new FreeCamera3D(2,200);                  camera.y=1000;                  camera.moveBackward(2000);                  addChild(viewport);                  bitmapR = new BitmapFileMaterial("org/131610bfff.jpg");                  bitmapL = new BitmapFileMaterial("org/map_car.jpg");                  bitmapR.interactive = true;                  bitmapL.interactive = true;                  plane=new Plane(bitmapR,10000,10000,8,8);                  plane.pitch(90);                  scene.addChild(plane);                  bitmapL.interactive = true;                  car=new Collada("org/car.XML",new MaterialsList({all:bitmapL}));                  car.addEventListener(FileLoadEvent.LOAD_COMPLETE,onloaded);                  plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK,clickHandler);                  car.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK,clickHandler);                  bitmapL.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK,clickHandler);                  this.addEventListener(Event.ENTER_FRAME,process);                  this.viewport.interactive = true;//设置交互为真            }                        private function onloaded(evt:FileLoadEvent):void {                   //                  car.moveLeft(2000);                  car.moveUp(50);                  scene.addChild(car); //                  viewport.containerSprite.sortMode = ViewportLayerSortMode.Z_SORT;//按照"z"轴自动排列层 //                  layer1 = viewport.getChildLayer(car);//加入到层管理,解决破面问题 //                  layer2 = viewport.getChildLayer(plane);                  trace("添加事件监听事件"); //                  var filter:BlurFilter = new BlurFilter(1,1);//给某个层加入模糊效果,效果值的大小直接影响到速度 //                  layer2.filters = [filter];            }            private function process(evt:Event):void {                  if (car) {                        car.rotationY+=1;                        car.moveForward(10);                        camera.lookAt(car);                  }                  renderer.renderScene(scene,camera,viewport);            }            public function clickHandler(evt:InteractiveScene3DEvent):void            {                  this.car.scale += 0.5;                  trace("click event live");            }      } } 回复
	(2009-11-28 18:20:59)	如果小球的材质图片存放的路径值 我存放在xml中。 我点击小球后，有没有办法获得这个小球的图片的名字或者其他信息？ 回复
	(2010-03-08 21:53:14)	请问，如何在 InteractiveScene3DEvent.OBJECT_MOVE 时， 让他变成手型鼠标？不能用传统的 xxx.buttonMode=true; 回复
	(2010-03-08 21:58:56)	看到上面的答案了，不好意思。 回复
	(2010-04-04 17:23:23)	导入的模型不能相应这个事件！ 回复
	(2010-07-08 15:28:01)	为什么紫色的那个球名字叫Gay? 回复
	(2010-12-11 17:10:28)	回kevin 要如何隱藏鼠標的圖呢?? winky為什麼用Viewport碰到物體卻會變成手型鼠標呢?? Viewport不是 視窗口嗎??那因該是滑鼠移動到視窗口就馬上變了呀.... 回复
	(2011-06-01 16:18:03)	请问，为什么球只能点击一次，再点击就不能放大？如果要每点击一次都放大怎么做？ 回复
	(2011-11-03 21:25:06)	我用的版本是2.1，里面没有FreeCamera这个类，我就用了Camera代替。里面没有orbitY()，不过有一个orbit()，我用了，但Camera没有旋转= =，求帮助。 回复

评论人: 邮   箱: (填入邮箱，博客地址均可) 内   容: (广告和垃圾内容可能会被删除，望理解) 链接地址 验证码：(为防止机器人骚扰，请麻烦输入验证码^_^)    (目前需登陆方可发表) 不想添加了