一直以为3d图形编程是那么的困难,在此之前也从没触及过。直到前几天,一次非常偶然的机会,需要做一个类似于ipod的专辑滑动效果的flash,从网上找到了一个叫做coverflow的特效,阅读了源代码,才发现,3d图形编程其实也还挺简单的。

之前之所以认为困难,尤其是因为搞不懂如果在一个3d空间里视角转换了的话看到的物体究竟会怎么变,说实话,如果从0开始想怎么用程序去实现的话确实很困难,但是如果使用构造好的模型或者说是引擎来去实现的话,一切就都简单了。

首先,最为基础的4个概念:

  • 一个场景-A scene
  • 一架摄像机-A camera
  • 一个渲染器-A renderer
  • 一个物体-An ojbect

那么,把一个物体以3d的形式来显示出来其实就是:把使用一架摄像机在一个场景中拍下来的一个物体的图像渲染出来
因此,我们显示一个物体的具体步骤就是:
1)创建一个场景
2)创建一架摄像机
3)放入一个物体到场景
4)把摄像机在场景中拍到的图像显示出来,即所谓的渲染
实现以上个步骤,就算是完成了一个3d场景的创建。

各种平台上基本都有主流的实现3d场景的库,ActionScript3.0版本有个叫做papervision3d的开源库,基本符合上面的建模思想,只是具体实现方面有所区别,貌似在papervision3d里面将场景跟你所看到的viewport(视界?)区分了出来,即创建了场景以后,你可以指定在场景中能够看到的一个四方形的范围(即二维视界)。

private var scene:Scene3D;
private var camera:Camera3D;
private var viewport:Viewport3D;
private var render:BasicRenderEngine;
private var mycube:Cube;

public function init3D():void{
  //创建相关对象
  scene = new Scene3D();
  camera = new Camera3D();
  viewport = new Viewport3D(640,480,true);
  render = new BasicRenderEngine();
  
  //创建一个正方体
  var material:CompositeMaterial = new CompositeMaterial();
  material.addMaterial(new ColorMaterial(0xFF6600));
  material.addMaterial(new WireframeMaterial(0xFFFFFF));
  var materialList:MaterialsList = new MaterialsList({all : material});
  cube = new Cube(materialList,300,200,100);
  cube.x = 100;
  scene.addChild(cube);
  
  //创建完成触发渲染事件
  this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
  
  private function onEnterFrame(e:Event):void{
    //渲染场景
    render.renderScene(scene,camera.viewport);
  }
}

上面的那段代码的效果演示如下(其中运动的部分是使用Tweener库来实现的):

最后,贴上我之前自己修改的coverflow效果,图片是从xml配置文件中读取的,因此更换起来非常方便,有需要源码的可以邮件我。

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Close Bitnami banner
Bitnami