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 ...
随机推荐
- 再谈 SharePoint 大局观
作者:陈希章 发表于 2017年12月21日 前言 我对SharePoint这个产品很有感情,因为曾经有相当长一段时间,在很多个夜深人静.月黑风高的晚上,我都是在和它形影不离,在一个一个项目实践中相爱 ...
- 深入理解计算机系统_3e 第三章家庭作业 CS:APP3e chapter 3 homework
3.58 long decode2(long x, long y, long z) { int result = x * (y - z); if((y - z) & 1) result = ~ ...
- SpringBoot ( 七 ) :springboot + mybatis 多数据源最简解决方案
说起多数据源,一般都来解决那些问题呢,主从模式或者业务比较复杂需要连接不同的分库来支持业务.我们项目是后者的模式,网上找了很多,大都是根据jpa来做多数据源解决方案,要不就是老的spring多数据源解 ...
- IOC容器在web容器中初始化过程——(二)深入理解Listener方式装载IOC容器方式
先来看一下ContextServletListener的代码 public class ContextLoaderListener extends ContextLoader implements S ...
- Hibernate--使用注解配置映射关系
写在前面: 配置实体类与数据库的映射关系,有两种方式: 1.使用*.hbm.xml : 2.使用@注解 一:注解的方式: 1.@Entity 加在类的前面,将类声明为持久化类. 2.@Tabl ...
- 【java】实例化对象的3种方式:new、clone、反射
实例化对象的3种方式:new.clone.反射
- python链接mysql
1.安装MySQLdb MySQLdb 是用于Python链接Mysql数据库的接口,它实现了 Python 数据库 API 规范 V2.0,基于 MySQL C API 上建立的. 下载地址: ht ...
- 童话故事 --- 什么是SQL Server Browser
高飞狗这几天特别郁闷,不知该如何通过TCP/IP协议连接SQL Server数据库.好在功夫不负有心人,经过几天的刻苦研究,终于得到了答案. 高飞狗呼叫UDP1434端口,"叮铃铃,叮铃铃- ...
- bzoj 3566: [SHOI2014]概率充电器
Description 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品--概率充电器:"采用全新纳米级加工技术,实现元件与导线能否通电完全由真随机数决定!SHOI 概率 ...
- Concurrency Is Not Parallelism (Rob pike)
Rob pike发表过一个有名的演讲<Concurrency is not parallelism>(https://blog.golang.org/concurrency-is-not- ...