three.js 相机

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

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

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

正交投影相机:

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

 具体如下图所示:

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

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

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

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

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

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

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

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

透视投影相机:

1 var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
2 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(1, 0, 10)  //相机面对物体, 当相机右移动,即物体左移。
camera.looAt(new THREE.Vector3(0, 0, 0)  // 指定看向原点方向
camera.updateProjectionMatrix(); 

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端那些事

过渡与动画 - 逐帧动画&steps调速函数

写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无...

295100
来自专栏大数据挖掘DT机器学习

很棒的R语言回归模型和方差模型

对于初学者,利用R语言自带的数据进行练习是不错的选择,下面这些模型便是最好的实例。 1、回归模型 回归模型利用自带的faithful数据来示例,faithful...

50780
来自专栏皮皮蟹的专栏

随便写一篇文章

记录一下今天的事情,呃,就这样。 今天是什么心情? 红色:热情 蓝色:忧郁 黑色:悲哀 庄严 白色:单纯 橙色:阳光 灰色:郁闷 黄色:快乐 ...

32360
来自专栏jianhuicode

关于贝塞尔曲线的故事

概述 在开始本故事的之前,先来介绍下故事的背景。话说几百年前,从天而降一座神山,远远看去像一天光滑的丝带,它的名字叫做:“贝塞尔曲线"。有大法师预言登上这座神山...

24980
来自专栏前端那些事

过渡与动画 - 逐帧动画&steps调速函数

上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果.

10500
来自专栏数据小魔方

绩效管理工具(二)——温度计风格图表!

今天跟大家分享另一种用作绩效管理的图表工具——温度计风格图表! ▽ 这种图表看起来简洁、直观。数据表达清晰、无冗余。今天主要介绍两种做法,都不是特别复杂,但是需...

35580
来自专栏MixLab科技+设计实验室

人工智能设计师之智能排版的另一种实现方式

Flipboard的自动排版系统Duplo 最近在整理算法驱动设计的案例,翻到Flipboard的自动排版系统,再次研究了下,把相关的技术思路整理了下: Fli...

41570
来自专栏数据小魔方

sparklines迷你图系列7——Comparision(+/-Variance)。

今天跟大家分享sparklines迷你图系列的第七篇——Comparision(+/-Variance)。 该图表用于表现指标增长率波动情况,波动范围-100%...

27650
来自专栏贾志刚-OpenCV学堂

OpenCV中泛洪填充算法解析与应用

泛洪填充(Flood Fill)很多时候国内的开发者称它为漫水填充,该算法在图形填充与着色应用程序比较常见,属于标配。在图像处理里对二值图像的Hole可以通过泛...

536100
来自专栏IMWeb前端团队

移动端圆环进度动画方案(透明背景-透明度圆环-css3版)

本文作者:IMWeb 张颖 原文出处:IMWeb社区 未经同意,禁止转载 适逢元旦假期,妹子逛街吃火锅看电影陪女朋友之际,写出来的文章难免画风略微粗糙...

21980

扫码关注云+社区

领取腾讯云代金券