转自: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. var cam:Camera3D = new Camera3D({zoom:5,focus:200});

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

  1. var cam:Camera3D = new Camera3D({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); //向右移动
  5. camera.moveForward(10); //向前移动
  6. camera.moveBackward(10); //向后移动

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

  1. camera.z = -1000;

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

  1. camera.lookAt( new Number3D(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. private var View:View3D;
  2. private var swfStage:Stage;
  3. private var cover:Cover;
  4. private  var camera:HoverCamera3D;
  5. private var lastMouseX:Number;
  6. private var lastMouseY:Number;
  7. private var lastPanAngle:Number;
  8. private var lastTiltAngle:Number;
  9. private var move:Boolean = false;

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

  1. camera = new HoverCamera3D({zoom:2, focus:100, distance:250});
  2. View = new View3D({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. private function MouseDown(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. private function MouseUp(event:MouseEvent):void{
  2. move = false;
  3. }

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

  1. private function onEnterFrame(e:Event):void{ // 渲染视口
  2. var cameraSpeed: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)如何?在本指南的后边还会回过头来探讨相机旋转问题,因此继续阅读让自已掌握的更多.

Away3D基础之摄像机的更多相关文章

  1. Away3d 基础 1 ---对一个简单类的解释

    转自:http://www.cnblogs.com/nooon/archive/2009/05/16/1458334.html 原英文地址: http://www.flashmagazine.com/ ...

  2. three.js引擎基础知识—摄像机、场景及渲染器

    一.three.js采用右手坐标系: x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外,如下图右: 二.3D编程三要素:场景.渲染器.摄像机 1.场景:创建的物品和模型都需放入场景中 threejs ...

  3. 太阳系Demo(openGL)

    这个是8年前写的demo,提交的一份作业,按照提出的需求点,以最快和最简单的方式完成功能,因此代码比较简单. 1)截图 2) 功能点描述: 1.公转,自传 2.基础的摄像机运动 3.正视和顶视 4.天 ...

  4. wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)

    原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依 ...

  5. 游戏编程算法与技巧 Game Programming Algorithms and Techniques (Sanjay Madhav 著)

    http://gamealgorithms.net 第1章 游戏编程概述 (已看) 第2章 2D图形 (已看) 第3章 游戏中的线性代数 (已看) 第4章 3D图形 (已看) 第5章 游戏输入 (已看 ...

  6. EasyNVR智能云终端硬件盒子x86版自我维护之摄像机网页直播系统基础运维

    背景分析 随着EasyNVR软件为越来越多的用户接受和使用,我们也致力于用户的需求收集和需求的调研,发现一部分用户有关于硬件设备的需求,加之我们推出的免费产品EasyNVS云管理平台,可以说用户自己搭 ...

  7. iTween基础之CameraFade(摄像机淡入淡出)

    一.基础介绍:二.基础属性 原文地址: http://blog.csdn.net/dingkun520wy/article/details/50896420 一.基础介绍 CameraTexture: ...

  8. 基于传统IPC基础上的RTMP互联网推流摄像机方案设计

    在我之前的一篇博客<EasyRTMP内置进入摄像机中实现网络推流直播摄像机的功能>中,我阐述了一种将RTMP推流内置到摄像机系统内部,实现安防摄像机转互联网直播的RTMP推流摄像机功能,如 ...

  9. 【Away3D代码解读】(四):主要模块简介

    数据模块: Away3D中最核心的数据类是Mesh类,我们先看看Mesh类的继承关系: NamedAssetBase:为对象提供id和name属性,是Away3D大部分类的基类: Object3D:3 ...

随机推荐

  1. Ext.Net学习笔记12:Ext.Net GridPanel Filter用法

    Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...

  2. XMPP适配IPV6 (GCDAsyncSocket适配IPV6)

    苹果公司要求在6月1号之后上架Appstore的应用必须通过ipv6兼容测试. 最近到了八月份,开始发现新上架的app没有通过,查看了下原因,说没有适配IPV6. 首先在本地搭建一个IPV6的测试环境 ...

  3. JSP EL表达式详细介绍

    一.JSP EL语言定义 E L(Expression Language)  目的:为了使JSP写起来更加简单. 表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 ...

  4. Codevs 1958 刺激

    1958 刺激 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description saffah的一个朋友S酷爱滑雪,并且追求刺激(exitement, ...

  5. C语言库函数--操作文件

    //C库函数读取文件的代码 I/O缓冲机制 C语言库函数写文件都是写在内存中,然后一次写入磁盘.提高了效率. 读写文件,不对系统进行操作,一般采用C语言库函数.移植可以在任何可以对C支持的操作系统,而 ...

  6. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  7. jQuery插件综合应用(一)注册

    一.介绍 注册和登录是每个稍微有点规模的网站就应该有的功能.登陆功能与注册功能类似,也比注册功能要简单些.所以本文就以注册来说明jQuery插件的应用. jQuery插件的使用非常简单,如果只按照jQ ...

  8. Swift语言 1小时速学教程

    本文由 张渊杰 (网名寂静)编写 Swift语言 1小时速学教程 写在前面的话 有些人可能想, 呵呵, 1小时学一门语言, 你不是搞笑吧, 我想说, 是的, 完全可以, 就要看你怎么学了 要想在1小时 ...

  9. 如何查看MySQL中每张表占用的空间大小

    如题,找到MySQL中的information_schema表,这张表记录了所有数据库中表的信息,主要字段含义如下: TABLE_SCHEMA : 数据库名 TABLE_NAME:表名 ENGINE: ...

  10. magento install

    1: apt-get insatll   apache2  mysql  php5 2: 把下载的magneto 解压后放到  /var/www/magento 3: 进入   http://127. ...