Away 3d 基本属性

出处:http://blog.sina.com.cn/s/blog_59f0ac9d0101ci2j.html

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);

移动摄像机

直接设置摄像机的x,y和z属性就可。

旋转摄像机

摄像机的旋转使用它的rotationX,rotationY和rotationZ属性,和普通的三维物体相同。比如:

camera.rotationY = 10;

调整zoom和focus属性

zoom和摄像机的放大倍数密切相关。zoom越大,放大倍数也越大。

focus属性和实际镜头的焦距不同,在Away3D中,它指摄像机位置和视平面的距离。focus越小,摄像机离视平面越近,视角越宽广,类似于广角镜头,有较大的畸变

摄像机渲染距离设置
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 = true;

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 flash.display.*;
import flash.events.*;
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:Loader=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 = true;

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();
}

时间: 2024-10-13 19:04:10

Away 3d 基本属性的相关文章

CSS3最颠覆性的动画效果,基本属性[3D]

和2D一样也是transform 即变形 1)rotateX rotateY rotateZ(也可以用transform-origin来设置旋转中心点) 2)透视(perspective) 给父亲加透视,透视就是模拟眼睛到物体的距离,近大远小,即数值越小,3D越明显 理解透视就是把眼睛放在离物体多远的地方看,不设置透视可以理解成在无穷远处看,和太阳光一样,不会因为Z改变而看出变化                                             translate3d(x,

C#-WinForm-客户端程序-Form基本属性

WinForm - 客服端程序(C/S) WindowsForm 的简称 客户端应用程序:是需要安装在用户电脑上才可以使用的程序,代码部分在用户电脑上执行 特点:不需要联网也可以打开使用部分功能,但现在的许多功能依然需要互联网的支持 常见的窗体种类有: 1.记事本类型 - 有最大化.最小化.可以随意拖拽大小 2.计算器类 - 最大化不用,不可以随意拖拽大小 3.QQ.杀毒软件类 - 没有Windows自带的窗体外框 4.悬浮球类 - 不规则图像的窗体 创建新WinForm: 窗体常用的基本属性:

jQuery实现3D幻灯片

先看下效果图: 看到这个酷炫的效果有没有很眼馋啊!接下来我们就一起来学习实现它吧. 1.看到效果后我们先分析这个dom要怎么实现! 首先我们要用一个大容器包裹内容,其次这个看起来像是3d效果的图片实际上是靠我们的视觉误差实现的.他通过改变图片的大小.透明度.zindex来实现的.说完原理你有没有思路了? 我们整理下思路看下通过jQuery应该怎么实现. 第一步先把这个视觉效果实现 首先是先处理每张图片,我们用li来放置每个图片,但是图片又分为三个部分,分别为左侧图片,右侧图片,和中间的图片.我们

《精通Unreal Engine 3 卷1:3D游戏关卡设计》

内容简介: <精通Unreal Engine 3卷1:3D游戏关卡设计基础篇>是您认识并掌握最新最热门的游戏引擎(虚幻引擎3)的首选指南,无论您是初次接触mod制作的爱好者,还是职业的关卡设计人员,都能从本书中受益.本书中包含了读者想要学习的所有技能,这些技能可以帮助读者创建出在游戏机和复读机上运行的极其出色的新内容和游戏. <精通UnrealEngine3卷1:3D游戏关卡设计基础篇>的作者不仅仅是世界上最优秀的虚幻引擎游戏开发培训人员,他们甚至已经发布了<虚幻竞技场3:典

Material Design 概念,环境和基本属性

Material Design 概念,环境和基本属性 Material Design是随Android 5.0推出的一种设计概念, 涉及到了跨平台和设备的视觉,动态,交互设计等方面. 设计概念 Material Design的灵感来自于对纸和墨水的研究,基于触觉现实感.并且它还在继续地发展扩充,有很大的想象空间. 基于现实,让材料的表面和边缘提供视觉线索. 熟悉的触觉属性可以帮助用户快速地明白正在发生什么. 光,表面和运动的一些基本规则是很关键性的因素,它们可以传达物体在空间如何存在,运动和交互

HTML5 CSS3 诱人的实例: 3D立方体旋转动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的样例,感觉非常不错,只是实在想不出来实际的用处.可是效果非常炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景.即面上的小格格 3. @-webki

使用CSS3实现一个3D相册

CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一个用CSS3实现的立方体实例,详细讲解了3D旋转和transform等属性. 本文再来利用CSS3属性来编写一个实例,话不多说,先直接看看效果.3D相册实例DEMO 因为前面已经讲解过一些属性的用法,此篇文章不再赘述,只记录这个实例的编码过程.项目代码已上传至github,项目代码github地址

css3加js做一个简单的3D行星运转效果

前几天在园子里看到一篇关于CSS3D行星运转的文章,原文在这里,感觉这个效果也太酷炫了,于是自己也就心血来潮的来尝试的做了一下.因为懒得去用什么插件了,于是就原生的JS写,效果有点粗超,还有一些地方处理的不是很好,如果有好的建议万望留言告知,不胜感谢.源代码已上传到github上,点这里获取.好了不说废话了,下面附上代码. HTML部分 <div class="path-Saturn"> <div id="Saturn" title="土

Easy to use cross-platform 3D engines

C++ http://gamedev.stackexchange.com/questions/21/easy-to-use-cross-platform-3d-engines-for-c-game-development My Opinion (only for open source 3D engines): Irrlicht: Light 3D engine Clean C++ without dependencies and no STL. Not very well documented