Three.js基础探寻二——正交投影照相机

  本篇主要介绍照相机中的正交投影照相机。  

  第一篇传送门:Three.js基础探寻一

 

1.照相机

  图形学中的照相机定义了三维空间到二维屏幕的投影方式。

  针对投影方式照相机分为正交投影照相机和透视投影照相机。

2.两种相机的区别与适用范围

  正交投影:

 

  透视投影:

 

  正交投影就像数学课上画的;而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小。

  对于制图、建模软件通常使用正交投影;而对于其他大多数应用,通常使用透视投影。

3.正交投影照相机

  正交投影照相机的构造函数:

Three.OrthographicCamera(left,right,top,bottom,near,far)

  六个参数分别代表正交投影照相机拍摄到的六个面的位置。

  其中,near表示近平面与相机中心点的垂直距离;far表示远平面与相机中心点的垂直距离。

图片来源

  若要保持照相机的横纵比例,(right-left)与(top-bottom)的比例需与canvas的宽高比例一致。

  由图可见near与far的值应为正值,且far>near。如果最后两个值是(0,0),也就是near和far值相同了,视景体深度没有了,整个视景体都被压成个平面了,就会显示不正确。

4.正交投影照相机实例

  源码:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>3.js测试二</title>   </head><body onload="init()"><canvas id="mainCanvas" width="400px" height="300px" ></canvas><script type="text/javascript" src="js/three.min.js"></script><script type="text/javascript">function init() {var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('mainCanvas')});renderer.setClearColor(0x000000);var scene = new THREE.Scene();// 设置照相机var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);camera.position.set(0, 0, 5);//camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);// 创建立方体var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: true}));scene.add(cube);// render
renderer.render(scene, camera);}</script></body></html> 

  带详细注释的请参考第一篇

  其中,THREE.MeshBasicMaterial(基础网格材质)的wireframe属性如果为true,则将材质渲染成线框。

可以看到当前位置后面的边会与前面的完全重合:

  4.1 改变视景体长宽比例

  这里canvas的宽高比为4:3,照相机的水平距离为4,垂直距离为3,因此长宽比例保持不变(1:1)。

  若将照相机的水平距离减小为2,

var camera = new THREE.OrthographicCamera(-1,1,1.5,-1.5,1,10);

  物体会被拉长:

  照相机的视野范围变窄了,导致正方体在视野范围内的横向比例增加了,因此表现为正方体变宽了。

  4.2 改变相机位置

  例子中的相机位置是(0,0,5),由于照相机默认是面向z轴负方向放置的,所以能看到原点处的正方体。

  将照相机的位置向右移动1个单位:

var camera = new THREE.OrthographicCamera(-2,2,1.5,-1.5,1,10);camera.position.set(1,0,5);

  照相机面对着物体,所以照相机右移,所照的物体向左移:

  4.3 改变视景体位置

  将视景体设置的更靠右:

var camera = new THREE.OrthographicCamera(-1,3,1.5,-1.5,1,10);camera.position.set(1,0,5);

  和右移照相机一样。

  4.4 改变照相机角度

camera.position.set(4,-3,5);camera.lookAt(new THREE.Vector3(0, 0, 0));

  但是现在照相机沿z轴负方向观察的,因此观察不到正方体,只看到一片黑。我们可以通过lookAt函数指定它看着原点方向:

camera.lookAt(new THREE.Vector3(0, 0, 0));

  注意,lookAt函数接受的是一个THREE.Vector3的实例,不要写成camera.lookAt(0, 0, 0)。

  下一篇会介绍透视投影照相机

 

  整理自张雯莉《Three.js入门指南》

  其他参考:投影中的正交和透视

 

 

转载于:https://www.cnblogs.com/xulei1992/p/5707733.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430341.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos删除文件夹_等保测评主机安全之centos密码长度

密码长度&#xff0c;作为等级保护主机测评项里中密码复杂度要求之一&#xff0c;是必须要查的。在《等级测评师初级教程》里&#xff0c;对于密码长度的设置指向了/etc/login.defs里的PASS_MIN_LEN字段。# PASS_MIN_LEN Minimum acceptable password length.PASS_MIN_LEN …

Activity的四种启动模式-图文并茂

1、对于使用standard 模式的活动&#xff0c;系统不会在乎这个活动是否已经在返回栈中存在&#xff0c;每次启动都会创建该活动的一个新的实例。例如A启动A&#xff0c;A再接着启动A&#xff0c;A继续启动A&#xff0c;然后再分别出栈&#xff0c;如图所示2、当活动的启动模式指…

ajax如何提交多表单的值_25 HTML5表单基本控件(二)

成长是一辈子的事儿&#xff01;大家好&#xff01;我是时问新。分享前端、Python等技术&#xff0c;以及个人成长路上的那些事儿。密码框使用标签&#xff0c;把标签上的type属性的值&#xff0c;设置为"password"&#xff0c;就可以创建密码框。密码框和单行文本框…

android_studio上传svn的时候那些不提交

buid文件夹不需要提交 转载于:https://www.cnblogs.com/YangBinChina/p/5708510.html

python语音分割_用7行Python代码构建自己的有声读物

点击关注我哦欢迎关注 “小白玩转Python”&#xff0c;发现更多 “有趣”有声读物是我们可以通过音频听取一本书或者其他作品的内容&#xff0c;是现下一种很受欢迎的阅读方式。类似的APP有&#xff1a;喜马拉雅、得到和樊登读书等。但是如果你有一本pdf格式的书籍&#xff0c;…

stata生成脉冲响应图怎么导出_Stata:面板VAR模型(pvar2命令)

&#x1f308;2021年寒假Stata研讨班&#xff1a;高级计量经济学及Stata应用研讨班&#x1f449;2021空间计量研讨班&#xff1a;空间计量及Geoda、Stata、ArcGis、Matlab应用PVAR这个程序最初是由Inessa Love编写的。它允许用户估计面板向量自回归和产生方差分解和脉冲响应函数…

一台电脑同时启动多个java_如何在一台同时登录多个微信?

点击上方蓝字关注我相信大家对手机上的微信双开并不陌生&#xff0c;很多人由于工作需要&#xff0c;需要多开一个甚至多个微信。对于安卓手机来说&#xff0c;双开微信并不是什么难事。现在大部分国产安卓手机都自带微信双开功能(一般在设置里面搜索“分身”或者“双开”就能找…

利用Python进行数据分析(1) 简单介绍

一、处理数据的基本内容 数据分析 是指对数据进行控制、处理、整理、分析的过程。 在这里&#xff0c;“数据”是指结构化的数据&#xff0c;例如&#xff1a;记录、多维数组、Excel 里的数据、关系型数据库中的数据、数据表等。 二、说说 Python 这门语言 Python 是现在最受…

grep, egrep, fgrep笔记

grep, egrep, fgrep grep: 根据模式搜索文本&#xff0c;并将符合模式的文本行显示出来。Pattern: 文本字符和正则表达式的元字符组合而成匹配条件grep [options] PATTERN [FILE...] -i&#xff1a;不区分大小写 --color -v: 显示没有被模式匹配到的行 -o&#…

ArcGIS for Desktop入门教程_第八章_Desktop学习资源 - ArcGIS知乎-新一代ArcGIS问答社区...

ArcGIS for Desktop入门教程_第八章_Desktop学习资源 - ArcGIS知乎-新一代ArcGIS问答社区 原文:ArcGIS for Desktop入门教程_第八章_Desktop学习资源 - ArcGIS知乎-新一代ArcGIS问答社区1 学习资源用户在学习和应用过程中&#xff0c;可以参考的资源如下&#xff1a;1. ArcGIS资…

amd sata controller下载_AMD发布全新锐龙芯片组驱动:告别卡死、报错

AMD今天发布了全新的锐龙平台芯片组驱动&#xff0c;版本号2.04.04.111&#xff0c;从界面到功能都全面升级&#xff0c;并修复了此前存在的多个严重Bug。新驱动重新设计了安装界面&#xff0c;借鉴了Radeon Adrenalin 2020肾上腺素显卡驱动的诸多元素&#xff0c;更加时尚美观…

mysql数据库基础的简单操作指南

最近在学习mysql,本文是做的关于mysql学习的笔记&#xff0c;跟大家分享一下&#xff0c;希望对大家学习mysql知识有所助益。mysql现在几乎已经成了网站建设的主流数据库&#xff0c;很多php网站系统都采用了mysql数据库。比mssql最大的优势在于开源&#xff0c;免费。希望与大…

kill 进程_结束进程,查看后台进程

有一些进程想要结束怎么办呢&#xff1f;进程的优先是怎样的呢?如何查看后台正在运行的进程呢&#xff1f;下面我就来讲讲给进程发送信号(kill -l列出所有支持的信号)[rootqianfeng ~]# kill -l 编号 信号名1) SIGHUP 重新加载配置2) SIGINT 键盘中断CtrlC3) SIGQUIT 键盘退出…

软碟通

转载于:https://www.cnblogs.com/jcfxl/p/5739741.html

controller调用controller的方法_SpringCloud(5):Feign整合Ribbon和Hystrix来进行远程调用与服务熔断...

Feign前面我们虽然使用了Ribbon和Hystrix进行了负载均衡和服务熔断&#xff0c;但是我们的消费方代码中由于要调用提供方的服务&#xff0c;比如&#xff1a;String user this.restTemplate.getForObject("http://service-provider/user/" id, String.class);使用了…

vba excel 退出编辑状态_VBA小常识(15)—Application对象

VBA小常识&#xff08;15&#xff09;—Application对象学习自杨洋老师《全民一起学VBA》Application是位于最顶端的对象&#xff0c;代表excel程序本身&#xff0c;所有对象都属于它。1. application.cells当前处于激活状态的工作表&#xff0c;即“活动工作表”的单元格。此时…

c++ stack 遍历_划重点啦!带你解读图的两种遍历方式

01知识框架02图的遍历1深度优先遍历基本思想&#xff1a;首先访问图中起始顶点v&#xff0c;然后由v出发&#xff0c;访问与v邻接且未被访问的顶点再访问与v相邻且未被访问的顶点 w1...重复上述过程。当不能再继续向下访问时&#xff0c;依次退回到最近被的问的顶点&#xff0c…

for循环延时_单片机的独立按键学习,实现60秒循环数字的启动暂停与清零

想要学习单片机必须要准备单片机开发板一块&#xff0c;和单片机C语言版本的书籍&#xff0c;我会把每天录制视频的源代码到头条&#xff0c;并且录制相同文章名字视频到西瓜视频&#xff0c;如果你再学习独立按键这一块有不明白的地方可以点开我的头像&#xff0c;进入我的主页…

mysql创建全外连接的视图_关系型数据库 MySQL 表索引和视图详解

原创&#xff1a; JiekeXu JiekeXu之路 一、索引数据库索引通俗的讲就是和书本的目录一样&#xff0c;主要就是为了提高查询数据的效率。由于数据存储在数据库表中&#xff0c;所以索引是创建在数据库表对象上&#xff0c;由表中的一个字段或多个字段生成的键组成&#xff0c;这…

FatMouse's Speed hdu 1160(动态规划,最长上升子序列+记录路径)

http://acm.hdu.edu.cn/showproblem.php?pid1160 题意&#xff1a;现给出老鼠的体重与速度&#xff0c;要求你找出符合要求的最长子序列。 要求是 W[m[1]] < W[m[2]] < ... < W[m[n]]&#xff08;体重&#xff09; && S[m[1]] > S[m[2]] > ... > S[…