思享工具箱

Away3D基础之摄像机

摘要：
在本教程中，您将在away3d中学习三种类型的“相机”。无论您想在Away 3D中做什么，都有几个“对象”是必不可少的。在本基本指南中，我们将解释场景、视口视图、相机、基本体、纹理和其他将使用的概念的基本3D元素。本指南中的每个示例都基于as3脚本，因此可以在flash和flex中运行。如果您是3D新手，您可能希望看到我们对3D核心概念的介绍。本教程还包含6个Away3D项目示例。在运行实例文件之前，需要在计算机上设置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（机位）的设置。三类相机都可以直接在构造函数里对这些特性进行设置,就象这样:

  1. varcam:Camera3D=newCamera3D({zoom:5,focus:200});

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

  1. varcam:Camera3D=newCamera3D({zoom:5,focus:200});
  2. cam.zoom=5;
  3. cam.focus=200;

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

movie:点此观看as:Camera.as

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

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

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

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

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

Camera3D（自由相机）

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

movie:点此观看as:Basic04Camera3D.as

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

  1. camera.moveUp(10);//向上移动
  2. camera.moveDown(10);//向下移动
  3. camera.moveLeft(10);//向左移动
  4. camera.moveRight(10);//向右移动
  6. camera.moveForward(10);//向前移动
  7. camera.moveBackward(10);//向后移动

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

  1. camera.z=-1000;

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

  1. camera.lookAt(newNumber3D(x,y,z));

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

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

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

TargetCamera3D（目标相机）

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

movie:点此观看as:Basic05TargetCamera3D.as

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

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

  1. camera.target=sphere;

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

HoverCamera3D(旋转相机)

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

movie:点此观看as:Basic06HoverCamera3D.as

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

  1. camera.targetpanangle=0;
  2. camera.targettiltangle=0;

这些用于pan和tilt的角范围在0~360之间，这些什大小是相对于当前值而言的。
  1. camera.panangle=0;
  2. camera.tiltangle=0;
上面设置的是旋转的初始位置，当我们创建新相机时也要将这些值重新置0。旋转过程快慢还要由事先定好的"stepS"来确定 。
  1. camera.steps=16;
将"steps(步数)"由默认的8变为16，转动会更为缓慢与平滑。你也可以减小这个值至到0。这样会瞬间转到新

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

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

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

实例：用鼠标转动场景

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

movie:点此观看as:Triaxe2.as

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

  1. privatevarView:View3D;
  2. privatevarswfStage:Stage;
  3. privatevarcover:Cover;
  4. privatevarcamera:HoverCamera3D;
  5. privatevarlastMouseX:Number;
  6. privatevarlastMouseY:Number;
  7. privatevarlastPanAngle:Number;
  8. privatevarlastTiltAngle:Number;
  9. privatevarmove:Boolean=false;
我们增加一个旋转相机并且将它交付与视口使用，这比使用视口的默认相机根子的多。
  1. camera=newHoverCamera3D({zoom:2,focus:100,distance:250});
  2. View=newView3D({camera:camera,x:250,y:200});
然后设置下pan与tilt的值让它们初始值与默认的不一样，这样可以让相机初始时就有一个角度。
  1. camera.targetpanangle=camera.panangle=45;
  2. camera.targettiltangle=camera.tiltangle=20;
  3. camera.mintiltangle=-90;
注意我们要同进设置初始角与未角，否则相机一开始就会转到未角位置。同时还要注意我们将 'mintiltangle' 设为-90。这让我们可旋转至场景下方，默认情况是不允许的。接下来，我们在场景中加些3D物体并让场景逐帧渲染。
  1. addEventListener(Event.ENTER_FRAME,onEnterFrame);
下面加二个侦听器，侦听mouse达到交互目的。
  1. this.stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDown);
  2. this.stage.addEventListener(MouseEvent.MOUSE_UP,MouseUp);
当按下mouse，我们将当前pan与tilt的值设为mouse位置。我们用它来计算相机移动速度。
  1. privatefunctionMouseDown(event:MouseEvent):void{
  2. lastPanAngle=camera.targetpanangle;
  3. lastTiltAngle=camera.targettiltangle;
  4. lastMouseX=stage.mouseX;
  5. lastMouseY=stage.mouseY;
  6. move=true;
  7. }
注意这里我没还同时设置了move值（布尔值），这个参数指示mouse按下与弹起状态。弹起后我们要对它重新设置.
  1. privatefunctionMouseUp(event:MouseEvent):void{
  2. move=false;
  3. }
最近我们还要一把"魔法钥匙"--逐帧处理函数：
  1. privatefunctiononEnterFrame(e:Event):void{//渲染视口
  2. varcameraSpeed:Number=0.3;//与mouse速度大约一致.
  3. if(move){
  4. camera.targetpanangle=cameraSpeed*(stage.mouseX-lastMouseX)+lastPanAngle;
  5. camera.targettiltangle=cameraSpeed*(stage.mouseY-lastMouseY)+lastTiltAngle;
  6. }
  7. camera.hover();
  8. View.render();
  9. }
这个函数计算出一个pan与tilt的目标值。在MouseDown处理函数里我们将mouse先前位置存在lastMouseX/lastMouseY。减去现在mouse位置值就得到mouse的移动量，乘以一个速度常量（cameraSpeed）后再加上当前pan/tilt值(lastPanAngle/lastTiltAngle). 最后调用hover()与render()更新视口。如果你想反转

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

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

标签：#相机#zoom | 浏览：133 | 发布日期：

免责声明：文章转载自《Away3D基础之摄像机》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇选择下拉列表，出现不同数据，并计算［原创］阿里云RocketMQ踩过的哪些坑下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

线阵相机的线扫描速率的计算方法

要保证采集到的图像不被拉伸或者压缩，必须遵从一点，即“横向和纵向的分辨率相等”。 首先设定以下变量： 1）线阵相机的每线像素数（单位：pixel）：Hc 2）目标物的宽幅（单位：m）：Lo 3）目标物运行速率（单位：m/s）：Vo 4）线阵相机线扫描速率（单位：Hz，即 线/s）：Vc 5）扫描一帧图像目标物运行的时间（单位：s）：To 6）扫描一帧图像线...

基于OpenCV进行图像拼接原理解析和编码实现(提纲 代码和具体内容在课件中）

一、背景 1.1概念定义 我们这里想要实现的图像拼接，既不是如题图1和2这样的“图片艺术拼接”，也不是如图3这样的“显示拼接”，而是实现类似“BaiDU全景”这样的全部的或者部分的实际场景的重新回放。 对于图像拼接的流程有很多定义方式，本教程中主要介绍实现主流方法，总结梳理如下： 图像采集->投影变换->特征点匹配...

Unity在UI界面上显示3D模型/物体，控制模型旋转

Unity3D物体在UI界面的显示 本文提供全流程，中文翻译。 Chinar 坚持将简单的生活方式，带给世人！（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例） Chinar —— 心分享、心创新！助力快速利用 UGUI 完成 3D 物体在 UI 界面的显示为新手节省宝贵的时间，避免采坑！ Chinar 教程效果：...

Silverlight学习之——Deep Zoom文件格式概述

Deep Zoom是一种很炫的效果，其源文件所使用的文件格式是基于XML的。在源文件中，我们可以为单个大图像指定格式，也可以为图像集合指定格式。     在这里再说明一下：Deep Zoom 图像棱锥图仅支持 BitmapImage 类所支持的图像文件。 l 单个图像：     Deep Zoom 中的单个大图像是由平铺图像棱锥图表示的。这允许 Deep...

ORB-SLAM3 细读单目初始化过程(上)

作者：乔不思 来源：微信公众号|3D视觉工坊（系投稿） 3D视觉精品文章汇总：https://github.com/qxiaofan/awesome-3D-Vision-Papers/ 学习ORB-SLAM3单目视觉SLAM中，发现有很多知识点需要展开和深入，同时又需要对系统有整体的认知，为了强化记忆，记录该系列笔记，为自己图方便，也希望对大家有所启发。...

Threejs 开发3D地图实践总结

　　前段时间连续上了一个月班，加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中，坑不少，做了一下总结分享。 1、法向量问题 　　法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。每一个顶点都有一个关联的法向量。 　　如果一个顶点被多个三角形共享，共享顶点的法向量等于...

最新文章

随机推荐

思享工具箱导航