图形学中的相机定义了三维空间到二维屏幕的投影方式,根据投影方式的不同,相机可分为 正交投影相机透视投影相机

正交投影相机 : 近处、远处的物体大小尺寸保持一致,常适用于工程制图、建模软件,如CAD, UG 等。

透视投影相机: 远处的物体比近处的物体小, 模拟的是现实中人眼的状态。

正交投影相机:

 var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
scene.add(camera);

具体如下图所示:

六个参数分别对应 X 轴的最小最大坐标, Y 轴的最小最大坐标, Z 轴的最小最大坐标, 创建的一个平行视景体(长方体空间区域),坐标落在该区域内的物体才可见:

left (左边界) —— 该属性是可视范围的左平面, 即可渲染部分的左侧边界,在左边界左侧的任何对象,都看不到。

right (右边界) —— 该属性是可视范围的右平面, 即可渲染部分的右侧边界, 在右边界右侧的任何对象都看不到。

top (上边界) ——  可被渲染空间的最上面。

bottom (下边界) —— 可被渲染空间的最底面。

near (近面) —— 基于相机所在的位置, 从这一点开始渲染场景。

far (远面) —— 基于相机所在的位置, 一直渲染到场景中的这一点。

(注意: 更改投影矩阵参数后,必须调用  updateProjectionMatrix() 方法更新摄像机投影机矩阵,更新的参数才起作用)

透视投影相机:

 var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
scene.add(camera);
3 camera.updateProjectionMatrix();

具体如下图所示:

同时亦可用正交投影参数来描述透视投影:

创建一个对称的透视型视景体

fov —— 可视角度, YZ 平面的角度, 范围为 [0.0 , 180.0]。

aspect —— 实际窗口的纵横比。

near —— 近处的裁面的具体, 总为正值。

far —— 远处的裁面的距离, 总为正值, 且 far > near。

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

相机的位置

相机的默认位置是面向Z 轴负方向放置的,可改变相机位置 若右移(X 轴正向)一个单位, 向着 Z 周正向移动 10 个单位

camera.position.set(, , )  //相机面对物体, 当相机右移动,即物体左移。
camera.looAt(new THREE.Vector3(0, 0, 0) // 指定看向原点方向
camera.updateProjectionMatrix();

参考: https://my.oschina.net/u/1455799/blog/213962

three.js 相机的更多相关文章

  1. 11-THREE.JS 相机始终朝向某个物体

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

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

    开始很懵逼,完全不能理解,有个position,还要up和lookAt干嘛. [黑人问号脸❓❓❓] 既然是位置属性不明白,那默认其它属性都懂了. 上坐标轴: 先来第一个position属性,可以设置x ...

  3. three.js入门3

    为什么要用three.js Three.js为我们封装了底层的WebGl接口,使我们在无需掌握繁冗的图形学知识的基础下可以轻松的创建三维场景.相比较使用底层的WebGL我们可以使用更少的代码,大大的降 ...

  4. 在WebGL场景中管理多个卡牌对象的实验

    这篇文章讨论如何在基于Babylon.js的WebGL场景中,实现多个简单卡牌类对象的显示.选择.分组.排序,同时建立一套实用的3D场景代码框架.由于作者美工能力有限,所以示例场景视觉效果可能欠佳,本 ...

  5. Three.js学习(相机,场景,渲染,形状)

    相机分为透视相机和正交相机(还有第三人称相机不介绍). var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window. ...

  6. 使用微信js接口的方法 ,以调用相机为例

    protected string GetTimeStamp_Str=""; protected string nonceStr_Str = ""; protec ...

  7. Android与JS混编(js调用android相机)

       参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...

  8. three.js 第二篇:场景 相机 渲染器 物体之间的关系

    w我用画画来形容他们之间的关系 场景就是纸张 相机就是我们的眼睛 物体就是在我们脑海中构思的那个画面 渲染器就是绘画这个动作 场景(Scene): 初始化:var scene = new THREE. ...

  9. Vue.js 使用cordova camera插件调取相机

    本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作.具体的操作步骤如下 第一步:在cordova项目下安装cordova-plugin-camera插件 co ...

随机推荐

  1. netty开发教程(一)

    Netty介绍 Netty is an asynchronous event-driven network application framework  for rapid development o ...

  2. Android TCP/IP 扫盲教程

    TCP/IP 是因特网的通信协议. 通信协议是对计算机必须遵守的规则的描写叙述.仅仅有遵守这些规则.计算机之间才干进行通信. 浏览器和server都在使用 TCP/IP 因特网浏览器和因特网serve ...

  3. JIRA 敏捷开发平台部署记录

    1.1 jira说明 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域. JIRA中配置灵活.功能全 ...

  4. Winform开发框架中工作流模块之审批会签操作(2)

    前面随笔介绍了请假申请单和报销申请单两个不同的业务表单的流程处理,一个是单表信息,一个包含明细的主从表信息,后者包含了条件流程的处理,在流程审批中,一般还有一种流程处理就是会签的操作,会签处理是几个审 ...

  5. 什么是 stack?- 每天5分钟玩转 Docker 容器技术(111)

    什么是 stack ?在回答这个问题之前我们先回忆一下前面部署 WordPress 应用的过程: 首先创建 secret. 然后创建 MySQL service,这是 WordPress 依赖的服务. ...

  6. NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  7. Asynchronous vs synchronous client applications(MQTT)

    来自我的CSDN博客   想查看英文原文的请点击原文网址.在上两篇翻译中,Homejim我给大家分别翻译了同步客户端应用程序和异步客户端应用程序.本人对这两个的区别也有困惑,因此将paho下的这个比较 ...

  8. Eclipse中Spring插件的安装

    java中为了方便学习使用SSH框架,框架插件的安装是非常必要的. 本博文记录了自己安装Spring插件的过程: 本机环境:win8 64bit eclipse版本:4.5.2 MARS 插件版本:S ...

  9. Linux 文件API

    9/19/2017  开始攻读<LinuxC编程实战>,这是相关的笔记 1.创建 int creat(const char *filename, mode_t mode); 参数mode指 ...

  10. [WinForm]委托应用①——窗口之间方法/控件调用

    不传参数 第二窗口:public partial class Form2 : Form { /// <summary> /// 定义委托 /// </summary> publ ...