如何把Papervision3d物体加到 flex项目中(附 旋转圆球例子)

本文介绍怎么在flex项目中使用Papervision3d，而不是在actionscript项目中。

(Papervision3d 最新源代码和swc库文件：http://code.google.com/p/papervision3d/ )

 本文参照：http://pv3d.org/2008/11/29/adding-a-basicview-to-a-flex-uicomponent/

方法一 直接在mxml文件中加入 3D 窗体组件

  代码:

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application width="640" height="480" xmlns:mx="http://www.adobe.com/2006/mxml "  layout="absolute"
 applicationComplete="applicationComplete()">
 <mx:Script>
  <![CDATA[
   import org.papervision3d.objects.primitives.Sphere;
   import org.papervision3d.view.BasicView;
   private function applicationComplete():void
   {
    var basicView:BasicView = new BasicView(); //3D 窗体, 是一个 UIComponent
    var sphere:Sphere = new Sphere(null,200,16,16); //3D球体，属性依次是材质,半径,水平方向三角形数量，垂直方向三角形数量
    basicView.scene.addChild(sphere); //把球体加入到 3D 窗体中
    basicView.startRendering(); // 显示
    pv3dPanel.rawChildren.addChild(basicView); //把3D窗体加入到panel中
   }
  ]]>
 </mx:Script>
 <mx:Panel id="pv3dPanel" title="Papervision3D Panel" width="640" height="480"/>
</mx:Application>

运行效果:

 

代码分析：

   用BasicView创建一个3d球体还是很简单, 比老版简化了很多步骤。 这里需要注意的是“  pv3dPanel.rawChildren.addChild()” ， 官方文档入下:

http://livedocs.adobe.com/flex/3_cn/mx/core/Container.html#rawChildren

 容器中通常包含子组件，可以使用 Container.getChildAt() 方法和 Container.numChildren 属性枚举这些子组件。此外，容器可以包含样式元素和外观，如边框和背景。Flash Player 和 AIR 创建的子组件和外观之间没有任何差异。二者均可以使用播放器的 getChildAt() 方法和 numChildren 属性进行访问。但是，Container 类通过覆盖 getChildAt() 方法和 numChildren 属性（以及其它多个方法）可造成容器的子项是唯一的子组件的错觉。

如果您需要访问容器的所有子项（内容子项和外观），则需使用 rawChildren 属性上的方法和属性，而不是常规 Container 方法。例如，可使用 Container.rawChildren.getChildAt()) 方法。但是，如果容器为其子项创建了 ContentPane Sprite 对象，则 rawChildren 属性值将只计算 ContentPane，而不计算容器的子项。并非总能够确定容器何时包含 ContentPane。

注意： 如果您调用 rawChildren 对象的 addChild 或 addChildAt 方法，则需在添加的组件上设置 tabEnabled = false 。这可以防止用户跳位到所添加的仅可视组件。

 

也可以写成这样：(不推荐)

<mx:Script>
  <![CDATA[
   import mx.core.UIComponent;
   use namespace mx_internal; 
   
   import org.papervision3d.objects.primitives.Sphere;
   import org.papervision3d.view.BasicView;
   private function applicationComplete():void
   {
    
    var basicView:BasicView = new BasicView();
    var sphere:Sphere = new Sphere(null,200,16,16);
    basicView.scene.addChild(sphere);
    basicView.startRendering();
    pv3dPanel.$addChild(basicView);  
   }
  ]]>
 </mx:Script>

 

代码下载:

http://dl.getdropbox.com/u/132579/sites/pv3d.org/flex/basics/FlexBasicView.zip

方法二：使用自定义控件，把3d窗体封装到自定义控件中， 在主应用中引入这个自定义控件。

 

主要代码：

 import flash.events.Event;
 
 import org.papervision3d.cameras.CameraType;
 import org.papervision3d.objects.primitives.Sphere;
 import org.papervision3d.view.BasicView;
 
 public class My3D extends BasicView
 {
  private var sphere:Sphere
  public function My3D()
  {
    super(400,300,false,true,CameraType.FREE);
     sphere = new Sphere(null,200,16,16);
        scene.addChild(sphere);
     startRendering();
  }
 /**
         * 加入每一帧的动作
         * @param event
         * 
   */
override protected function onRenderTick(event:Event=null):void
  {
   sphere.yaw(1);//球体绕Y轴旋转
   renderer.renderScene(scene, camera, viewport);
  }
 }

 

代码分析：

  其实就是把方法一封装一下，做一个自定义控件，用自定义控件来装载3d窗体，并把这个控件当作3d窗体的控制器， 然后把这个控件放到主应用中。

  另外，比方法一多了球体旋转效果， 代码在上面贴了。

 

代码下载： 见附件