Board logo

标题: [教程] FLARTookit入门详解 [打印本页]
作者: cankeyyin    时间: 2009-8-1 10:29     标题: 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);

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

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

  15. this.pointLight3D = new PointLight3D();
  16. this.pointLight3D.x = 1000;
  17. this.pointLight3D.y = 1000;
  18. this.pointLight3D.z = -1000;

  20. this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame);
  21. }
复制代码
我们可以根据显示的需要，修改当中的代码。
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;

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

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

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

  17. this.containersByMarker[marker] = container;
  18. }

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

  27. var containerisplayObject3D = this.containersByMarker[marker];
  28. if (container) {
  29. this.scene3D.removeChild(container);
  30. }
  31. delete this.containersByMarker[marker]
  32. }

  34. private function onEnterFrame (evt:Event) :void {
  35. this.updateObjects();
  36. this.renderEngine.render();
  37. }

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

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

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

  8. this.flarManager.addEventListener(FLARMarkerEvent.MARKER_ADDED, this.onMarkerAdded);
  9. this.flarManager.addEventListener(FLARMarkerEvent.MARKER_UPDATED, this.onMarkerUpdated);
  10. this.flarManager.addEventListener(FLARMarkerEvent.MARKER_REMOVED, this.onMarkerRemoved);

  12. var framerateDisplay:FramerateDisplay = new FramerateDisplay();
  13. this.addChild(framerateDisplay);

  15. this.flarManager.addEventListener(Event.INIT, this.onFlarManagerInited);
  16. }

  18. private function onFlarManagerError (evt:ErrorEvent) :void {
  19. this.flarManager.removeEventListener(ErrorEvent.ERROR, this.onFlarManagerError);
  20. this.flarManager.removeEventListener(Event.INIT, this.onFlarManagerInited);

  22. trace(evt.text);
  23. }

  25. private function onFlarManagerInited (evt:Event) :void {
  26. this.flarManager.removeEventListener(ErrorEvent.ERROR, this.onFlarManagerError);
  27. this.flarManager.removeEventListener(Event.INIT, this.onFlarManagerInited);
  28. this.myObjects = new Objects_3D(this.flarManager.numLoadedPatterns, this.flarManager.cameraParams,
  29. this.flarManager.mirrorDisplay, this.stage.stageWidth, this.stage.stageHeight);
  30. this.addChild(this.myObjects);

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

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

  9. private function onMarkerRemoved (evt:FLARMarkerEvent) :void {
  10. this.myObjects.removeMarker(evt.marker);
  11. }
复制代码
（完）

附件:

本帖隐藏的内容需要回复才可以浏览
作者: tanganyang    时间: 2009-8-2 19:23

不是我想插楼 只是因为回复后才能下载组件
作者: lutianshi    时间: 2009-8-6 07:50

xiexie  xiexie   xiexie
作者: stan    时间: 2009-8-6 09:39

我要下载看看
作者: hopezkc    时间: 2009-8-6 10:35

啥东西啊，回复之
作者: zq3200    时间: 2009-8-7 16:39

看一下，现在正在研究这个，收下了，呵呵
作者: flybird    时间: 2009-8-8 10:35

sfsfsfsdfsdf
作者: tempamp111    时间: 2009-8-11 19:08

回复后才能下载组件
作者: luotao21    时间: 2009-8-12 11:26

谢谢！！！！！！！
作者: seraph_zh    时间: 2009-8-12 15:24

哈哈，才开始学这个，楼主的帖很是即时，谢谢！
作者: laoyao    时间: 2009-8-15 13:34

好好学习一下
作者: dptdpt555    时间: 2009-8-21 10:51

下来看看吧 学习下
作者: dptdpt555    时间: 2009-8-21 10:52

哈哈，才开始学这个，楼主的帖很是即时，谢谢
作者: michaelzzm    时间: 2009-8-22 23:51

kankan hen bucuo de dongxi
作者: rayz    时间: 2009-8-23 14:31

楼主是大牛，膜拜之情溢于言表~~~
作者: newync0203    时间: 2009-8-24 16:00

顶好再看看
作者: psychedelico    时间: 2009-8-25 00:09

{:3_53:}{:3_51:}
作者: smilemoe1889    时间: 2009-8-25 10:51

这个 貌似很有意思 看看先
作者: fannie    时间: 2009-8-26 15:34

呵呵，先下载下来研究研究，貌似不错的
作者: bigdesign    时间: 2009-8-26 20:56

嘿嘿~好帖~学习学习~！
作者: Thons    时间: 2009-8-27 11:41

蛮详细的，谢
作者: nednn    时间: 2009-8-28 12:36

謝謝分享
我要下載~感恩
作者: 猪头仔    时间: 2009-8-29 13:13

LZ我爱死你了
作者: cgfrnzzy    时间: 2009-9-2 09:06

呵呵新人还没有概念，看下具体是什么样子的
作者: orus    时间: 2009-9-2 16:53

看看 希望有用
作者: xiazhihui321    时间: 2009-9-3 11:00

我也来下载看看
作者: fate_alicia    时间: 2009-9-9 22:07

膜拜大神，，新人泪流满面
作者: slene    时间: 2009-9-10 17:30

看一下吧 谢谢啦 嘿嘿
作者: zhangli    时间: 2009-9-14 15:48

需要回复才能下载，
于是我注册了

结果还要等5小时才能发帖。晕
作者: achillies87    时间: 2009-9-15 23:17

学习一下，真的是好东西
作者: muzaoniao    时间: 2009-9-19 17:03

看一下，现在正在研究这个，收下了，呵呵
作者: bycang    时间: 2009-9-20 20:01

看一看再说
作者: dgjoin    时间: 2009-9-20 22:43

太高兴了，我等设个网站等了很久了
作者: dgjoin    时间: 2009-9-20 23:12

为什么我的FlexBuilder3会报以下语句的错
private var _activeMarkers:Vector.<FLARMarker>;

还有，import __AS3__.vec.Vector;里面的__AS3__是什么来的
作者: apex119    时间: 2009-9-21 10:44

想拜读一下
作者: Memo    时间: 2009-9-21 16:17

感谢楼主的讲解，学习一下。
作者: zsyuan332    时间: 2009-9-21 19:15

我也想学习一下，谢谢楼主
作者: herro0    时间: 2009-9-23 12:13

1# cankeyyin


谢谢
作者: fear12    时间: 2009-9-23 15:24

学习一下~~
作者: fashioncat    时间: 2009-9-24 16:55

回复后才能下载组件
作者: gnmdd    时间: 2009-9-26 12:03

下载一个看看
作者: xuesheng777    时间: 2009-9-26 23:57

入门开始了
作者: moonrts    时间: 2009-9-27 00:46

感謝..............
作者: herro0    时间: 2009-9-27 12:47

我爱你，楼主
作者: pn123456    时间: 2009-9-27 18:21

太好了,谢谢楼主
作者: haleypn    时间: 2009-9-29 09:14

最近正在研究这个，看看附件是什么
作者: 拾荒京城    时间: 2009-9-29 10:25

学习中......
作者: kawoukaka    时间: 2009-9-29 16:46

想看看到底是什么东西
作者: fine    时间: 2009-9-30 09:07

谢谢 看看先 ~
作者: angra    时间: 2009-9-30 21:06

下来看看..顶起
作者: bigtaffy    时间: 2009-10-8 10:05

wow 看起來很有意思　先下載下來
thank you!
作者: pizzaman    时间: 2009-10-9 13:54

呵呵持续关注中！
作者: jayen    时间: 2009-10-9 21:53

能用其他的程式语言编写吗？
比如JAYA一类
作者: poilk    时间: 2009-10-10 16:14

kankankankankankankankan
作者: uocuoc    时间: 2009-10-13 17:20

感謝分享~~目前正在入門
作者: kstg4672744    时间: 2009-10-15 20:14

22222222222222222222222222
作者: kan0207    时间: 2009-10-20 02:17

thx 4 sharing~
作者: ivanox    时间: 2009-10-22 20:24

楼主是大牛，膜拜之情溢于言表~~~
作者: pander    时间: 2009-10-24 10:09

楼主是大牛，楼主的帖很是即时，谢谢
作者: sj1233    时间: 2009-10-25 22:10

不错啊，的确很有奉献精神
作者: huhailang    时间: 2009-10-26 19:42

初学者之初探
作者: cpo320    时间: 2009-10-28 17:42

ddddddddddddddddddddd
作者: brnta_0054    时间: 2009-10-31 16:05

学习中我们宅起来，宅中我们学习起来...思维紊乱..
作者: yessw12345    时间: 2009-11-1 20:34

回复，学习一下
作者: gtyuan    时间: 2009-11-2 17:05

非常感谢提供珍贵资料
作者: sunnymai    时间: 2009-11-2 17:44

谢谢你！太好了！
作者: fantasynoisy    时间: 2009-11-4 12:24

谢谢啦。这个蛮不错的。
作者: cankeyyin    时间: 2009-11-4 19:52

53# jayen

可以啊
作者: ldqdotcom    时间: 2009-11-5 21:46

下载看看,下载看看
作者: zhangqinghu    时间: 2009-11-8 00:17

感谢楼主啊，我要下载来 看看
作者: gn02254995    时间: 2009-11-9 09:05

NyARToolKit 之前有試過
可是不知道載到的版本有問題還是沒設定好
希望這個可以用
作者: youmikoko    时间: 2009-11-11 09:57

^.^ woyaodaima
作者: ambertear    时间: 2009-11-11 22:34

ddddddddddddd
作者: whiteast    时间: 2009-11-12 16:51

不错，试试看
作者: bruno    时间: 2009-11-12 17:19

好东西，回复了才能下载呢
作者: gino    时间: 2009-11-15 00:20

我也想誠心學習~~謝謝~~
作者: 一帧    时间: 2009-11-16 13:32

下载一下 学习学习
作者: manshi0012    时间: 2009-11-16 22:12

初识这个  用心看看
作者: lenny5201314    时间: 2009-11-19 18:08

不是我想插楼 回复后才能下载 就回吧!!
作者: cpo320    时间: 2009-11-25 17:57

dddddddddddddddddd
作者: kelvin    时间: 2009-11-26 00:48

thanks!!!!
作者: seeker    时间: 2009-11-27 15:08

谢谢分享 学习学习
作者: 光光当    时间: 2009-11-27 23:35

新手学习第一步！！！
作者: johnsonsu    时间: 2009-12-1 08:37

我要學這個!!!
作者: goopy    时间: 2009-12-1 17:45

很好的教程，非常感谢。
作者: 神奇的空格键    时间: 2009-12-3 15:27

万万分的感谢这么及时的资料!!!!!
作者: sxnbox    时间: 2009-12-4 16:01

这个有附件吗
作者: calf    时间: 2009-12-9 23:16

见识一下！
作者: smartdj    时间: 2009-12-10 09:14

1# cankeyyin
作者: czhmarco    时间: 2009-12-10 14:43

小弟也来顶顶～～～
作者: proverb    时间: 2009-12-11 12:56

henhao

henhao

henhao

henhao

henhao
作者: anhuijiuhuashan    时间: 2009-12-12 11:33

楼主 辛苦了
作者: loadstar    时间: 2009-12-17 22:15

很不错啊！
作者: summy110    时间: 2009-12-17 22:59

大牛，我要跟随一个大牛的足迹
作者: hk2722    时间: 2009-12-18 08:30

谢谢~~因为回复后才能下载
作者: king    时间: 2009-12-18 14:44

哈哈，才开始学这个，楼主的帖很是即时，谢谢！
作者: jhwaa    时间: 2009-12-19 08:04

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
作者: dotx    时间: 2009-12-19 15:52

学习一下，回复后才能下载组件
作者: s301123    时间: 2009-12-23 11:04

谢谢~~~~~~~~~！
作者: CRI    时间: 2009-12-23 11:57     标题: RE: FLARTookit入门详解

我要試試看
謝謝分享^^~



欢迎光临 ARToolKit中文论坛 (http://www.artoolkit.net/) Powered by Discuz! 7.0.0