教程区
正在浏览教程： 《超简易papervision3D基础 第八篇 双面可翻转》
《超简易papervision3D基础 第八篇 双面可翻转》
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傻瓜包
程序源代码
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傻瓜包
程序源代码
| sfrage (2008-12-07 00:17:45) |
哇 真不错的分享 学习了 |
|
| 好奇的人 (2008-12-08 15:27:29) |
谢谢楼主的教程 |
|
| winky (2009-01-21 14:32:32) |
在NO.6篇偶回复用viewport.buttonMode = true;可以实现鼠标手形,这个手形貌似有“global”！ DDM君这里用了viewport.getChildLayer(plane1).buttonMode=true;更加精确！ |
|
| bob2211 (2009-04-01 05:32:26) |
为什么camera.orbitY(plane1,0,-200,-40) 第三个参数是负的呢？它不是代表镜头与物体的距离吗？ |
|
| 8号闪电人工作室 (2009-04-12 22:24:51) |
如果我自己编了一个继承类DisplayObject3D，我该怎样添加ENTER_FRAME事件，好像在DisplayObject3D中不起作用。 |
|
| cm (2009-07-04 22:29:41) |
学习。 |
|
| 阿门兔 (2009-12-10 11:01:19) |
private function onInter2(evt:InteractiveScene3DEvent):void { isFront=false; } 这里有应该是 public function onInter2(...){...} |
|
| cl (2010-06-20 23:04:10) |
那个Plane如何两面都贴图呢？？？难道一定要楼主用到的啥Container? |
|
|