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 …

【原创】Android之修改AlertDialog对话框及使用系统Holo风格

前一阵子在做伪装密码的功能&#xff0c;需要使用系统的对话框&#xff0c;对话框需要加长按事件等等。哈&#xff0c;直接上代码&#xff0c;我是比较喜欢直接看代码的。 1. 获取AlertDialog的Title final int alertTitleId getResources().getIdentifier( "alertTitle…

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;就可以创建密码框。密码框和单行文本框…

Java设计模式笔记(6)观察者模式

观察者模式&#xff0c;也叫发布订阅模式&#xff0c;定义对象之间的一种一对多的依赖关系&#xff0c;使得每当一个对象改变状态&#xff0c;则所有依赖于它的对象都会得到通知并被自动更新。 观察者模式的几个角色&#xff1a; Subject被观察者&#xff1a;定义被观察者必须…

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

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

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

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

循环所有数据库执行脚本

这里仅仅提供一个事例&#xff0c;抛砖引玉&#xff0c;如果对您起到丁点作用&#xff0c;那是在下的荣幸 select name into #dbname from sys.databases where name like edb_a% and name not like %_dw select name,ROW_NUMBER() over (order by name asc) from #dbname d…

Java设计模式笔记(7)适配器模式

适配器模式定义&#xff1a;将一个类的接口变成客户端所期待的另一种接口&#xff0c;从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作。适配器模式&#xff08;Adapter Pattern&#xff09;&#xff0c;适配器模式又叫做变压器模式&#xff0c;也叫做包装模式&…

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

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

Java设计模式笔记(8)装饰模式

装饰模式&#xff1a;动态地给一个对象添加一些额外的职责&#xff08;以对客户端透明的方式扩展对象的功能&#xff09;&#xff0c;就增加功能来说&#xff0c;装饰模式相比生成子类更为灵活&#xff0c;是继承关系的一个替代方案。 装饰模式的四个角色&#xff1a; 抽象构…

python中的引用怎么理解_python 引用和对象理解

今天浏览博客的时候看到这么一句话&#xff1a; python中变量名和对象是分离的&#xff1b;最开始的时候是看到这句话的时候没有反应过来。决定具体搞清楚一下python中变量与对象之间的细节。&#xff08;其实我感觉应该说 引用和对象分离 更为贴切&#xff09; 从最开始的变量…

取MapString,sitemap中的全部key

Map<String,Site> siteMap conference.getSiteList(); Set<String> keyList siteMap.keySet();//得到key集合 Iterator<String> it keyList.iterator();//遍历key while(it.hasNext()){ ConfModelVsDept ConfModelVsDept new ConfModelVsDept(); String …

AIDL Service,跨进程调用Services

一、AIDL Service简介 Android系统中&#xff0c;各个应用都运行在自己的进程中&#xff0c;进程之间一般无法直接进行通信&#xff0c;为了实现进程通信&#xff0c;Android提供了AIDL Service&#xff1b; 二、与本地Service不同 本地Service&#xff1a;直接把IBinder对象…

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

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

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

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

python每周小测验答案_python第一周小测验答案Centos下更新Python版本

Centos下更新Python版本&#xff0c;有需要的朋友可以参考下。 注意&#xff1a;更新python千万不要把老版本的删除&#xff01;新老版本是可以共存的&#xff0c;很多基本的命令、软件包都要依赖预装的老版本python的&#xff0c;比如yum。 更新python&#xff1a; 第1步&…

【复习】使用 SQLiteDatabase 操作 SQLite 数据库

Android提供了一个名为SQLiteDatabase的类&#xff0c;该类封装了一些操作数据库的API&#xff0c;使用该类可以完成对数据进行添加(Create)、查询(Retrieve)、更新(Update)和删除(Delete)操作&#xff08;这些操作简称为CRUD&#xff09;。对SQLiteDatabase的学习&#xff0c;…

grep, egrep, fgrep笔记

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

python可以开多少线程_python多线程详解

python多线程详解 一、线程介绍 什么是线程 线程&#xff08;Thread&#xff09;也叫轻量级进程&#xff0c;是操作系统能够进行运算调度的最小单位&#xff0c;它被包涵在进程之中&#xff0c;是进程中的实际运作单位。线程自己不拥有系统资源&#xff0c;只拥有一点儿在运行中…