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 ...
随机推荐
- IIS 服务或万维网公布服务,或者依赖这 服务可能在启动期间错误发生或者已禁用
作者:jiankunking 出处:http://blog.csdn.net/jiankunking 详细错误信息例如以下: 解决方式: 在服务中禁用下面3个服务自己主动启动: Net.Msmq Li ...
- ML02: 机器学习KNN 算法
摘要: 一张图说清楚KNN算法 看下图,清楚了吗? 没清楚的话,也没关系,看完下面几句话,就清楚了. KNN算法是用来分类的. 这个算法是如何来分类的呢? 看下图,你可以想想下图中的 『绿色圆点』 ...
- tcpdump抓包和scp导出以及wireshark查看
[命令和工具] tcpdump scp wireshark (1)tcpdump sudo tcpdump -i eth0 -w /home/tcpdump/1.pcap host 10.214.1 ...
- mybatis 之 占位符#{} 和 ${}
#{}占位符用来设置参数,参数的类型可以有3种,基本类型,自定义类型,map基本类型作为参数,参数与占位符中的名称无关. <select id="findById" para ...
- Protocol Buffer 时间类型定义
ProtoBuf3中新增了TimeStamp类型,使用示例如下: syntax = "proto3"; import public "google/protobuf/ti ...
- 微信小程序基于最新版1.0开发者工具分享-小试牛刀(视频)+发布流程
第一章:小程序初级入门教程 小试牛刀[含视频] 视频地址:https://v.qq.com/x/page/i0554akzobq.html 这一章节中,我们尝试着写一个最简单的例子,包含 2 个静态页 ...
- 2. whoami,常用包,调优selinux,七种启动模式,系统开机服务
1 whoami 查看当前登录用户 useradd zhang 增加用户 passwd zhang su - zhang 切换用户 e ...
- 获取手机安装的所有包名adb shell pm list packages
获取所有已安装包的包名:adb shell pm list packages 查找:adb shell pm list packages|findstr suning
- Wincc的使用
1.组态项目步骤 1)启动Wincc 2)建立项目 3)选择及安装通信驱动程序 4)定义变量 5)建立和编辑过程画面 6)指定Wincc运行系统的属性 7)激活Wincc画面 8)使用变量模拟器测试过 ...
- bat获取系统时间修改系统密码
@echo off %1 mshta vbscript:CreateObject("Shell.Application").ShellExecute("cmd.exe&q ...