返回列表 回复 发帖

[教程] FLARTookit入门详解

这里会用我写的程序来说明怎样用AS3来开发AR程序。这个程序是从FLARManager的example改写的。程序运行效果见http://cankeyyin.blog.163.com/album163/

一、FLARToolKit介绍
  FLARToolKit是ARToolKit的AS3版本。ARToolKit是个可以创建增强现实的C程序库,然而兼容于Adobe Flash/Flex/AIR的FLARToolKit并不仅仅只是对之前C版本的移植。FLARToolKit是从Java版本移植过来的,其名称叫做 NyARToolKit(经过nyatla的艰苦努力之后,现在NyARToolKit的执行速度要比原始的C版本快)。

二、使用AS3开发的好处
1。跨系统跨平台
2。程序可嵌入网页运行

三、开发前要准备的。。。
1。摄像头
2。安装AS3的IDE:Flash、Flex或Flashdevelop,任意一个都行
    下面的例子是用Flex来做的,建议初学者用Flex
3。下载&安装附件的ARToolkit Marker Generator
      这个是AIR程序,需要你的电脑有AIR的Runtime
4。下载附件的FLARManager(里面包含FLARToolkit和3D引擎)

四、调试FLARManager的例程
     FLARManager是一个针对FLARToolkit开发的类库,主要用于管理多个识别图形。
     开发前,先调试一下已经写好的程序
     附件里面的FLARManager_v5,解压后打开Flex,选择File-Import-Flex Project。在Project Folder里面选择解压后的路径,就可以导入这个项目。
     项目的marker图像都在\FLARManager_v05\resources\flar\patterns里面,打印pattens01.pdf,装上摄像头后,选择Run-Debug就可以调试这个程序看效果了。如果不想打印,你打开pattens01.pdf,用摄像头对着它也行。
     下面再来看一下程序文件是怎样组织的。
     FLARToolkit库在src/org/libspark里面
     3D引擎在lib里面
     示例程序的入口在src/FLARManagerExampleLauncher.as。我们打开这个as文件就可以看到,这里有很多例程给我们调试。这些例程的主文件在src/example里面。对象类在src/example/support里面。

五、开发程序
      附件里面的Car.rar是我类库的例程改写的程序。里面的汽车模型是在Flash 3D研究所网站下载的:http://www.flab3d.com/tutorials_05_pv3dloadDAE.php。而且这里绍了怎样导出DAE模型。
      程序由类库的例程改写,减少工作量。我们要做的有以下几步:
      第一步:画一个Marker,制作pat文件
      我们可以用ARToolkit Marker Generator软件制作Marker对应的pat文件,附件里面有这个软件。详细步骤可以看这个网址:http://www.mikkoh.com/blog/?p=182
      第二步:改写flarConfig.xml
      这个文件是记录pat文件路径的。
      由于我用的Marker是例程中\FLARManager_v05\resources\flar\patterns目录下的pattens01.pdf,所以前两步我就不用做了。
      第三步:改写代码
      在我的程序里面主要有两个类,一个是对象类Objects_3D,另一个是FLARManager控制对象显示的类FLARManager_PV3D。
      Objects_3D类的主要工作:初始化PV3D环境、创建对象、定义操作对象的方法
1。初始化PV3D环境
  1. //初始化PV3D
  2. private function initPapervisionEnvironment (cameraParams:FLARParam, mirrorDisplay:Boolean, viewportWidth:Number, viewportHeight:Number) :void {
  3. this.scene3D = new Scene3D();
  4. this.camera3D = new FLARCamera3D(cameraParams);

  5. this.viewport3D = new Viewport3D(viewportWidth, viewportHeight);
  6. if (mirrorDisplay) {
  7. this.viewport3D.x = viewportWidth;
  8. this.viewport3D.scaleX = -1;
  9. }
  10. this.addChild(this.viewport3D);

  11. this.renderEngine = new LazyRenderEngine(this.scene3D, this.camera3D, this.viewport3D);

  12. this.pointLight3D = new PointLight3D();
  13. this.pointLight3D.x = 1000;
  14. this.pointLight3D.y = 1000;
  15. this.pointLight3D.z = -1000;

  16. this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame);
  17. }
复制代码
我们可以根据显示的需要,修改当中的代码。
2。创建对象
  1. private function creatModel():void{
  2. //正方体模型
  3. var materialsList:MaterialsList = new MaterialsList({all: new FlatShadeMaterial(this.pointLight3D, 0x19FFAA, 0x007348)});
  4. cube = new Cube(materialsList, CUBE_SIZE, CUBE_SIZE, CUBE_SIZE);
  5. cube.z = 0.5 * CUBE_SIZE;

  6. //读入汽车模型
  7. car = new DAE(true, "car", true);
  8. car.load("../resources/assets/car.xml");
  9. car.rotationX = 90;
  10. car.rotationZ = 90;
  11. car.scale = 10;
  12. }
复制代码
3。定义操作对象的方法
  1. public function addMarker (marker:FLARMarker) :void {
  2. //存放Marker
  3. var markerList:Vector.<FLARMarker> = this.markersByPatternId[marker.patternId];
  4. markerList.push(marker);

  5. //创建一个3D模型的容器
  6. var containerisplayObject3D = new DisplayObject3D();

  7. //根据不同的Marker显示不同的对象
  8. //我打印出来的纸上面有12个Marker,3*4排列,patternId为4和7的就是中间那两个
  9. if(marker.patternId==4)
  10. container.addChild(car);
  11. else if(marker.patternId==7)
  12. container.addChild(cube);
  13. this.scene3D.addChild(container);

  14. this.containersByMarker[marker] = container;
  15. }

  16. public function removeMarker (marker:FLARMarker) :void {
  17. var markerList:Vector.<FLARMarker> = this.markersByPatternId[marker.patternId];
  18. var markerIndex:uint = markerList.indexOf(marker);
  19. if (markerIndex != -1) {
  20. markerList.splice(markerIndex, 1);
  21. }

  22. var containerisplayObject3D = this.containersByMarker[marker];
  23. if (container) {
  24. this.scene3D.removeChild(container);
  25. }
  26. delete this.containersByMarker[marker]
  27. }

  28. private function onEnterFrame (evt:Event) :void {
  29. this.updateObjects();
  30. this.renderEngine.render();
  31. }

  32. private function updateObjects () :void {
  33. var i:int = this.markersByPatternId.length;
  34. var markerList:Vector.<FLARMarker>;
  35. var marker:FLARMarker;
  36. var containerisplayObject3D;
  37. var j:int;
  38. while (i--) {
  39. markerList = this.markersByPatternId;
  40. j = markerList.length;
  41. while (j--) {
  42. marker = markerList[j];
  43. container = this.containersByMarker[marker];
  44. container.transform = FLARPVGeomUtils.convertFLARMatrixToPVMatrix(marker.transformMatrix);
  45. }
  46. }
  47. }
复制代码
FLARManager_PV3D类的主要工作:初始化FLARManager、处理Marker事件
      这个类的代码基本上不需要作什么改动。写代码的时候复制过去就可以了。
1。初始化FLARManager
  1. private function init () :void {
  2. this.flarManager = new FLARManager("../resources/flar/flarConfig.xml");

  3. this.flarManager.addEventListener(ErrorEvent.ERROR, this.onFlarManagerError);

  4. this.addChild(Sprite(this.flarManager.flarSource));

  5. this.flarManager.addEventListener(FLARMarkerEvent.MARKER_ADDED, this.onMarkerAdded);
  6. this.flarManager.addEventListener(FLARMarkerEvent.MARKER_UPDATED, this.onMarkerUpdated);
  7. this.flarManager.addEventListener(FLARMarkerEvent.MARKER_REMOVED, this.onMarkerRemoved);

  8. var framerateDisplay:FramerateDisplay = new FramerateDisplay();
  9. this.addChild(framerateDisplay);

  10. this.flarManager.addEventListener(Event.INIT, this.onFlarManagerInited);
  11. }

  12. private function onFlarManagerError (evt:ErrorEvent) :void {
  13. this.flarManager.removeEventListener(ErrorEvent.ERROR, this.onFlarManagerError);
  14. this.flarManager.removeEventListener(Event.INIT, this.onFlarManagerInited);

  15. trace(evt.text);
  16. }

  17. private function onFlarManagerInited (evt:Event) :void {
  18. this.flarManager.removeEventListener(ErrorEvent.ERROR, this.onFlarManagerError);
  19. this.flarManager.removeEventListener(Event.INIT, this.onFlarManagerInited);
  20. this.myObjects = new Objects_3D(this.flarManager.numLoadedPatterns, this.flarManager.cameraParams,
  21. this.flarManager.mirrorDisplay, this.stage.stageWidth, this.stage.stageHeight);
  22. this.addChild(this.myObjects);

  23. this.myObjects.mouseChildren = false;
  24. }
复制代码
2。处理Marker事件
  1. //监听事件,然后作出相应处理
  2. private function onMarkerAdded (evt:FLARMarkerEvent) :void {
  3. this.myObjects.addMarker(evt.marker);
  4. }

  5. private function onMarkerUpdated (evt:FLARMarkerEvent) :void {
  6. }

  7. private function onMarkerRemoved (evt:FLARMarkerEvent) :void {
  8. this.myObjects.removeMarker(evt.marker);
  9. }
复制代码
(完)

附件:

本帖隐藏的内容需要回复才可以浏览
附件: 您所在的用户组无法下载或查看附件
1

评分次数

  • reflux

不是我想插楼 只是因为回复后才能下载组件
xiexie  xiexie   xiexie
我要下载看看
啥东西啊,回复之
孤猪一志,志在必得!
看一下,现在正在研究这个,收下了,呵呵
sfsfsfsdfsdf
回复后才能下载组件
谢谢!!!!!!!
哈哈,才开始学这个,楼主的帖很是即时,谢谢!
好好学习一下
下来看看吧 学习下
哈哈,才开始学这个,楼主的帖很是即时,谢谢
kankan hen bucuo de dongxi
楼主是大牛,膜拜之情溢于言表~~~
返回列表