[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.mzph.cn/news/18239.shtml

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

相关文章

ARM单片机中断处理过程解析

前言 中断,在单片机开发中再常见不过了。当然对于中断的原理和执行流程都了然于胸,那么对于ARM单片机中断的具体处理行为,你真的搞清楚了吗? 今天来简单聊一聊,ARM单片机中断处理过程中的具体行为是什么样的&#xf…

一张图像相当于 16×16 个单词:用于大规模图像识别的 Transformers(视觉 Transformers)

一张图片值多少字? 一张图片胜过千言万语?无法用言语完整地描述一幅图画。但论文告诉我们一张图像相当于 1616 个单词。在这篇博客中,我将解释使用 Transformer 进行图像识别。这是一篇非常有趣的论文, 这篇论文有什么特别之处? 它很特别,因为这里我们不会使用任何卷积网…

【Linux】配置java

yum -y install java-1.8.0-openjdk-devel.x86_64 可以直接使用 由于后续需要安装一些软件需要JAVA_HOME 所以需要配置JAVA_HOME 用yum下载的软件的目录是软连接的 which javals -lrt /usr/bin/javals -lrt /etc/alternatives/java /etc/profile 会自动加载/etc/profile.d…

vite+typescript项目 :找不到模块“./***.vue”或其相应的类型声明——解决方案

vue3ts报错&#xff1a; 找不到模块“./App.vue”或其相应的类型声明。ts(2307) 解决方法&#xff1a; 1、在src文件夹找到 vite-env.d.ts 加入以下代码&#xff1a; declare module *.vue {import type { DefineComponent } from vueconst vueComponent: DefineComponent<…

django使用ztree实现树状结构效果,子节点实现动态加载(l懒加载)

一、实现的效果 由于最近项目中需要实现树状结构的效果,考虑到ztree这个组件大家用的比较多,因此打算在django项目中集成ztree来实现树状的效果。最终实现的示例效果如下: 点击父节点,如果有子节点,则从后台动态请求数据,然后显示出子节点的数据。 二、实现思路 …

蓝桥杯上岸每日N题 第六期(求阶乘)!!!

蓝桥杯上岸每日N题第六期 ❗️ ❗️ ❗️ 同步收录 &#x1f447; 蓝桥杯上岸必背&#xff01;&#xff01;&#xff01;(持续更新中~) 大家好 我是寸铁&#x1f4aa; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &#x1f64f; 距离蓝桥杯省赛倒数…

AndroidBanner - ViewPager

解决banner 不可见依旧轮播的问题 思考一下&#xff1a;什么时候可以轮播&#xff0c;什么时候不可以轮播 当Banner添加到屏幕上&#xff0c;且对用户可见的时候&#xff0c;可以开始轮播 当Banner从屏幕上移除&#xff0c;或者Banner不可见的时候&#xff0c;可以停止轮播 当…

Kafka系列之:安装Know Streaming详细步骤

Kafka系列之:安装Know Streaming详细步骤 一、相关技术博客二、安装elasticsearch1.下载elasticsearch2.创建数据目录3.创建es用户4.修改最大文件数5.解压elasticsearch6.赋予es用户目录权限7.修改es配置8.切换es用户启动elasticsearch三、安装KnowStreaming1.下载KnowStreami…

电影推荐系统】系统初步搭建及离线个性化推荐

上篇博文我们已经写完统计推荐部分&#xff0c;现在我们将使用VueElement-uiSpringBoot来快速搭建系统&#xff0c;展示出电影&#xff0c;并介绍个性化推荐部分。 1 系统页面设计 初步是想设计一个类似豆瓣电影推荐系统 用户登陆后&#xff0c;可以查看高分电影可以查看推荐…

P2404 自然数的拆分问题

题目 思路 最简单的dfs题之一 只需要一点点小优化 代码 #include<bits/stdc.h> using namespace std; const int maxn55; int n; int ans[maxn],s; void print(int tot) { for(int i1;i<tot-1;i) cout<<ans[i]<<""; cout<<ans[tot-1]&…

微信小程序,商城底部工具栏的实现

效果演示&#xff1a; 前提条件&#xff1a; 去阿里云矢量图标&#xff0c;下载8个图标&#xff0c;四个黑&#xff0c;四个红&#xff0c;如图&#xff1a; 新建文件夹icons&#xff0c;把图标放到该文件夹&#xff0c;然后把该文件夹移动到该项目的文件夹里面。如图所示 app…

【Redis深度专题】「核心技术提升」探究Redis服务启动的过程机制的技术原理和流程分析的指南(集群指令分析—实战篇)

探究Redis服务启动的过程机制的技术原理和流程分析的指南&#xff08;集群指令分析—下篇&#xff09; Cluster XX的集群指令&#xff08;扩展&#xff09;写入记录主节点和备节点切换-CLUSTER FAILOVER新加入master节点新加入slave节点为slave节点重新分配master分配哈希槽删除…

jmeter之接口测试(http接口测试)

基础知识储备 一、了解jmeter接口测试请求接口的原理 客户端--发送一个请求动作--服务器响应--返回客户端 客户端--发送一个请求动作--jmeter代理服务器---服务器--jmeter代理服务器--服务器 二、了解基础接口知识&#xff1a; 1、什么是接口&#xff1a;前端与后台之间的…

动手学深度学习(一)预备知识

目录 一、数据操作 1. N维数组样例 2. 访问元素 3. 基础函数 &#xff08;1&#xff09; 创建一个行向量 &#xff08;2&#xff09;通过张量的shape属性来访问张量的形状和元素总数 &#xff08;3&#xff09;reshape()函数 &#xff08;4&#xff09;创建全0、全1、…

在springboot项目中使用策略工厂模式

在springboot项目中使用策略工厂模式 策略接口类 package cn.test.ext;public interface ITestStrategy {void execTestMethod(); }策略实现类 package cn.test.ext.beanlife;import cn.test.ext.ITestStrategy; import cn.test.ext.MyStrategyFactory; import lombok.exter…

【Spring】Spring之推断构造方法源码解析

Spring的Bean生命周期中&#xff0c;需要通过构造方法来实例化对象&#xff0c;如果构造方法由多个或者手动指定构造方法&#xff0c;该如何选择用来实例化Bean的构造方法呢。 构造方法选择 一个构造方法时&#xff1a;如果只有一个无参的构造方法&#xff0c;那么实例化就只…

CorelDraw怎么做立体字效果?CorelDraw制作漂亮的3d立体字教程

1、打开软件CorelDRAW 2019&#xff0c;用文本工具写上我们所需要的大标题。建议字体选用比较粗的适合做标题的字体。 2、给字填充颜色&#xff0c;此时填充的颜色就是以后立体字正面的颜色。我填充了红色&#xff0c;并加上了灰色的描边。 3、选中文本&#xff0c;单击界面左侧…

java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

&#xfeff; Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下&#xff1a; 首页 工作台&#xff1a;待办工作、消息通知、预警信息&#xff0c;点击可进入相应的列表 项目进度图表&#xff1a;选择&#xff08;总体或单个&am…

Metric3D:Towards Zero-shot Metric 3D Prediction from A Single Image

参考代码&#xff1a;Metric3D 介绍 在如MiDas、LeReS这些文章中对于来源不同的深度数据集使用归一化深度作为学习目标&#xff0c;则在网络学习的过程中就天然失去了对真实深度和物体尺寸的度量能力。而这篇文章比较明确地指出了影响深度估计尺度变化大的因素就是焦距 f f f…

驱动开发-按键中断

编写LED灯的驱动&#xff0c;使用GPIO子系统&#xff0c;里面添加按键的中断处理 1.应用程序发送指令控制LED亮灭 2.按键1 按下&#xff0c;led1电位反转 按键2按下&#xff0c;led2电位反转 按键3 按下&#xff0c;led3电位反转 功能函数 #include<stdlib.h> #inclu…