理解Three.js的相机

news/2024/7/26 11:05:41/文章来源:https://blog.csdn.net/u012148903/article/details/137005292

大家都知道我们生活中的相机,可以留下美好瞬间。那Three.js的相机是什么呢?Three.js创建的场景是三维的,而我们使用的显示器显然是二维的,相机就是抽象的定义了三维空间到二维显示器的投影方式。Three.js常见的相机有两类:正交投影vs透视投影。那这两类相机又有什么区别呢?下面用案例理解一下。

知识点1、什么是正交投影照相机;2、什么是透视投影照相机;3、正交投影和透视投影照相机的对比;

正交投影照相机

正交投影照相机就像在数学几何学课上老师画的效果,对于在三维空间内平行的线,投影到二维空间中也一定是平行的。

它的构造函数为:

THREE.OrthographicCamera(left,right,top,bottom, near, far);

六个参数分别代表正交投影照相机拍摄到的六个面的位置。六个面围成的叫视景体。near表示近平面与相机镜头中心点的垂直距离;far表示远平面与相机中心点的垂直距离;而照相机不应该拍摄到其后方的物体,故near、far均为正值,且far > near。

大家还记得小编之前写的Hello World嘛?修改下这个案例,初始化正交投影照相机:

//初始化正交投影照相机
function initOrthographicCamera() {//实例化正交投影照相机camera = new THREE.OrthographicCamera(-3, 3, 2, -2, 1, 10);//设置照相机的位置camera.position.set(0,0,5);
}

canvas的宽度设置为了600px*400px,若要保持横竖比例,照相机的水平距离是6、垂直距离是4(小编理解的类似给DOM元素设置背景图片一样,图片的宽高比要与元素的宽高比一致,不然图片会变形)。初始化几何体,使用wireframe而不是实心的材质,这样可以看到正方体后面的边框: 

//创建材质
material = new THREE.MeshNormalMaterial({wireframe:true});

可以看到后面的边框都重叠了,我们试着设置照相机的位置或照相机实例化参数left、right、top、bottom,看看图案的变化: 

//初始化正交投影照相机(设置照相机的位置)
function initOrthographicCamera() {//实例化正交投影照相机camera = new THREE.OrthographicCamera(-3, 3, 2, -2, 1, 10);//设置照相机的位置(右上角移动)camera.position.set(1, 0.5, 5);
}

//初始化正交投影照相机(修改实例化参数)
function initOrthographicCamera() {//实例化正交投影照相机camera = new THREE.OrthographicCamera(-2, 4, 2.5, -1.5, 1, 10);//设置照相机的位置camera.position.set(0, 0, 5);
}

设置照相机的位置或修改照相机实例化参数,都能得到同样的结果。然后通过lookAt函数指定它看着原点方向: 

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

设置相机位置后使用lookAt 

设置相机初始参数后使用lookAt

相机位置变化后(右上角轻微移动),观察物体的方向也改变了,故设置它看向原点方向,会有俯视感,看到更多的线;而设置相机初始化参数,只是改变了视景体,相机位置并未变化,一直看向原点,因此无变化。

透视投影照相机

透视投影照相机是类似人眼在真实世界中看到的有“近大远小”的效果。

它的构造函数为:

THREE.PerspectiveCamera(fov, aspect, near, far);

四个参数分别为fov是视景体竖直方向上的视角;aspect等于width / height,是照相机水平方向和竖直方向长度的比值,通常设为Canvas的横纵比例;near和far分别是照相机到视景体最近、最远的距离,均为正值,且far>near。

用刚才的例子,初始化一个透视投影:

//初始化透视投影照相机
function initPerspectiveCamera() {//实例化透视投影照相机camera = new THREE.PerspectiveCamera(45, 600/400, 1,10);//设置照相机的位置camera.position.set(0,0,5);
}

可以清晰的看到正方体的各条边,呈现也是近大远小。改变一下初始化参数fov的值: 

//实例化透视投影照相机
camera = new THREE.PerspectiveCamera(80, 600/400, 1,10); 

物体本身没有变小,但视角越大,视景体就越大,物体相对视景体就变小了。那大家猜猜下图是如何得到的呢? 

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

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

相关文章

vscode 重命名很慢或失败 vscode renames are slow

网上问题, 插件问题(我遇见的排除,不是)被其他程序占用问题,(我这边是这个) 解决方案: 打开【资源管理器】,使用火绒 或其他软件,查看文件夹 or 文件 被哪个…

深度学习500问——Chapter05: 卷积神经网络(CNN)(4)

文章目录 5.18 卷积神经网络凸显共性的方法 5.18.1 局部连接 5.18.2 权值共享 5.18.3 池化操作 5.19 全连接、局部连接、全卷积与局部卷积 5.20 局部卷积的应用 5.21 NetVLAD池化 参考文献 5.18 卷积神经网络凸显共性的方法 5.18.1 局部连接 我们首先了解一个概念&#xff0c…

创建spring boot+Mybatis项目全流程

创建spring bootMybatis项目全流程 第一步:打开IDEA 【New -> Project】 第二步:选择Spring Initializr 第三步:输入Name以及相关配置,可以参考截图 注意:Server URL 出可以替换为阿里云镜像【https://start.ali…

关于 QSound播放wav音频文件,播放失败“using null output device, none available” 的解决方法

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/137264493 红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…

语义分割——自动驾驶鱼眼数据集

一、重要性及意义 环境感知:语义分割技术能够精确识别道路、车辆、行人、障碍物、交通标志和信号等各种交通场景元素。这为自动驾驶系统提供了丰富的环境信息,有助于车辆准确理解周围环境的结构和动态变化。决策规划:基于语义分割的结果&…

Python中os.environ基本介绍及使用方法

文章目录 python中os.environos.environ简介os.environ进行环境变量的增删改查 python中os.environ的使用详解1. 简介2. key 字段详解2.1 常见 key 字段 3. os.environ.get() 用法4. 环境变量的增删改查和判断是否存在4.1 新增环境变量4.2 更新环境变量4.3 获取环境变量4.4 删除…

vCenter Server出现no healthy upstream的解决方法

https://blog.51cto.com/wangchunhai/4907250 访问vCenter 7.0 地址后,页面出现“no healthy upstream”,无法正常登录vCenter,重启后依旧如此,该故障的前提是没有对vCenter做过任何配置,如下图所示。 尝试登录"VMware vCen…

第五节 LLava模型数据处理源码解读(input_ids/labels/attention_mask/image,上篇)

文章目录 前言一、torch.nn.utils.rnn.pad_sequence与torch.ne函数1、torch.nn.utils.rnn.pad_sequence函数功能解读1、函数原理2、demo示列3、demo结果对比 2、torch.ne函数介绍 二、图像与语言加载1、语言处理tokenizer的来源2、图像处理process的来源3、数据加工方法 三、数…

大学html作业-个人简历静态网站(免费)

大学html作业-个人简历静态网站(免费) 源码来自githab,有些简单的问题我都修复了。大家可以直接去找原作者的源码,如果githab打不开就从我下载的网盘里下载吧。 效果

uniapp-打包app-图标配置

依次找到manifest->App图标配置,然后点击浏览,从本地文件夹中选择你们项目的logo,然后点击自动生成所有图标并替换,即可:

Redis常用命令补充和持久化

一、redis 多数据库常用命令 1.1 多数据库间切换 1.2 多数据库间移动数据 1.3 清除数据库内数据 1.4 设置密码 1.4.1 使用config set requirepass yourpassword命令设置密码 1.4.2 使用config get requirepass命令查看密码 二、redis高可用 2.1 redis 持久化 2.1.1 持…

用于无人机小型化设计的高精度温补晶振

用于无人机小型化设计的高精度温补晶振:TG2016SMN和TG2520SMN。无人机的发展可以说是非常的迅速,在安防,农业,交通,电力,直播等领域经常能看到无人机大显身手。无人机的应用场最是非常的广泛,功能更强&…

浏览器工作原理与实践--宏任务和微任务:不是所有任务都是一个待遇

在前面几篇文章中,我们介绍了消息队列,并结合消息队列介绍了两种典型的WebAPI——setTimeout和XMLHttpRequest,通过这两个WebAPI我们搞清楚了浏览器的消息循环系统是怎么工作的。不过随着浏览器的应用领域越来越广泛,消息队列中这…

数据可视化:智慧农业发展的催化剂

数据可视化在智慧农业中发挥着不可替代的作用。随着科技的不断进步,农业领域也在不断探索创新,以提高生产效率、优化资源利用,从而实现可持续发展。而数据可视化技术的应用,则成为了实现智慧农业目标的重要途径。下面我就从可视化…

解决vue热加载卡顿缓慢

安装插件:babel-plugin-dynamic-import-node npm install babel-plugin-dynamic-import-node --save-dev配置babel.config.js文件 env: {development: {plugins: [dynamic-import-node]}}重启项目,完成

Codeforces Round 932 (Div. 2) ---- E. Distance Learning Courses in MAC ---- 题解

E. Distance Learning Courses in MAC: 题目大意: 思路解析: // 对于这种二进制多个数计算答案,我们应该灵敏的想到是否可以通过枚举二进制位来计算答案。 就是对每一个查询找出或和的最大值,那我们想xi 和 yi中哪些…

iOS开发进阶(十三):脚手架创建iOS项目

文章目录 一、前言二、xcode-select 命令三、拓展阅读 一、前言 项目初期,需要搭建项目基本框架,为此离不开辅助工具,即脚手架。当然,IDE也可以实现新建空白项目,但是其新建后的项目结构可能不符合预期设计&#xff0…

GPT4解除限制使用次数了!GPT5预计要推出了!

今天登录GPT Plus的时候,出现了如下提示: With DALLE,browing and analysis Usage limits may apply GPT4已经没有了数量和时间限制的提示。 更改前:每 3 小时限制 40 次(团队计划为 100 次);更改后&#…

浏览器工作原理与实践--WebAPI:XMLHttpRequest是怎么实现的

在上一篇文章中我们介绍了setTimeout是如何结合渲染进程的循环系统工作的,那本篇文章我们就继续介绍另外一种类型的WebAPI——XMLHttpRequest。 自从网页中引入了JavaScript,我们就可以操作DOM树中任意一个节点,例如隐藏/显示节点、改变颜色、…

36.not comply with the UI component syntax不允许在UI描述里直接使用

不允许在UI描述里直接使用&#xff0c;但可以在方法或者函数里使用 not comply with the UI component syntax. <etsLint> 这里ok: