away3d4.0 新手入门系列教程第五讲摄像机和全景制作

10 主题	3 听众	760 积分

初级设计师

Rank: 3 Rank: 3

纳金币: 3
精华: 0

电梯直达

楼主

发表于 2012-9-3 22:27:38 |只看该作者 |倒序浏览

这一节我们讲下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的模型导入

360度全景