THREE.js-照相机(Camera)

既然是通过相机来渲染场景,那么没有相机,我们也就什么看不到了。THREE.js中提供了Camera类对相机这个角色进行抽象。相机将三维的场景投影到二维的屏幕,根据投影的方式不同,THREE.js中提供了几种不同类型的相机。

戳这里查看正交投影和透视投影的投影效果

正交投影与透视投影

我们先从上面的两种图来理解正交投影与透视投影,我觉得我们可以把正交投影理解为到面的投影,投影线垂直于投影面进行投影,因此物体投影之后的比例是保持不变的。而对于透视

投影我们可以理解为到点的投影,所有的投影线最后都将汇聚于一点,透视投影的特点就是近大远小。

学习Camera之前我们先了解一下THREE.js中使用的坐标系。THREE.js使用的是右手坐标系,想象一下右手握空心拳,手指完全的方向就是从x轴到y轴的方向,而z轴则垂直于手指弯曲的方向从

拳头中心穿过。

正交投影相机OrthographicCamera

构造函数

OrthographicCamera(left, right, top, bottom, near, far)

在上面正交投影的图中,我们想象一样,相机所在的地方有个平面,而相机所在的地点默认是平面的中心点。

那么:left就是视锥左侧面,right就是视锥右侧面,top就是视锥上侧面,而bottom就是视锥下侧面。

near是到距离相机较近的那一面的距离,far是离距离相机较远的那一面的距离,这六个投影面围成的区域就是相机投影的可见区域。

三维空间内,只有在这个区域内的物体才会被相机看到。

实例说明

camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(0, 0, 5);

var cubeGeometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({
    color : 0xff0000,
    wireframe : true
})

var cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);
renderer.render(scene, camera);

首先我们实例化一个相机正交相机对象,相机的默认坐标是原点,和立方体重叠无法看到立方体,这里我们设置一下相机的坐标(x,y,z)=(0,0,5)。

采用正交投影的时候,我们发现立方体的前端完全被后端遮盖了,这就是正交投影和透视投影的区别,如果使用透视投影,那么根据近大远小的原则,靠近摄像机的一端的投影面积小于远离相机一端的投影面积。

长宽比例

但是这里有一个很奇怪的问题,命名创建的是一个长度为1的正方体,为啥投影是长方体?这里canvas面板的长宽比是2:1,但是相机的(right-left)/(top-bottom)比例是4:3,因此

垂直方向上面被压缩了,所以显示的是一个长方体。

将(right-left)/(top-bottom)的比例同样调整为2:1

camera = new THREE.OrthographicCamera(-2, 2, 1, -1, 1, 10)

相机位置

相机默认的坐标位置是(0,0,0),上面的例子中我们把相机的坐标设置为(0,0,5),即z轴上面。现在我们来移动相机的位置看看投影出来的立方是什么样子的。

camera.position.set(1, 0, 5)

在x轴方向把相机右移1个单位

发现相对于画面中心,立方体往左移动了一个单位,很容易理解这里的主体是相机,相机右移,那么立方体相对于相机不就是左移了么?

camera.position.set(2, -2, 5);

把相机挪动到立方体的下方?这个时候镜头里面一片漆黑,看不到立方体了。因为镜头默认的方向是朝着z轴的负方向,我们让它朝着原点即可。

camera.lookAt(new THREE.Vector3(0,0,0));

透视投影相机(PerspectiveCamera)

构造函数

PerspectiveCamera(fov, aspect, near, far)

- fov 可视角度

- aspect 为width/height,通常设置为canvas元素的高宽比。

- near近端距离

- far远端距离

只有离相机的距离大于near值,小于far值,且在相机的可视角度之内,才能被相机投影到。

实例说明

renderer = new THREE.WebGLRenderer();
renderer.setSize(400,300);
document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, 4/3, 1, 10000);

camera.position.set(0,0,5);
var mess = new THREE.Mesh(new THREE.CubeGeometry(1,1,1), new THREE.MeshBasicMaterial({
    color : 0xff0000,
    wireframe : true
}));

scene.add(mess);
renderer.render(mess, camera);

改变视角大小

camera = new THREE.PerspectiveCamera(60, 4/3, 1, 10000);

我们把视角由45度变为60度,发现立方体变小了,很容易理解,视角变大之后,可以看到的范围变大了,但是立方体本身的大小没有变,那么相对于整个投影来说,立方体就变小了,不信你把眼睛睁大最大试试( ̄▽ ̄)”。

时间: 2024-10-21 23:37:01

THREE.js-照相机(Camera)的相关文章

libgdx学习记录17——照相机Camera

照相机在libgdx中的地位举足轻重,贯穿于整个游戏开发过程的始终.一般我们都通过Stage封装而间接使用Camera,同时我们也可以单独使用Camera以完成背景的移动.元素的放大.旋转等操作. Camera分为PerspectiveCamera(远景照相机)和OrthographicCamera(正交照相机). PerspectiveCamera为正常的照相机,当距离物体越远,则物体越小,一般在3D空间中使用. OrthographicCamera忽略了其Z轴,不管距离物体多远,其大小始终不

android 自定义照相机Camera黑屏 (转至 http://blog.csdn.net/chuchu521/article/details/8089058)

对于一些手机,像HTC,当自定义Camera时,调用Camera.Parameters的 parameters.setPreviewSize(width, height)方法时,如果width和height为奇数情况下,则会出现黑屏现象,解决办法可参考SDK提供的ApiDemos中关于Camera的 例子: List<Size> sizes = parameters.getSupportedPreviewSizes(); Size optimalSize = getOptimalPreview

three.js 相机camera位置属性设置详解

开始很懵逼,完全不能理解,有个position,还要up和lookAt干嘛. [黑人问号脸???] 既然是位置属性不明白,那默认其它属性都懂了. 上坐标轴: 先来第一个position属性,可以设置xyz. 假设设置y为 1000 position(0,1000,0); 相机的位置是下图: 单独设置xz轴都和以上类似,位置z或者x轴某个位置. 那lookAt,字面上的意思就是,看向哪里. 相机默认是由正z轴看像-z轴(相机镜头对着-z轴方向拍),就是我们由屏幕外向屏幕内看一样. camera.l

Three.js的开始(附代码)_2

1 下载Three.js代码 https://github.com/mrdoob/three.js/tree/master/build 2 引用方法 在HTML中添加以下代码: <script type="text/javascript" src="js/three.js"></script> 3 定义Canvas元素 手动定义Canvas元素(WebGL渲染的需要) <!DOCTYPE html> <html lang=&

android Camera拍照

通过Camera进行拍照步骤: 调用Camera的open()方法打开相机.该方法默认打开后置摄像头.如果需要打开指定摄像头,可以为该方法传入摄像头ID. 调用Camera的getParameters()方法获取拍照参数.该方法返回一个Camera.Parameters对象 调用Camera.Parameters对象方法设置拍照参数 调用Camera的startPreview()方法开始预览取景,在预览取景之前需要调用Camera的setPreviewDisplay(SurfaceHolder

Android自定义照相机实现(拍照、保存到SD卡,利用Bundle在Acitivity交换数据)

Android自定义照相机实现 近期小巫在学校有一个创新项目,也不是最近,是一个拖了很久的项目,之前一直没有去搞,最近因为要中期检查,搞得我跟小组成员一阵忙活,其实开发一款照相机软件并不太难,下面就是通过自定义的方式来实现手机照相的功能. 创建一个项目:FingerTakePicture 首先来搞一下界面: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu

Android Camera 调用流程

一:Camera的执行流程: 1.总体介绍 Android Camera框架从整体上看是一个client/service架构.有两个进程,一个是client进程,可以看成AP端 ,主要包括Java代码和一些native层的c/c++代码:另一个是service进程,属于服务端,是native c/c++代码, 主要负责和linux kernel中的camera driver交互,搜集linux kernel中driver层传上来的数据,并交给显示系统(surface)显示.client 和 se

SurfaceView的使用

1.概念 SurfaceView是View类的子类,可以直接从内存或者DMA等硬件接口取得图像数据,是个非常重要的绘图视图.它的特性是:可以在主线程之外的 线程中向屏幕绘图上.这样可以避免画图任务繁重的时候造成主线程阻塞,从而提高了程序的反应速度.在游戏开发中多用到SurfaceView,游戏中的背 景.人物.动画等等尽量在画布canvas中画出. 2.实现方法 1)实现步骤 a.继承SurfaceView b.实现SurfaceHolder.Callback接口 2)需要重写的方法 (1)pu

自定义水波球清理内存的悬浮窗小工具

一.概述 现在一些手机管家都会有一个用来清理内存的悬浮窗小工具,感觉挺实用的,就自己做了一个.首先介绍一下这个工具的功能,除了可以清理内存,还有调节手机屏幕亮度.手电筒.无线网.移动数据.蓝牙.GPS开关的功能.先上图,感受一波: 清理手机内存     一些常用功能的开关 二.功能实现 1.悬浮窗     MainActivity只有两个按钮,控制悬浮窗的打开和关闭.这里我是用Service去控制的.下面我把FloatWindowService的代码贴出来: public class Float

第03章-VTK系统概述(1)

[译者:这个系列教程是以Kitware公司出版的<VTK User's Guide -11th edition>一书作的中文翻译(出版时间2010年,ISBN: 978-1-930934-23-8),由于时间关系,我们不能保证每周都能更新本书内容,但尽量做到一周更新一篇到两篇内容.敬请期待^_^.欢迎转载,另请转载时注明本文出处,谢谢合作!同时,由于译者水平有限,出错之处在所难免,欢迎指出订正!] 本章旨在介绍VTK系统的总体概述,并讲解运用C++.Java.Tcl和Python等语言进行VT