Flex与Away3D实例入门

因为看到一篇好文章，Getting Started with Adobe  Flex and Away3D，按照他的步骤，做出一个away3D的例子。下面介绍一下。

 

要谈到Flex上的3D开发，away3d是个不错的选择，可以看一下下面的这个例子：

 

 

 

好的，如何能实现这个例子呢？

 

一开始，我们需要得到一个最新的Away3D的版本，我们可以到http://www.away3d.com/download 上去下载她，在FlexBuilder3环境中，新建一个 Flex Project ，起一个名字，例如：Away3D，然后我们点击Finish。

然后，我们将下载之后的zip文件解压缩，里面会有一个叫做away3d的文件和一个nochump的这两个文件，我们把上面提到的那两个文件拷贝到这个Away3D的src目录底下。

 

然后，我们要将我们的mxml代码修改为如下的形式：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
   width="500" height="400" >
  <mx:Panel width="100%" height="100%" title="Our 3D Canvas"
     backgroundColor="#D1F0FF">
  </mx:Panel>
</mx:Application>

 

 

 

然后我们需要新建一个flex类，他叫做FlexView3D，代码如下所示：

 

package
{
  import mx.core.UIComponent;

  public class FlexView3D extends UIComponent
  {
    public function FlexView3D()
    {
      super();
    }
  }
}

 

然后我们需要修改我们的mxml为：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"
   layout="absolute" width="500" height="400">
  <mx:Panel width="100%" height="100%" title="Flex 3D View"
     backgroundColor="#D1F0FF">
    <local:FlexView3D width="100%" height="100%" />
  </mx:Panel>
</mx:Application>

 

然后我们将我们将之前的那个FlexView3D 类修改为：

 

package
{
  import away3d.core.material.BitmapFileMaterial;
  import away3d.core.math.Number3D;
  import away3d.core.scene.View3D;
  import away3d.objects.Cube;
  
  import flash.events.Event;
  
  import mx.core.UIComponent;

  public class FlexView3D extends UIComponent
  {
    private var view:View3D;
    
    private var sotcCube:Cube;
    
    public function FlexView3D()
    {
      super();
      this.addEventListener(Event.ENTER_FRAME, onFrameEnter);
    }
    
    override protected function createChildren():void
    {
      super.createChildren();
      
      if(!this.view)
      {
        this.view = new View3D();
        
        this.view.camera.moveTo(new Number3D(0, 0, -1500));
        this.view.camera.lookAt(new Number3D(0, 0, 0));
      }
      this.addChild(this.view);
      
      if(!this.sotcCube)
      {
        this.sotcCube = new Cube({name: "cube", size: 250});
        this.sotcCube.material = new BitmapFileMaterial("sotc.jpg");
      }
      this.view.scene.addChild(this.sotcCube);
    }
    
    override protected function updateDisplayList(
      unscaledWidth:Number, unscaledHeight:Number):void
    {
      super.updateDisplayList(unscaledWidth, unscaledHeight);
      
      if(this.width / 2 != this.view.x)
        this.view.x = this.width / 2;
      if(this.height / 2 != this.view.y)
        this.view.y = this.height / 2;
    }
    
    private function onFrameEnter(event:Event):void
    {
      if(this.view && this.view.stage)
      {
        this.sotcCube.rotationX += .7;
        this.sotcCube.rotationY += .5;
        this.sotcCube.rotationZ += .4;
        
        this.view.render();
      }
    } 
  }
}

 

然后我们运行一下，看看是否出现了一个3D的旋转的立方体？（代码中的图片可以放上自己找的图片然后rename it）。

评论

2 楼 lanjingyu 2009-09-10  

look at this website

http://www.altynai.org/sites/default/files/flash/Test3d.swf

1 楼 lanjingyu 2009-09-10  

你翻译的时候自己不跑一跑

build path需要设置

还要在建立一个项目然后add project Away3D这个lib proj

...