Away3D基础之摄像机

转自：http://blog.csdn.net/cceevv/article/details/8571860

原英文地址：http://www.flashmagazine.com/Tutorials/detail/away3d_basics_the_cameras/

翻译原文地址：http://blog.csdn.net/liminxin272/article/details/6893036

 

相机camera类是观察3D世界必须借助的工具.其作用与现实世界里的相机一样,3D世界里的照相机应用通视原理将3D物进行缩放、聚焦、定位等。在本教程中你将会学到away3d里的三种类型的"相机"。

无论你想在Away3D里做什么，有几个"物件"是不可或缺的.在本基础指南里会解释场景Scene, 视口View, Camera照相机, Primitives基本3D元素, Textures纹理和其它一些会用到的概念.指南里的每个例子都是基于as3脚本的.所以都可以在flash与flex运行.

如果你是3D菜鸟,你可能想要看我们关于三维核心概念的介绍。这篇教程中也含有其中6 个Away3D项目实例。运行实例文件前,你首先需要在您的计算机上设置Away3D开发环境。当设置好Away3D开发环境后,你只要把这些实例下载到你的项目文件夹上就可以打开、探索和调试这些实例。但由于采用高集成代码，这些例子都要用一个文件Cover.as。请先下载该文件到您的项目目录保证所有能够运行实例。 

 

Away3D 里的相机

 

Away3D提供了三种类型的相机:Camera3D, TargetCamera3D 和HoverCamera3D.每种照相机都可以进行zoom(缩放)focus(焦距)、depth of field(景深)、pan（y轴旋转）、tilt（x轴旋转）、position（机位）的设置。三类相机都可以直接在构造函数里对这些特性进行设置,就象这样:

 

var cam:Camera3D = new Camera3D({zoom:5,focus:200});

当然也可以这样设置属性:

 

 

var cam:Camera3D = new Camera3D({zoom:5,focus:200});
cam.zoom = 5;
cam.focus = 200;

看下面这个简单的照相机例子,你就可以大致上理解照相机的zoom机理.focus属性决定着照相机的视角广度.测试下面例子:

 

movie: 点此观看as:Camera.as

从这个例子里我们可以体会到focus与zoom的共同作用对所看到的场景的影响.focus属性值越小就相当于把渲染面移近相机.反之移远.tartiflop写了一个非常好的关于zoom与focus设置(papervision)的教程.其原理与away3d里的一样,假如你想对些了解更多请浏览相关文章.

 

cam.pan = 45;cam.tilt = -10;

Pan和Tilt 方法的功能就如同其字面意思一样。它们可以让相机水平与垂直方向旋转。这个属性的值可以正数也可以是负数。前面我们也提及景深这个属性，当与二维sprite混在一块的时候，这个属性可以设置3d物的深度效果，本指南会在后面章节中作进一步的论述。

 

视口渲染时所有这些属性都会被综合考虑，这个统计出所有可见面（译者注:3d物体由多个三角形面组成）的过程我们把它称为"过滤"，这个过程要占用相当cpu,但"过滤"可确保只有那些可见的参于渲染.

三种类型的相机有些不同,下面逐个进行讲解.  

 

 

Camera3D（自由相机）

Camera3D 是最基本的,没有固定形态,你可以自由地移动与定位.

movie: 点此观看as:Basic04Camera3D.as

使用A、D、W、S及上下箭头键操控上例。在这个例子里我们用了一套常规的能让away3d 物运动的方法。

 

camera.moveUp(10); //向上移动
camera.moveDown(10); //向下移动
camera.moveLeft(10); //向左移动
camera.moveRight(10); //向右移动

camera.moveForward(10); //向前移动
camera.moveBackward(10); //向后移动

这些方法名充分说明了其用途。注意相机位置在（0，0，0）这个中央点，如果这时在场景上添加一个Sphere你根本看不到，因为此时camera在sphere里头，而默认情况下只有球体外侧才能看到。为了能看到这个sphere你可以用"sphere.invertFaces()"也可以改变相机的z属性将照相机移出球体，如下所示：

 

 

camera.z = -1000;

这里我们把相机向我们自已移近1000个单位。设置相机的x/y/z属性值会移动相机在三维空间里的位置，但是记住相机必须面向某一位置（三维点）。默认情况下相机面向的点是三维场景坐标的中央，如果要让相机面向其他点我们要用到：

 

 

camera.lookAt( new Number3D(x,y,z) );

这句代码告诉相机面向三维坐标的（x,y,z）点。你也可以使用Pan、Tilt和沿三轴旋转让相机面向指定点。

 

这里要注意，在你让相机面向某点时先要确定要相机位。假如你先指定相机朝向后在更换相机位置，相机朝向仍是

当初的那个方向。为此我们在改变相机朝向之前要指定好相机位或者使用另一类更加容易设定朝向的相机。

 

TargetCamera3D（目标相机）

目标相机拥有所有自由相机的属性，并且它还具有指向其它3D物或三维位置的能力。

movie: 点此观看as:Basic05TargetCamera3D.as

使用导航键（A、D、W、S）操作上面使用目标相机的示例影片，无论相机位置如何改变，相机总是指向同一目标，这样使用camera.moveLeft让相机向左移实质却是相机绕着目标旋转。

这类相机默认朝向坐标中心，但我们可以通过改变相机目标改变其朝向：

 

camera.target = sphere;

点击例子里的任何一个三维物，感受它的工作机理。

 

 

 

HoverCamera3D(旋转相机)

旋转相机拥有目标相机的所用功能，另外它还增加了一个功能，这个功能在我们通过设置pan与tilt属性让相机绕3D物转动时会非常有用。同样会转动相机，因此用它会转动的更为平滑。它任由你想象的那样自由旋转相机，它是所摄像机里最能干的一个。

movie: 点此观看as:Basic06HoverCamera3D.as

这里我们使用旋转相机的二个属性：

 

camera.targetpanangle = 0;
camera.targettiltangle = 0;

这些用于pan和tilt的角范围在0~360之间，这些什大小是相对于当前值而言的。

 

 

camera.panangle = 0;
camera.tiltangle = 0;

上面设置的是旋转的初始位置，当我们创建新相机时也要将这些值重新置0。旋转过程快慢还要由事先定好的 "stepS"来确定 。

 

camera.steps = 16;

将"steps(步数)"由默认的8变为16，转动会更为缓慢与平滑。你也可以减小这个值至到0。这样会瞬间转到新

 

的位置。为了让旋转相机真的转动起来还得来个逐帧执行下边方法：

 

camera.hover();
view.render();

只有调用camera.hover() 相机才能转动。女士们先生们，准备好了吗？现在我们把上面所学的东东都亮出来，看看

 

这些属性、方法是如何工作的。

 

实例：用鼠标转动场景

展示3D场景最为经典的办法莫过于让用户使用鼠标来控制场景，就象下面例子那样：

movie: 点此观看as:Triaxe2.as

这里我解释本例代码。我们先定义一些后边会用到的参数。

 

private var View:View3D;
private var swfStage:Stage;
private var cover:Cover;
private  var camera:HoverCamera3D;
private var lastMouseX:Number;
private var lastMouseY:Number;
private var lastPanAngle:Number;
private var lastTiltAngle:Number;
private var move:Boolean = false;

我们增加一个旋转相机并且将它交付与视口使用，这比使用视口的默认相机根子的多。

 

 

camera = new HoverCamera3D({zoom:2, focus:100, distance:250});
View = new View3D({camera:camera,x:250, y:200});

然后设置下pan与tilt的值让它们初始值与默认的不一样，这样可以让相机初始时就有一个角度。

 

 

camera.targetpanangle = camera.panangle = 45;
camera.targettiltangle = camera.tiltangle = 20;
camera.mintiltangle = -90;

注意我们要同进设置初始角与未角，否则相机一开始就会转到未角位置。同时还要注意我们将 'mintiltangle' 设为 -90。这让我们可旋转至场景下方，默认情况是不允许的。接下来，我们在场景中加些3D物体并让场景逐帧渲染。

 

addEventListener(Event.ENTER_FRAME, onEnterFrame);

下面加二个侦听器，侦听mouse达到交互目的。

 

 

this.stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
this.stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

当按下mouse，我们将当前pan与tilt的值设为mouse位置。我们用它来计算相机移动速度。

 

 

private function MouseDown(event:MouseEvent):void{
    lastPanAngle = camera.targetpanangle;
    lastTiltAngle = camera.targettiltangle;
    lastMouseX = stage.mouseX;
    lastMouseY = stage.mouseY;
    move = true;
}

注意这里我没还同时设置了move值（布尔值），这个参数指示mouse按下与弹起状态。弹起后我们要对它重新设置.

 

 

private function MouseUp(event:MouseEvent):void{
    move = false;
}

最近我们还要一把"魔法钥匙"--逐帧处理函数：

 

 

private function onEnterFrame(e:Event):void{ // 渲染视口
    var cameraSpeed:Number = 0.3; // 与mouse速度大约一致.
    if (move) {
        camera.targetpanangle = cameraSpeed*(stage.mouseX - lastMouseX) + lastPanAngle;
        camera.targettiltangle = cameraSpeed*(stage.mouseY - lastMouseY) + lastTiltAngle;
    }
    camera.hover();
    View.render();
}

这个函数计算出一个pan与tilt的目标值。在MouseDown处理函数里我们将mouse先前位置存在 lastMouseX/lastMouseY。减去现在mouse位置值就得到mouse的移动量，乘以一个速度常量（cameraSpeed） 后再加上当前pan/tilt值(lastPanAngle/lastTiltAngle). 最后调用hover()与render()更新视口。如果你想反转

这过程你只要把参数倒过来一下：

 

camera.targetpanangle = lastPanAngle - cameraSpeed*(stage.mouseX - lastMouseX);
camera.targettiltangle = lastTiltAngle - cameraSpeed*(stage.mouseY - lastMouseY);

只是相机绕3D物旋转众多方案里的一种，你可以作一个改进。增加一个滑动条来控制缩放（camera.zoom）如何？在本指南的后边还会回过头来探讨相机旋转问题，因此继续阅读让自已掌握的更多.