纳金网

标题: away3d4.0 新手入门系列教程第五讲摄像机和全景制作 [打印本页]

作者: D调的华丽 时间: 2012-9-3 22:27
标题: away3d4.0 新手入门系列教程第五讲摄像机和全景制作
这一节我们讲下away3d的主要元素Camera3D（摄像机）。

前面几期里。我们建了很多很酷的3D场景。但是却没有以3D的视角去观察过。里我们会实现这个功能。在第一节我们简单了解了下Camera3D。这个就类似我们的眼睛。当我们移动Camer3D的时候我们便在这个3D世界了移动了。

下面我们来详细讲解下Camera3D。

View3D在初始化时候就已经创建的Camera3D 所以有时候我们没有创建Camera3D但我们依然可以看到3D场景。Camera3D的默认初始位置在x:0,y:0,c:-1000。Camera本身属性较多。我列举一些比较常用的。

camea.lookAt(new Vector3D).这个是让摄像机指着某点。即便摄像机移动中。也会一直指着此点。

camera.roll(angle)摄像机绕绿色的轴线旋转

camera.pitch(angle) 摄像机绕蓝色的轴线旋转

amera.yaw(angle)摄像机绕红色的轴线旋转

摄像机按照距离移动。

camera.moveBackward(distance)

camera.moveForward(distance);

camera.moveDown(distance);

camera.moveLeft(distance);

camera.moveRight(distance);

camera.moveUp(distance);

摄像机渲染距离设置

camera.lens.far=distance;

以上便是一些摄像机的基本属性。下面我们来说2个我们做项目中运用最多的摄像机控制器

1：HoverController 摄像机围绕某点旋转。这个我们经常用来坐360度环绕某点查看某3D物体。或者制作360度全景图。

2  FirstPersonController。第一人称视角控制器。这个可以完美的模拟出以第一视角漫游。

2个控制器的基本属性相同。给大家一一介绍下。

targetObject. 这个是我们所要给控制器的摄像机对象。

lookAtObject:这个是HoverController 拥有的。就是我们所要环绕的对象。

panAngle:摄像机以Y轴旋转的角度

tiltAngle:摄像机以X轴旋转的角度

distance；射线机的距离。

minPanAngle:以Y轴旋转的最小角度。

minTileAngle:以X轴旋转的最小角度。

maxPanAngle:以Y轴旋转的最大角度。

maxTileAngle:以X轴旋转的最大角度。

以下2个属性是FirstPersonController 可以模拟出第一视角行走

摄像机的方向以speed速度前进

incrementWalk(speed);

以摄像机为方向的90度以speed速度前进

incrementStrafe(speed);

好了现在我们动手以HoverController  来制作我们的全景。

简单的说下制作原理。我们这需要用一张全景图。全景图可以用skyBox那样用6个的无缝贴图来做。也可以用鱼眼镜头拍摄的360的来制作。一般6个面的无缝贴图制作难度比较高。所以更多的时候我们采用鱼眼镜头拍摄的360度全景照片来做。鱼眼镜头一般为球形镜头。所以我们这里会用一个球来贴上这个全景贴图。然后放个射线机在球类，这样基本上就能模拟出人在某地360度去观看周围。

var view:View3D=new View3D();
addChild(view);

我会创建一个半径为1000的球所以我让这个摄像机的渲染范围到2000。不能低于半径。否着看不到球的表面。
view.camera.lens.far=2000;

创建一个HoverController  然后赋予view.camera 初始化tiltAngle的值为90度这样这个是相机的初识就是平行的。摄像机到中心点距离为300
var _camerController:HoverController = new HoverController(view.camera,null,90,0,300);

一下是创建一个半径为1000 并给其赋予这个全景的位图贴图。

var sphere:SphereGeometry = new SphereGeometry(1000);
var bitmapTexture:BitmapTexture = new BitmapTexture(bitmapData);
var textureMaterial:TextureMaterial = new TextureMaterial(bitmapTexture);

Away3d的模型默认的都是单面渲染的，所以我们如果从球里看球的里边的面是看不到的。所以我将这个位图贴图双面渲染打开
textureMaterial.bothSides = ***e;
var mesh:Mesh = new Mesh(sphere,textureMaterial);
view.scene.addChild(mesh);

因为要用鼠标拖动去看任意方向所以我们需要通过鼠标的位移来计算角度

_startX是初始化摄像机panAngle 的值startY是初始tiltAngle 的值

mouseX是鼠标X轴移动距离

mouseY 是鼠标Y轴移动距离

_camerController.panAngle = (mouseX - _mouseX) * .3 + _startX;

_camerController.tiltAngle = (mouseY - _mouseY) * .3 + _startY;

好了那基本就制作完成了

我们可以输出以360度来观察这个全景。是不是很身临其境啊以下是全部的代码

import away3d.containers.View3D;

import away3d.primitives.SphereGeometry;

import away3d.textures.BitmapTexture;

import away3d.materials.TextureMaterial;

import away3d.entities.Mesh;

import away3d.controllers.HoverController;
var _startX:Number;



var _startY:Number;



var _mouseX:Number;



var _mouseY:Number;



var view:View3D=new View3D();
addChild(view);
view.camera.lens.far=2000;
var _camerController:HoverController = new HoverController(view.camera,null,90,0,300);
var loader

oader=new Loader();
var bitmapData:quanjing=new quanjing();
var sphere:SphereGeometry = new SphereGeometry(1000);
var bitmapTexture:BitmapTexture = new BitmapTexture(bitmapData);
var textureMaterial:TextureMaterial = new TextureMaterial(bitmapTexture);
textureMaterial.bothSides = ***e;
var mesh:Mesh = new Mesh(sphere,textureMaterial);
view.scene.addChild(mesh);
stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownFunction);
function mouseDownFunction(evt:MouseEvent):void

{

_startX = _camerController.panAngle;

_startY = _camerController.tiltAngle;

_mouseX = mouseX;

_mouseY = mouseY;

stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveFunction);

stage.addEventListener(MouseEvent.MOUSE_UP,mouseUpFunction);

}
function mouseMoveFunction(evt:MouseEvent):void

{

_camerController.panAngle = (mouseX - _mouseX) * .3 + _startX;

_camerController.tiltAngle = (mouseY - _mouseY) * .3 + _startY;

}
function mouseUpFunction(evt:MouseEvent):void

{

stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveFunction);

stage.removeEventListener(MouseEvent.MOUSE_UP,mouseUpFunction);

stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownFunction);

}
addEventListener(Event.ENTER_FRAME,enterFrameFunction);

function enterFrameFunction(evt:Event):void

{

view.render();

}

本节教程到此结束。下一期我会讲一下away3d的模型导入

作者: wsk 时间: 2012-9-7 11:51
支持下很新的教程！！！！！！

作者: 如同 时间: 2012-9-7 17:32
等待中！！！！！！！！！！！！！！！！！！！！！！！！！！！

作者: danceink 时间: 2012-9-21 17:07
很期待后续教程~~~~

作者: 測試用 时间: 2012-10-3 15:55
谢谢楼主，顶顶顶顶顶啊~~

作者: 87559854 时间: 2012-10-17 15:06

想看就得回复嘛

作者: wahaha 时间: 2012-10-19 17:05
嗯不错希望一直会有！

作者: huixiusnow 时间: 2012-10-30 09:55
顶！！

作者: acso 时间: 2012-11-3 16:55

。。。

作者: ueclick 时间: 2013-1-5 13:26
支持下好东西！！

作者: 王飞 时间: 2013-1-9 10:40
二〇一三年一月九日飞飞飞1发顺丰

作者: 愤怒的小牛 时间: 2013-1-9 10:42
写的非常好。顶一个!!!

作者: king 时间: 2013-1-10 15:07
dsfdsfsdfsfsadf

作者: iha2000 时间: 2013-1-14 11:13
非常好！！！！！！！！！！！！！！！！！！！！

作者: 误码率 时间: 2013-1-15 10:38
谢谢楼主，顶顶顶顶顶啊~~ 谢谢楼主，顶顶顶顶顶啊~~

作者: xiongz 时间: 2013-1-15 11:11
支持一下·顶顶。。。

作者: 北海盗22 时间: 2013-1-15 17:04
希望能继续~~太厉害了~~~

作者: yu 时间: 2013-1-17 10:27
继续跟进学习中！谢谢！

作者: kaka 时间: 2013-1-17 15:33
感谢分享感谢楼主感谢

作者: 水墨 时间: 2013-1-21 17:47
不理解中！！！！！！！！！！！！！！！！

作者: sweet 时间: 2013-1-28 10:13
谢谢楼主

123456789522

作者: franker 时间: 2013-2-26 14:10
正在学习正在学习正在学习

作者: haoyi 时间: 2013-2-27 17:30
指出楼主，谢谢楼主的风险精神

作者: 西方朔 时间: 2013-10-8 22:24
继续下载源码学习

作者: sonic 时间: 2013-10-11 02:18

很期待后续教程~~~~

作者: raycg 时间: 2013-10-28 05:26
楼主辛苦，好东西

作者: orokborokhulu 时间: 2013-10-28 23:34
thanks for sharing

作者: 89684598 时间: 2014-2-22 22:15

谢谢分享

作者: kikkik7000 时间: 2014-2-27 14:46
感谢分享

作者: nikai6868 时间: 2014-10-16 11:37
支持，会兴旺起来的

作者: kz2007 时间: 2014-10-22 17:50
到哪里下载呀

作者: . 时间: 2014-11-2 13:45

作者: 传说的落叶 时间: 2014-11-4 08:21
这个不错。

作者: powerhappy 时间: 2015-8-27 15:34
好东西啊~多谢分享~

作者: lkw2sfy 时间: 2016-11-25 08:49
有后续更新吗

欢迎光临纳金网 (http://wwww.narkii.com/club/)