8.three.js相机详解

8.three.js相机详解

1、 认识相机

在Threejs中相机的表示是THREE.Camera,它是相机的抽象基类,其子类有两种相机,分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera:

在这里插入图片描述

正投影和透视投影的区别是:透视投影有一个基本点,就是远处的物体比近处的物体小。

在这里插入图片描述

2.正投影相机

正投影相机:

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

如图,定义一个正投影相机的可视范围,由left, right, top, bottom, near, far六个参数确定,图中灰色区域即相机可视部分,left, right, top, bottom确定了可视区域的矩形平面大小, near, far确定了可视区域的深度范围。

在这里插入图片描述

3.透视投影相机

透视投影相机:

let camera = new THREE.PerspectiveCamera( fov, aspect, near, far)

如图,定义一个透视投影相机的可视范围,由 fov, aspect, near, far四个参数可以确定,图中绿色平面到粉色平面的空间即为可视区域。

1、视角fov:这里可以理解为视野角度的大小,即,视角的大小,如果设置为0,相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,但是在180度的时候,往往物体很小,因为他在你的整个可视区域中的比例变小了。

2、近平面near:这个呢,表示你近处的裁面的距离。补充一下,也可以认为是眼睛距离近处的距离,假设为10米远,请不要设置为负值,Three.js就傻了,不知道怎么算了。

3、远平面far:这个呢,表示你远处的裁面,

4、纵横比aspect:实际窗口的纵横比,即宽度除以高度。这个值越大,说明你宽度越大

在这里插入图片描述

其它的参数介绍:

 camera.position.x = 0;camera.position.y = 0;camera.position.z = 1000;camera.up.x = 0;camera.up.y = 0;camera.up.z = 1;camera.lookAt({x: 0,y: 0,z: 0,});

position参数:定义相机的位置

up参数:相机的上方向,用于确定相机的摆放

lookAt参数:相机看向哪个位置

在这里插入图片描述

视频演示地址:https://www.bilibili.com/video/BV18HypYwEnr/?vd_source=0f4eae2845bd3b24b877e4586ffda69a

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

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

相关文章

R语言编程

一、R语言在机器学习中的优势 R语言是一种广泛用于统计分析和数据可视化的编程语言,在机器学习领域也有诸多优势。 丰富的包:R拥有大量专门用于机器学习的包。例如,caret包是一个功能强大的机器学习工具包,它提供了统一的接口来训练和评估多种机器学习模型,如线性回归、决…

Excel:vba实现生成随机数

Sub 生成随机数字()Dim randomNumber As IntegerDim minValue As IntegerDim maxValue As Integer 设置随机数的范围(假入班级里面有43个学生,学号是从1→43)minValue 1maxValue 43 生成随机数(在1到43之间生成随机数)randomNumber Application.WorksheetFunctio…

Vue学习笔记(六、跑马灯效果)

下面是一段跑马灯效果的代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>VueBaseCode</title><script src"./lib/vue.js"></script> </head><b…

Python的两种循环结构和break与continue

在所有的循环中应当避免死循环的出现。死循环&#xff1a;条件始终为真的循环称为死循环在循环语句中&#xff0c;表达式永远为真&#xff0c;致循环持续执行程序无法终止。在开发的时候&#xff0c;死循环带来的麻烦是最直观最大的。 一. while循环 while循环的框架&#xff…

【大数据学习 | Zookeeper】Zookeeper服务端与客户端的工作流程

1. Zookeeper服务端 ZooKeeper 服务端通常是以集群的形式部署&#xff0c;这样可以提供高可用性和容错能力。ZooKeeper 集群中的每个节点都保存着几乎相同的数据副本&#xff08;除了领导者选举相关的数据&#xff09;。集群中有一个节点被选为领导者&#xff08;Leader&#…

element 按钮变形 el-button样式异常

什么都没动&#xff0c;element UI的按钮变形了&#xff0c;莫名其妙&#xff0c;连官网的也变形了&#xff0c;换了其它浏览器又正常&#xff0c; 难道这是element UI的问题&#xff1f;NO&#xff0c;是浏览器的插件影响到了&#xff01;去扩展插件里面一个个关闭扩展&#x…

时间序列预测(十)——长短期记忆网络(LSTM)

目录 一、LSTM结构 二、LSTM 核心思想 三、LSTM分步演练 &#xff08;一&#xff09;初始化 1、权重和偏置初始化 2、初始细胞状态和隐藏状态初始化 &#xff08;二&#xff09;前向传播 1、遗忘门计算&#xff08;决定从上一时刻隐状态中丢弃多少信息&#xff09; 2、…

依赖关系是危险的

依赖, 我们需要它们&#xff0c;但如何有效安全地使用它们&#xff1f;在本周的节目中&#xff0c;Kris 与 Ian 和 Johnny 一起讨论了 polyfill.io 供应链攻击、Go 中依赖管理和使用的历史&#xff0c;以及 Go 谚语“一点复制胜过一点依赖”。当然&#xff0c;我们用一些不受欢…

CSS 样式 box-sizing: border-box; 用于控制元素的盒模型如何计算宽度和高度

文章目录 box-sizing: border-box; 的含义默认盒模型 (content-box)border-box 盒模型 在微信小程序中的应用示例 在微信小程序中&#xff0c;CSS 样式 box-sizing: border-box; 用于控制元素的盒模型如何计算宽度和高度。具体来说&#xff0c; box-sizing: border-box; 会改…

使用TimeShift备份和恢复Ubuntu Linux

您是否曾经想过如何备份和恢复您的Ubuntu或Debian系统&#xff1f;TimeShift是一个强大的备份和还原工具。TimeShift允许您创建系统快照&#xff0c;提供了一种在出现意外问题或系统故障时恢复到先前状态的简便方式。您可以使用RSYNC或BTRFS创建快照。 有了这个介绍&#xff0…

SSM 图书馆借还系统-计算机设计毕业源码24465

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3论文章节安排 2相关技术介绍 2.1 B/S结构 2.2 SSM框架 2.3 MySQL数据库 3系统分析 3.1 可行性分析 3.2 系统功能性分析 3.3.非功能性分析 3.4 系统用例分析 3.5系统流程分析 3.5.1 用户登录流程 3.5.2 数据删…

vue Element U 解决表格数据不更新问题

最近在使用 Vue 和 Element UI 开发后台管理系统时&#xff0c;操作表单数据重新请求表格接口后遇到表格数据不更新的问题。后面查阅了些资料&#xff0c;这通常是由于 Vue 的响应式系统没有检测到数据的变化&#xff0c;或者数据更新后没有正确地触发视图的重新渲染。以下是一…

中小企业设备资源优化:Spring Boot系统实现

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

ruoyi域名跳转缓存冲突问题(解决办法修改:session名修改session的JSESSIONID名称)

【版权所有&#xff0c;文章允许转载&#xff0c;但须以链接方式注明源地址&#xff0c;否则追究法律责任】【创作不易&#xff0c;点个赞就是对我最大的支持】 前言 仅作为学习笔记&#xff0c;供大家参考 总结的不错的话&#xff0c;记得点赞收藏关注哦&#xff01; 目录 前…

Prism 四事件聚合器

#1024程序员节&#xff5c;征文# 不废话&#xff0c;直接上代码一个简单的示例。 1、事件聚合 创建一个文件夹EventBLL&#xff0c;添加EventDemo.cs&#xff0c;代码如下。 using System; using System.Collections.Generic; using System.Linq; using System.Text; using …

linux中级wed服务器(https搭建加密服务器)

一。非对称加密算法&#xff1a; 公钥&#xff1a;公共密钥&#xff0c;开放 私钥&#xff1a;私有密钥&#xff0c;保密 1.发送方用自己的公钥加密&#xff0c;接受方用发送方的私钥解密&#xff1a;不可行 2.发送方用接受方的公钥加密&#xff0c;接受方用自己的私钥解密…

SpringMVC实战:构建高效表述层框架

文章目录 1. SpringMVC简介和体验1.1 介绍1.2 主要作用1.3 核心组件和调用流程1.4 快速体验 2. SpringMVC接收数据2.1 访问路径设置2.2 接收参数2.2.1 param和json参数比较2.2.2 param参数接收2.2.3 路径参数接收2.2.4 json参数接收 2.3 接收cookie数据2.4 接收请求头数据2.5 原…

【开源免费】基于SpringBoot+Vue.JS在线文档管理系统(JAVA毕业设计)

本文项目编号 T 038 &#xff0c;文末自助获取源码 \color{red}{T038&#xff0c;文末自助获取源码} T038&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

CryoEM - 冷冻电镜 基于深度学习的 从头重构(Ab-initio Reconstruction) 开源项目 教程

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/143162494 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 来源于 CryoDragon 算法 冷冻电镜(CryoEM) 是一种成像方式,为蛋白质和…

【Flutter】页面布局:流式布局(Wrap、Flow)

在移动应用开发中&#xff0c;布局是非常重要的一部分&#xff0c;尤其是当我们需要处理动态或自适应的内容时。Flutter 提供了几种布局方式来帮助开发者处理复杂的 UI 场景&#xff0c;其中 Wrap 和 Flow 是常用的流式布局组件。它们在处理多个子组件时表现优越&#xff0c;尤…