理解Three.js的相机

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

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

相关文章

jvm基础三——类加载器

类加载器的双亲委派机制 打破

python学习24:python中的列表(list)的遍历

python中的列表(list)的遍历 1.什么是遍历? 将容器内的元素一次取出,并处理,称之为遍历操作,或者还可以叫做迭代 2.如何遍历列表的元素呢? 我们可以使用前面学到的while或者for循环 接下来是代码演示: 使…

Docker基础系列之TLS和CA认证

Docker基础系列之TLS和CA认证 文章目录 Docker基础系列之TLS和CA认证1. 引言2. 初识TLS和CA3. 开启TLS和CA认证3.1 生成证书3.2 配置TLS 4. 参考和感谢 1. 引言 我们日常工作当中会遇到这些需求: 监控Docker容器在idea开发工具中连接Docker,直接发布至…

【RMSNorm】Root Mean Square Layer Normalization

【RMSNorm】Root Mean Square Layer Normalization 论文信息 阅读评价 Abstract Introduction Related Work Background RMSNorm Experiments 论文信息 名称内容论文标题Root Mean Square Layer Normalization论文地址https://arxiv.org/abs/1910.07467发表时间2019-…

随手集☞Spring知识盘点

概述 定义 Spring框架的提出者是程序员Rod Johnson,他在2002年最早提出了这个框架的概念,随后创建了这个框架。Spring框架的目标是简化企业级Java应用程序的开发,通过提供一套全面的工具和功能,使开发者能够更加高效地构建高质量…

JVM参数调优

JVM参数调优 文章目录 JVM参数调优前言JVM参数类型查看运行的Java程序,JVM参数是否开启,具体值为多少?题外话(坑题)查看JVM默认参数工作中常用的JVM基本配置参数查看堆内存打印JVM默认参数生活常用调优参数GC垃圾收集参…

【测开求职】校招生在面测开前需要了解的信息

博主在2021年拿到了字节测开实习的offer,实习时长4个月,并于2023年秋招拿到了字节测开的校招offer,仅以本专栏记录对该岗位的所思所想。 目录 1. 测试开发需要做什么工作2. 为什么选择测试开发3. 测试开发不如开发吗4. 如何准备测试开发 1. …

华为“天才少年”4万字演讲:现在的AI技术要么无趣,要么无用

华为“天才少年”4万字演讲:现在的AI技术要么无趣,要么无用|钛媒体AGI© AI科技组 (图片来源:unsplash) 近期,一篇4万字的演讲风靡于国内人工智能(AI)学术圈。 原…

基于 Rust 标准库 API 使用 200 行代码实现 Http 1.1 协议简易服务

1. 背景 早在之前学过一波 Rust,但是由于没用武之地,没过多久又荒废了,最近想捡起来下。刚好看见有群里小伙伴说学习 Http 网络协议太难怎么办?其实很多技术都是相通的,只要你理解了技术的本质就可以自己实现它&#…

Midjourney艺术家分享|By Moebius

Moebius,本名让吉拉德(Jean Giraud),是一位极具影响力的法国漫画家和插画师,以其独特的科幻和幻想风格而闻名于世。他的艺术作品不仅在漫画领域内受到高度评价,也为电影、时尚和广告等多个领域提供了灵感。…

备考ICA----Istio实验16---HTTP流量授权

备考ICA----Istio实验16—HTTP流量授权 1. 环境准备 kubectl apply -f istio/samples/bookinfo/platform/kube/bookinfo.yaml kubectl apply -f istio/samples/bookinfo/networking/bookinfo-gateway.yaml访问测试 curl -I http://192.168.126.220/productpage2. 开启mtls m…

Kubernetes(K8s)技术解析

1. K8s简介 Kubernetes(简称K8s)是一个开源的容器编排平台,旨在简化容器化应用程序的部署、扩展和管理。为开发者和运维人员提供了丰富的功能和灵活的解决方案,帮助他们更轻松地构建、部署和管理云原生应用程序。以下是关于Kubern…