开发基于FLARToolKit的增强现实（AR）基础教程（六）

回复

下面的这几步会更快一些，你做得非常好，所以坚持下去因为这是我们最后的障碍。让我们向我们的渲染循环中添加标记检测逻辑。改变renderViewport方法：

public function renderViewport(event:Event = null):void
{
cardEmulator.render();
updateCaptureBitmap();
try
{
if (arDetector.detectMarker()) {
arDetector.calculateTransformMatrix(resultMat);
baseNode.setTransformMatrix(resultMat);
active();
}
else
{
inactive();
}
}
catch(errObject:Error) {
trace(errObject.message);
}
renderer.renderScene(scene, camera, viewport);
}
/**
* Displays the base node when a marker has been found.
*/
protected function active():void
{
if(!isActive)
{
isActive = true;
baseNode.visible = true;
}
}
/**
* Hides the base node when a marker can't be found.
*/
protected function inactive():void
{
if(isActive)
{
baseNode.visible = false;
isActive = false;
}
}

复制代码

声明的变量和导入的类包：

protected var resultMat:FLARTransMatResult = new FLARTransMatResult();
protected var isActive:Boolean = false;
protected var baseNode:FLARBaseNode;
import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
import org.libspark.flartoolkit.pv3d.FLARBaseNode;

复制代码

所以让我们来看一下发生了什么事情。每次我们调用renderViewport的时候我们会测试ARDetector是否检测到了标记，如果检测到了，那么我们要求ARDetector更新将要适用于baseNode的矩阵。baseNode将会显示主要的对象，并添加所有的papervision3d对象。下一步我们更新baseNode的图形信息（orientation）来匹配检测到的标记的图形信息。这些都是我们在使用FLARToolKit时该注意到的。如果这个标记仍然被探测到我们会调用active方法。Active简单地显示了baseNode。如果没有标记我们通过调用inactive来隐藏baseNode。

让我们通过改变setupPapervision方法来构建baseNode。

public function setupPapervision():void
{
scene = new Scene3D();
camera = new FLARCamera3D(arDetector.flarParam);
// Create the Viewport
viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true);
addChild(viewport);
// The base node is where all PV3D object should be attached to.
baseNode = new FLARBaseNode();
scene.addChild(baseNode);
create3dObjects();
renderer = new BasicRenderEngine();

复制代码

这里我们创建了baseNode并把它添加到了scene中，同时，我们将摄像头改变成了FLARCamera3D，它需要一个flarParam属性来自于我们的ARDetector并将其放到正确的位置。

导入的类包：

import org.libspark.flartoolkit.pv3d.FLARCamera3D;

复制代码

FlarParam是一个匹配检测到的标记的图形信息的矩阵，FLARCamera3d是由FLARToolKit继承下来的一个自定义类，它会用来更容易地通过flarParam的阈值来调整摄像头。

下一步我们需要更新我们的默认的Plane，让他附加到baseNode上，调整它的rotation以使他以正确的角度面对摄像头。改变create3dObjects方法：

protected function create3dObjects():void
{
var plane:Plane = new Plane( new WireframeMaterial(0xff0000), 80, 80 );
plane.rotationX = 180;
baseNode.addChild(plane);
}

复制代码

我们做出来了！我们的ARDetector现在从CardEmulator正确地看到了我们的标记。你可以通过移动鼠标来体验！

注意到plane有时会消失么？这个是检测器失去标记然后使得baseNode不可见。为了便于举例我们如何将这个3d对象映射到仿真器的显示列表中，我们使captureSrc匹配了viewPort的大小。

protected function configureStage():void
{
stage.quality = StageQuality.HIGH;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, onStageResize);
}
protected function onStageResize(event:Event = null):void
{
if(capturedSrc)
resize(capturedSrc, stage.stageWidth, stage.stageHeight);
if(viewport)
resize(viewport, stage.stageWidth, stage.stageHeight);
}
/**
* A function to resize any DisplayObject.
*
* @param target
* @param areaWidth
* @param areaHeight
* @param aspectRatio
*
*/
public function resize(target : DisplayObject, areaWidth : Number, areaHeight : Number, aspectRatio : Boolean = true, autoCenter:Boolean = true) : void {
if(aspectRatio) {
var sw : Number = areaWidth;
var sh : Number = areaHeight;
var tw : Number = target.width;
var th : Number = target.height;
var si : Number;
//
if(sw > sh) {
si = sw / tw;
if(th * si > sh)
si = sh / th;
}else {
si = sh / th;
if(tw * si > sw )
si = sw / tw;
}
var wn : Number = tw * si;
var hn : Number = th * si;
target.width = wn;
target.height = hn;
}else {
target.width = areaWidth;
target.height = areaHeight;
}
if(autoCenter)
{
target.x = ((areaWidth * .5) - (target.width * .5));
target.y = ((areaHeight * .5) - (target.height * .5));
}
}

复制代码

导入的类包：

import flash.display.DisplayObject;

将下面的这条语句添加到createCaptureSource方法的最下方：

onStageResize();

下一步我们会用来自摄像头的video替换captureSrc，我们要做的一件事便是偏移viewport使得pv3d对象正确地布局在标记上。