three.js 相机
图形学中的相机定义了三维空间到二维屏幕的投影方式,根据投影方式的不同,相机可分为 正交投影相机 与 透视投影相机。
正交投影相机 : 近处、远处的物体大小尺寸保持一致,常适用于工程制图、建模软件,如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 相机的更多相关文章
- 11-THREE.JS 相机始终朝向某个物体
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- three.js 相机camera位置属性设置详解
开始很懵逼,完全不能理解,有个position,还要up和lookAt干嘛. [黑人问号脸❓❓❓] 既然是位置属性不明白,那默认其它属性都懂了. 上坐标轴: 先来第一个position属性,可以设置x ...
- three.js入门3
为什么要用three.js Three.js为我们封装了底层的WebGl接口,使我们在无需掌握繁冗的图形学知识的基础下可以轻松的创建三维场景.相比较使用底层的WebGL我们可以使用更少的代码,大大的降 ...
- 在WebGL场景中管理多个卡牌对象的实验
这篇文章讨论如何在基于Babylon.js的WebGL场景中,实现多个简单卡牌类对象的显示.选择.分组.排序,同时建立一套实用的3D场景代码框架.由于作者美工能力有限,所以示例场景视觉效果可能欠佳,本 ...
- Three.js学习(相机,场景,渲染,形状)
相机分为透视相机和正交相机(还有第三人称相机不介绍). var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window. ...
- 使用微信js接口的方法 ,以调用相机为例
protected string GetTimeStamp_Str=""; protected string nonceStr_Str = ""; protec ...
- Android与JS混编(js调用android相机)
参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...
- three.js 第二篇:场景 相机 渲染器 物体之间的关系
w我用画画来形容他们之间的关系 场景就是纸张 相机就是我们的眼睛 物体就是在我们脑海中构思的那个画面 渲染器就是绘画这个动作 场景(Scene): 初始化:var scene = new THREE. ...
- Vue.js 使用cordova camera插件调取相机
本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作.具体的操作步骤如下 第一步:在cordova项目下安装cordova-plugin-camera插件 co ...
随机推荐
- 【Java入门提高篇】Day10 Java代理——静态代理
今天要介绍的是一个Java中一个很重要的概念--代理. 什么是代理?联系生活想想看,代理似乎并不陌生,最形象的代表便是经纪人,明星一般都有经纪人,经纪人作为中间人,负责代理明星的相关事宜,比如说,有人 ...
- Java并发编程实践读书笔记(1)线程安全性和对象的共享
2.线程的安全性 2.1什么是线程安全 在多个线程访问的时候,程序还能"正确",那就是线程安全的. 无状态(可以理解为没有字段的类)的对象一定是线程安全的. 2.2 原子性 典型的 ...
- Android开发之常见事件响应方式
常见的事件有 (1)单击事件 onClickListener (2)长按事件 onLongClickListener (3)滑动事件 onTouchListener (4)键盘事件 onKeyLi ...
- Android开发——Toast知识
Toast.makeText(this, "内容", Toast.LENGTH_SHORT).show(); 直接显示一个Toast,第三个参数是时间的长短,还有一个Toast.L ...
- 56、jsのBOM对象与DOM对象
javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读 一.BOM对象 1.window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个windo ...
- Java中数据类型及其之间的转换(转)
Java中数据类型及其之间的转换 基本的数据类型 基本类型有以下四种:1)int长度数据类型有:byte(8bits).short(16bits).int(32bits).long(64bits).2 ...
- iOS OC Swift3.0 TableView 中tableviewcell的线左边不到边界
Swift 3.0 func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt index ...
- wincc flexable变量组态
1.变量分类 2.变量组态练习 3.变量组态之前新建一个设备连接取名connect 3.tag1组态bool类型,双击变量弹出下面窗口,具体如下图所示connect表示外部变量 4.组态tag2 5. ...
- FastJson--阿里开源的速度最快的Json和对象转换工具
示例 import java.util.ArrayList; import java.util.List; import java.util.HashMap; import java.util.Map ...
- Java NIO (五) 管道 (Pipe)
Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 如下图: 向管道写数据: 从管道读数据: 1. ...