理解Three.js的相机

news2024/10/7 19:16:50

大家都知道我们生活中的相机,可以留下美好瞬间。那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.coloradmin.cn/o/1570650.html

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

相关文章

资源分享 | 解决你的算力烦恼,平台注册送算力

前言 最近趋动云在做活动,新用户注册即可送价值70元的算力金,做满新手任务最高可领300元的算力红包,趋动云中租卡的费用如下: 1张24G的显存的卡大概是2块钱一个小时,48G的是4块钱一个小时,300算力红包能用…

【Redis】详解 Redis

Redis是一种高性能的开源键值存储数据库,它支持各种数据结构,包括字符串(strings)、哈希(hashes)、列表(lists)、集合(sets)、有序集合(sorted se…

如何借助Idea创建多模块的SpringBoot项目

目录 1.1、前言1.2、开发环境1.3、项目多模块结构1.4、新建父工程1.5、创建子模块1.6、编辑父工程的pom.xml文件 1.1、前言 springmvc项目,一般会把项目分成多个包:controler、service、dao、utl等,但是随着项目的复杂性提高,想复用其他一个模…

蓝桥集训之斐波那契前n项和

蓝桥集训之斐波那契前n项和 核心思想&#xff1a;矩阵乘法 左边求和 右边求和 得到Sn fn2 – 1 因此只要求出fn2 即可 #include <iostream>#include <cstring>#include <algorithm>using namespace std;typedef long long LL;int n,m;int A[2][2] { …

论大数据服务化发展史

引言 一直想写一篇服务化相关的文章&#xff0c;那就别犹豫了现在就开始吧 正文 作为大数据基础架构工程师&#xff0c;业界也笑称“运维Boy”&#xff0c;日常工作就是在各个机器上部署以及维护服务&#xff0c;例如部署Hadoop、Kafka、Pulsar这些等等&#xff0c;用于给公…

使用python将作图并将局部放大

此程序主要特点&#xff1a; 1、使用python画实验结果图 2、想要对大图的局部进行放大 3、有两个子图 4、子图和原图的横坐标都使用标签而不是原始的数据 代码和注释如下&#xff1a; import pandas as pd import numpy as np import matplotlib.pyplot as plt import ope…

BCLinux-for-Euler配置本地yum源

稍微吐槽一句…… 在这片土地上&#xff0c;国产化软件的大潮正在滚滚而来&#xff0c;虽然都不是真正意义上的国产化&#xff0c;但是至少壳是国产的~~~ 之前使用的Centos7的系统&#xff0c;现在都要求统一换成BCLinux-for-Euler。说实话换了之后不太适应&#xff0c;好多用习…

COCO格式转YOLO格式训练

之前就转换过好几次&#xff0c;每次换设备训练&#xff0c;由于压缩包太大&#xff0c;u盘不够用。每次都要找教程从网上再下载一遍。因此这里记录一下&#xff0c;以免下次重新找教程。 在coco数据集中&#xff0c;coco2017train或coco2017val数据集中标注的目标(类别)位置在…

Spring 详细总结

文章目录 第一章 IOC容器第一节 Spring简介1、一家公司2、Spring旗下的众多项目3、Spring Framework①Spring Framework优良特性②Spring Framework五大功能模块 第二节 IOC容器概念1、普通容器①生活中的普通容器②程序中的普通容器 2、复杂容器①生活中的复杂容器②程序中的复…

传输层 --- UDP

目录 1. 传输层是什么呢&#xff1f; 2. 再谈端口号 2.1. 端口号是什么 2.2. 协议号是什么 2.3. 认识知名端口号 2.4. 端口号的相关问题 2.4.1. 一个进程可以绑定多个端口号吗&#xff1f; 2.4.2. 一个端口号可以被多个进程绑定吗&#xff1f; 2.4.3. 为什么不使用P…

数据结构进阶篇 之 【并归排序】(递归与非递归实现)详细讲解

都说贪小便宜吃大亏&#xff0c;但吃亏是福&#xff0c;那不就是贪小便宜吃大福了吗 一、并归排序 MergeSort 1.基本思想 2.实现原理 3.代码实现 4.归并排序的特性总结 二、非递归并归排序实现 三、完结撒❀ –❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀…

如何使用单片机 pwm 控制 mos 管?

目录 选择适合的硬件 连接电路 编写代码 参考示例 程序一 程序二 测试与调试 注意事项 使用单片机&#xff08;如常见的Arduino、STM32等&#xff09;通过PWM&#xff08;脉冲宽度调制&#xff09;控制MOS管&#xff08;金属氧化物半导体场效应管&#xff09;是一种常见…

Java中的集合(二)

一、回顾上期 上一篇讲到在Java中&#xff0c;集合和容器是非常重要的概念&#xff0c;用于存储和操作数据。在集合中&#xff0c;有单列集合和双列集合两种类型。我们在上一篇将单列集合中的list类讲完了&#xff0c;这一篇将会将集合中剩余部分介绍完&#xff0c;话不多说&am…

备战蓝桥杯---刷二分与前缀和题

刷点题~ 1.二分多路归并算法 对于每一个技能&#xff0c;我们把它看成一个等差数列&#xff0c;我们把所有可能都放到一个集合里&#xff0c;排个序&#xff0c;取前m个大即可&#xff0c;现在考虑优化&#xff0c;假如m不是很大&#xff0c;我们直接用优先队列即可&#xff0…

单细胞RNA测序(scRNA-seq)SRA数据下载及fastq-dumq数据拆分

单细胞RNA测序&#xff08;scRNA-seq&#xff09;入门可查看以下文章&#xff1a; 单细胞RNA测序&#xff08;scRNA-seq&#xff09;工作流程入门 单细胞RNA测序&#xff08;scRNA-seq&#xff09;细胞分离与扩增 1. NCBI查询scRNA-seq SRA数据 NCBI地址&#xff1a; https…

继承.Java

目录 1&#xff0c;概述 1.1继承的含义 1.2什么时候用继承 1.3继承的好处 1.4继承的特点 2&#xff0c;继承的格式 3&#xff0c;可以继承哪些内容 4&#xff0c;成员方法和成员变量的访问特点 5&#xff0c;构造方法的访问特点 6&#xff0c;this&#xff0c;super…

windows版本-idea中下载的java版本在哪

1、点击idea的file-projectStructure 进入&#xff1a; 通过电脑目录进入该目录 找到bin目录&#xff0c;copy该目录地址 copy下来之后设置到系统环境变量中

C#项目引用解决方案中其他项目dll时,出现黄色感叹号的解决方案

问题引入 今天拿着老师傅的老项目&#xff0c;需要做通讯调试&#xff0c;说测试一下&#xff0c;便添加了一个项目A来编写结构体&#xff0c;然后在窗体程序项目B中引用A&#xff0c;发现B一引用A&#xff0c;在B项目的引用下面A就多了个黄色感叹号&#xff0c;一编译B项目&am…

瑞_Redis_商户查询缓存

文章目录 项目介绍1 短信登录2 商户查询缓存2.1 什么是缓存2.1.1 缓存的应用场景2.1.2 为什么要使用缓存2.1.3 Web应用中缓存的作用2.1.4 Web应用中缓存的成本 2.2 添加Redis缓存2.2.1 背景2.2.2 缓存模型和思路2.2.3 代码实现2.2.4 测试附&#xff1a;IDEA控制台输出自动换行设…

色域(BT2020/BT709/sRGB/DCI-P3/Rec.709/NTSC)

什么是色域 色域是对一种颜色进行编码的方法&#xff0c;也指一个技术系统能够产生的颜色的总和。在计算机图形处理中&#xff0c;色域是颜色的某个完全的子集。一般来说&#xff0c;高端投影仪和电视都会强调色域范围和对比度&#xff0c;而不是唯亮度标准论。 自然界可见光…