[threejs]相机与坐标

搞清相机和坐标的关系在threejs初期很重要,否则有可能会出现写了代码,运行时一片漆黑的现象,这种情况就有可能是因为你相机没弄对。

先来看一下threejs中的坐标(世界坐标)

坐标轴好理解,大家只需要知道在three中不同颜色代表的轴就行,再就是坐标有正负之分。向前,向右,向上(天)的为正数,相反的为负数。

看一下相机:

 threejs中的相机(3维建模软件的相机同理)有near和far概念,他们是相机镜头所在方向的前方的距离,只有near和far之间部分物体,才会显示出来(这就是为什么图3只显示了盒子内部的一部分)。后面我会用专题来介绍这个东西。

 

下面是为了帮助大家理解通过建模软件截取的图片,通过前视图的视角来介绍相机和坐标由于距离之间的效果。

这里用的是世界坐标,蓝色的z轴,红色为x轴,绿色为y轴。

灰色的是立方体盒子,黑黄边的三角是相机

图1:设置相机在z轴5米的,通过前视图可以看出相机在z轴上,头朝下正对着盒子顶部面。由于相机镜头是长方形并且离着盒子比较远,所以最后一个图会发现镜头没有完全包裹住盒子顶部,相机智能拍摄到盒子顶面部分(想象一下距离与可视范围的关系)。

图2:将同样放在z轴上的相机与盒子的距离调整到3米,从前视图可以看出,与图1相比,相机距离与盒子更近了,效果就是由于相机离着盒子顶面太近了,相机无法完全看到盒子整个顶部面,只能拍摄到盒子顶面的一部分了。

图3:我们将相机放到坐标的中心点,也就是相机的那个橘黄色小圆点与坐标的中心点重合,这时相机已经穿透到盒子内部了,有意思的事情发生了,图1图2看到的只是一个面,现在我们能看到的不再是一个面了,而是5个面了,3D世界产生了。

通过上面3个图可以看出:在3维世界中,你能看到什么跟相机与物体所在的坐标位置是有关系的。不通的位置导致有可能你看到的物体是2维的后者是3维的。

下面,通过运行threejs的代码,再来看一下相机与坐标的关系:

我们通过const axesHelper = new THREE.AxesHelper();来生成一个坐标系对象,来帮助我们理解坐标和相机。

代码1:

 上面代码中,我在页面上添加了一个坐标,但奇怪的是为什么一边漆黑呢?问题点就在于默认相机与坐标系的圆点重合了,相机镜头默认沿着z轴朝下,所以坐标系不在相机的可是范围之内(可以理解为相机镜头进地底下了)。如下图:

所以要想显示出坐标系,只要把相机向z轴正向移动(向天),让镜头在坐标系之上就行了,看下面代码

代码2:

 现在我打开代码19行的注释,让相机向z正方向移动(向天),就会看到坐标系了。绿色是y轴,红色是x轴。(思考1:如果把代码19行改成camera.position.x=5能看到坐标系么?最后给出答案)

为什么看不到蓝色的z轴呢?想象一下,你现在在很高的地方拿着相机朝着地面上拍摄,相机镜头本身就在z轴上,所以自然看不到代表z轴这条线了。

如果想看到z轴怎么办呢?只要让镜头从别的位置对着z轴就行了,如下图:

相机沿着x轴移动一段距离了,然后让镜头朝着原点就可实现。

看下面代码:

 通过代码19行,将相机位置沿着x轴进行了5米的移动,然后通过代码20行将相机镜头朝向坐标原点,然后就能看到蓝色的z轴了,但是x轴是不是就又没了,至于原因如果不懂请留言。

那么现在想3个坐标系都看到咋办呢?在移动下相机位置不就成了,如下图:

 看代码的实现和效果:

 代码中通过19到21行设置相机位置,然后可以看到3个坐标系了。大家可以尝试修改和注释19到21行的代码来查看区别,有助于你理解相机和坐标的关系。

下面再看一个问题,是不是感觉显示的坐标系有点小呀,咋办呢?我们说过相机镜头离着物体越近显示的看到的物体就越大,同理,我们让相机离着坐标系近一些不就成了,修改代码19到21行,如下:

 由于相机离着坐标系近了,显示出的坐标轴就大了。

坐标与相机的关系就介绍到这了,很好的理解相机与坐标位置还有相机镜头朝向,对于后面开发threejs至关重要,否则你很难理解一些3D效果的显示问题。

最后,回答【思考1】的答案:

如果将代码2中的19行的camera.position.z=5改成camera.position.x=5最后还是会看不到坐标系,还是一片漆黑,用下图说明原因:

 相机在x轴移动,但是镜头默认还是朝下的(z轴),这时镜头看到的还是地,不是坐标轴这个对象,所以一片漆黑。

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

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

相关文章

mysql修改密码

文章目录 一、修改密码方式一:用SET PASSWORD命令方式二:用mysqladmin方式三:使用alter user语句 二、修改密码可能遇到的问题ERROR 1396 (HY000): Operation ALTER USERERROR 1064 (42000) 在mysql使用过程中,我们可能经常会对my…

pytorch的CrossEntropyLoss交叉熵损失函数默认reduction是平均值

pytorch中使用nn.CrossEntropyLoss()创建出来的交叉熵损失函数计算损失默认是求平均值的,即多个样本输入后获取的是一个均值标量,而不是样本大小的向量。 net nn.Linear(4, 2) loss nn.CrossEntropyLoss() X torch.rand(10, 4) y torch.ones(10, dt…

机器学习笔记之优化算法(六)线搜索方法(步长角度;非精确搜索;Glodstein Condition)

机器学习笔记之优化算法——线搜索方法[步长角度,非精确搜索,Glodstein Condition] 引言回顾: Armijo Condition \text{Armijo Condition} Armijo Condition关于 Armijo Condition \text{Armijo Condition} Armijo Condition的弊端 Glodstein…

海外版金融理财系统源码 国际投资理财系统源码 项目投资理财源码

海外版金融理财系统源码 国际投资理财系统源码 项目投资理财源码

WebRTC 之音视频同步

在网络视频会议中, 我们常会遇到音视频不同步的问题, 我们有一个专有名词 lip-sync 唇同步来描述这类问题,当我们看到人的嘴唇动作与听到的声音对不上的时候,不同步的问题就出现了 而在线会议中, 听见清晰的声音是优先…

【安装】阿里云轻量服务器安装Ubuntu图形化界面(端口号/灰屏问题)

阿里云官网链接 https://help.aliyun.com/zh/simple-application-server/use-cases/use-vnc-to-build-guis-on-ubuntu-18-04-and-20-04 网上搜了很多教程,但是我没在界面看到有vnc连接,后面才发现官网有教程。 其实官网很详细了,不过这里还是…

18、springboot默认的配置文件及导入额外配置文件

springboot默认的配置文件及导入额外配置文件 ★ Spring Boot默认加载的配置文件: (1) 类加载路径(resources目录)application.properties|yml (相当于JAR包内)optional: classpath:/ (2)类加…

钉钉对接打通金蝶云星空获取流程实例列表详情(宜搭)接口与其他应收单接口

钉钉对接打通金蝶云星空获取流程实例列表详情(宜搭)接口与其他应收单接口 对接系统钉钉 钉钉(DingTalk)是阿里巴巴集团专为中国企业打造的免费沟通和协同的多端平台,提供PC版,Web版和手机版,有考…

Alchemy Catalyst 2023 crack

Alchemy Catalyst 2023 crack Alchemy CATALYST是一个可视化本地化环境,支持本地化工作流程的各个方面。它帮助组织加快本地化进程,比竞争对手更快地进入新市场,并为他们创造新的收入机会。 创建全球影响力 高质量的产品和服务翻译对跨国组织…

网关gateway的简介和搭建过程

目录 1.什么是网关和网关的应用情景 2.网关是如何演化来的,在微服务中有什么作用? 3.网关的基本功能 4.Spring Cloud gateway的发展史 5.和网关类似的功能组件: 6.为什么微服务当中一定要有网关 7.微服务网关的优点 8.gateway的搭建过程…

C#核心知识回顾——19.插入排序

1.插入排序的基本原理 871542639 两个区域 排序区 未排序区 用一个索引值做分水岭 未排序区元素 与排序区元素比较 插入到合适位置 直到未排序区清空 int[] arr { 8, 6, 7, 2, 9, 4 };//第一步//能取出未排序区…

【MySQL】MySQL 数据库的介绍与操作

目录 1. 登录 MySQL 数据库 2. MySQL 介绍 3. 操作数据库 1、创建数据库 2、删除数据库 3、插入数据 4、查找 5、修改数据库 4. 表的操作 1、创建表 2、查看表 3、修改表 4、删除表 写在最后: 1. 登录 MySQL 数据库 指令: mysql -h 127.…

c51单片机16个按键密码锁源代码(富proteus电路图)

注意了:这个代码你是没法直接运行的,但是如果你看得懂,随便改一改不超过1分钟就可以用 #include "reg51.h" #include "myheader.h" void displayNumber(unsigned char num) {if(num1){P10XFF;P10P11P14P15P160;}else if…

大数据概论

1、大数据概念 大数据(Big Data): 指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产 大数据主要解决,海量数据的采集、存储和分…

数据结构10 -查找_树表查找

创建二叉搜索树 二叉搜索树 二叉搜索树是有数值的了,二叉搜索树是一个有序树。 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值; 若它的右子树不空,则右子树上所有结点的值均大于它的根结点的值; 它…

SQL92 SQL99 语法 Oracle 、SQL Server 、MySQL 多表连接、Natural 、USING

SQL92 VS SQL 99 语法 92语法 内连接 from table1, table2 where table1.col table2.col 外连接 放在 从表 左连接: from table1, table2 where table1.col table2.col() 右连接: from table1, table2 where table…

解决layui框架的radio属性不显示失效问题

废话不多说 直接开干&#xff01; 1.问题描述使用layui时 2.不显示问题 纠结半天 忘记插件要刷新 步骤 3、解决方法就是&#xff1a;使用form.render() 刷新请求的界面 <script type"text/javascript">//刷新界面 所有元素layui.use(form,function(){var form …

SpringBoot 日志文件

一、日志的作用 日志是程序的重要组成部分&#xff0c;想象一下&#xff0c;如果程序报错了&#xff0c;不让你打开控制台看日志&#xff0c;那么你能找到报错的原因吗 答案是否定的&#xff0c;写程序不是买彩票&#xff0c;不能完全靠猜&#xff0c;因此日志对于我们来说&a…

MySQL语法2

DQL语句介绍 DQL是数据查询语言&#xff0c;用来查询数据库中表的记录 DQL-基本查询语句 SELECT 字段列表 FROM 表名列表 WHERE 条件列表 GROUP BY 分组字段列表 HAVIMG 分组后条件列表 ORDER BY 排列字段列表 LIMIT 分页参数 讲解过程&#xff1a;基本查询、条件查询…

【C语言进阶篇】关于指针的八个经典笔试题(图文详解)

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《C语言初阶篇》 《C语言进阶篇》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 &#x1f4cb; 前言&#x1f4ac; 指针笔试题&#x1f4ad; 笔试题 1&#xff1a;✅ 代码解析⁉️ 检验结果&…