快速导航:   教程资源  | 经典范例  | 友情链接  | 联系我们  | 官方微博
登陆 | 注册

 flash 3d 研究所
flash3d 研究所 pv3d 教程 研究所小贴士: [Embed(source = '模型.DAE', mimeType = 'application/octet-stream')]后,private var DAEAsset:Class; private var DAEByteArray:ByteArray = new DAEAsset() as ByteArray;可以把外部模型嵌入到swf里










最近更新:
● Antuanettiz阁下在讨论区里 发表新主题“100 free adult chat ...”(21:49:55)
● Antuanettiz阁下在讨论区里 发表新主题“dating for gay — adu...”(20:16:11)
● Antuanettiz阁下在讨论区里 发表新主题“adult dating in germ...”(18:52:16)
浏览主题:《超简易papervision3D基础 第八篇 双面可翻转》

《超简易papervision3D基础 第八篇 双面可翻转》
DDM君 (2012-03-16 05:50:41)

DDM君 , Flab3D.com (允许转载,转载请注明)

Flash3d的商用站点,很多都有这种效果:正面是一张图,然后点击翻转变成另一张这类似的。随着flash3d站点的增多,即使在下现在不写,以后也一定有朋友会问起,所以这次就介绍这个效果的制作。

鼠标点击平面可翻转






原理解释:
在默认显示下,一个平面的背面通常是不显示的。这在三维图形学中叫做backface-cull,是一种节省资源的显示方法。
双面可翻转就是利用backface-cull这个天然窍门的一种技巧,让两个或者更多平面背靠背,然后全部装进一个空容器里,控制的是这个容器的旋转。由于背面是不显示的,所以即使正反面的图位置上完全相同,正面的贴图也不会被Z-sorting破坏。
想了解什么是Z-sorting,请参考《三维图形原理 为什么我的模型老破面/缺面》


这里下载这次的程序源代码
代码解释:
这次我们想做一个鼠标一点就能反转并陈列不同信息的平面,再点一次则翻转回开始。我们会要用到鼠标交互的功能。
如果不记得如何鼠标交互, 请参考《超简易papervision3D基础 第六篇 超简易鼠标交互》



把第二个平面,反转180度,让两个平面背靠背。
plane2.yaw(180);

把两个平面一起装进空DisplayObject3D里,并把空DisplayObject3D添加到场景中显示。
container=new DisplayObject3D();
container.addChild(plane1);
container.addChild(plane2);
scene.addChild(container);

两个平面都加入‘鼠标点击’的交互,isFront来判断现在是正面还是反面。
注意:记得我们鼠标交互的时候说了,实际上交互的是贴图,而不是物体。所以我们这里其实并没有给容器空DisplayObject3D加addEventListener,因为容器是没有贴图的,加了也没用。
没有贴图的物体就不能鼠标交互。(其实是‘不能用这种简单的方法交互’)
plane1.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onInter1);
plane2.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onInter2);
public function onInter1(evt:InteractiveScene3DEvent):void {
isFront=true;
}
private function onInter2(evt:InteractiveScene3DEvent):void {
isFront=false;
}

下面就是控制反转的代码,都是ActionScript的基础知识,并不是pv3d,在下就不废篇幅讲解这段了,花点时间看看,实在有困难欢迎去讨论区询问。
if (isFront) {
    if (container.rotationY>=180) {
    yawAngel=0;
    } else {
    yawAngel=30;
    }
} else {
    if (container.rotationY<=0) {
    yawAngel=0;
    } else {
    yawAngel=-30;
    }
}
container.rotationY+=yawAngel;

这里还是用我们前几天发布的方便镜头控制的orbitY。 讨论区这里有具体的使用方法和参数代表的含义。--〉去讨论区这一贴学习orbitY的使用法
camera.orbitY(plane1,0,-200,-40);

如果要做可以不停的翻转新的面只需要把各个面隐藏/显示就是了,希望您自己有空去多多尝试,如果有有趣的经验欢迎分享给我们。
把我们学到的在实践中使用出来吧,继续加油~
有任何不清楚的地方,欢迎到讨论区发言。(无需注册)


DDM君
Flab3D.com

Flash3d研究所推荐的最新pv3d傻瓜包
程序源代码





flash 3d 研究所
(2008-12-07 00:17:45)
哇 真不错的分享 学习了


flash 3d 研究所
(2008-12-08 15:27:29)
谢谢楼主的教程


flash 3d 研究所
(2009-01-21 14:32:32)
在NO.6篇偶回复用viewport.buttonMode = true;可以实现鼠标手形,这个手形貌似有“global”!
DDM君这里用了viewport.getChildLayer(plane1).buttonMode=true;更加精确!


flash 3d 研究所
(2009-04-01 05:32:26)
为什么camera.orbitY(plane1,0,-200,-40) 第三个参数是负的呢?它不是代表镜头与物体的距离吗?


flash 3d 研究所
(2009-04-12 22:24:51)
如果我自己编了一个继承类DisplayObject3D,我该怎样添加ENTER_FRAME事件,好像在DisplayObject3D中不起作用。


flash 3d 研究所
(2009-07-04 22:29:41)
学习。


flash 3d 研究所
(2009-12-10 11:01:19)
private function onInter2(evt:InteractiveScene3DEvent):void {
isFront=false;
}

这里有应该是
public function onInter2(...){...}




flash 3d 研究所
(2010-06-20 23:04:10)
那个Plane如何两面都贴图呢???难道一定要楼主用到的啥Container?


flash 3d 研究所
(2010-11-15 08:25:47)
如果是两个元件之间的切换,就是用元件取代图片,那该怎么做呢,期待答复


flash 3d 研究所
(2011-08-01 14:05:26)
恩,非常不错的学习资料


flash 3d 研究所
(2011-08-23 01:53:31)
Fell out of bed feeling down. This has brgithneed my day!


评论人:
邮   箱: (填入邮箱,博客地址均可)

内   容: (广告和垃圾内容可能会被删除,望理解)
链接地址

验证码:(为防止机器人骚扰,请麻烦输入验证码^_^)
  

(目前需登陆方可发表)


不想添加了