【ThreeJs】(2)照相机 | 正交投影照相机 | 透视投影照相机

three.js中正交和透视投影相机的应用 学习交流欢迎加群:789723098,博主会将一些demo整理共享 一个场景之所以会呈现在我们眼前是因为我们具有眼睛,眼睛提供了视觉。换句话说,如果three.js场景中没有这双眼睛,就像电影没有摄像机一样,场景就无法呈现在我们面前?这双眼睛就是相机,可见相机是Three.js场景中不可或缺的一个组件。Three.js库提供了两种不同的相机:正交投影相机和透视投影相机,接下来分别讲解这两种相机以... 阅读详情

在这里插入图片描述
作者的课程,学习地址: https://www.lanqiao.cn/courses/3314

1、照相机:

使用Three.js创建的场景是三维的,但是通常情况下显示器是二维的,所以,三维场景如何显示在二维屏幕上呢?
照相机:定义了三维空间到二维屏幕的投影方式。
不同的投影方式,照相机又分为正交投影照相机与透视投影照相机。

1.1 正交投影与透视投影

  • 透视投影:使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果

  • 正交投影:使用正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果,对于在三维空间内平行的线,投影到二维空间中也一定是平行的

  • 一般说来,对于制图、建模软件通常使用正交投影,这样不会因为投影而改变物体比例;

  • 对于其他大多数应用,通常使用透视投影,因为这更接近人眼的观察效果;

1.2 正交投影照相机

构造函数:THREE.OrthographicCamera(left,right,top,bottom,near,far)

  • 6个参数分别代表正交投影照相机拍摄到的空间的6个面的位置,这两个面围成一个长方体,成为视景体,
  • 只有在视景体内部的物体才可能显示在屏幕上,而之外的物体会在显示前辈裁剪掉
    - 为了保证照相机的横竖比例,需要保证(right-left)与(top-bottom)的比例与Canvas宽度与高度的比例一致
  • near与far都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后面的物体,因此,这两个值应该均为正值。
  • 为了保证场景中的物体不会因为太近或太远而被照相机忽略,一般near的值设置得较小,far值设置的较大,具体值应该视场景中物体的位置确定。
Three.js之照相机Camera 实例给出了如何创建一个照相机,并且区分了照相机的两种表达形式。 阅读详情

相关推荐

3D可视化库-Threejs调研及简单示例

0 背景 WebGL是一种3D绘图协议,其允许JavaScript和OpenGL ES2.0结合在一起,为H5 Canvas提供硬件3D加速渲染,可以借助系统显卡在浏览器里更流畅地显示3D场景和模型。Threejs是一款webGL框架,由于其易用性被广泛应用。Threejs在WebGL的api接口基础上,又进行了一层封装。 WebGL原生的api是一种非常低层的接口,需要一些数学和图形学的相关技术。其解决是如何在画布上画图的问题,怎么画点、线、面,怎么上色,怎么贴图,怎么处理光线,视角转动之后怎么换算绘

1981

three.js OrthographicCamera(正交相机附带demo) - 03

文章目录一、什么是正交投影相机1.属性介绍2.代码示例二、demo三、demo效果(`所有物体大小不以物体距离摄像机远近来改变`) 一、什么是正交投影相机 正交摄像机与透视投影摄像机最大的区别就是物体的大小不随物体距离影响,透视投影相机请看我上篇文章 three.js PerspectiveCamera(透视投影相机) - 02,然而正交投影摄像机无论物体距离摄像机多远,你所看到的物体大小都是1比1还原。 1.属性介绍 属性 描述 left 摄像机视锥体左侧面 right 摄像机视锥

刘毅鹏的博客 4463

Three.js入门-介绍及创建场景

这一章通过对Three.js基础组件的讲解,让读者掌握Three.js中场景、相机和渲染器的概念,并以样例代码讲解如何创建一个场景,实现快速入门

lijincheng2022的博客 1084

初学three.js(三)照相机之正交投影照相机

针对投影方式不同,照相机分为正交投影照相机与透视投影照相机 正交投影照相机 与 透视投影照相机的区别。 1、透视投影照相机出来的效果是类似于人眼在真实世界中看到的有“近大远小”的效果。 2、正交投影照相机就想是在数学几何学上画的正方体效果一样,对于在三维空间内的平行线,投影到二维空间中也一定是平行的。 正交投影照相机 正交投影照相机(Orthographic Camera)设置起来...

努力学习的肥宅 1435

相机标定(三)—— 正交投影和透视投影变换

基础知识1. 概述2. 视锥体3. 透视投影的目的4. 透视投影的理解和推导4.1 透视基本原理4.2 一点透视4.3 多点透视4.4 生成透视投影图的方法5. 图像处理中的透视投影变换 1. 概述 2. 视锥体 3. 透视投影的目的 4. 透视投影的理解和推导 4.1 透视基本原理 4.2 一点透视 4.3 多点透视 4.4 生成透视投影图的方法 5. 图像处理中的透视投影变换 ...

weixin_41480034的博客 1万+

搭建第一个threejs三维场景、认识什么是threejs的三要素

threejs中三要素是:场景(scene)、相机(camera)和渲染器(renderer)。有了这三样 东西,才能搭建一个三维场景,将物体渲染到网页中

weixin_40856652的博客 1340

[openGL]正交投影,透视投影,MVP变换

视图变换顾名思义就是把你所看到的图变换,举个简单的例子,打比方在日常生活中你去拍照,你首先会取景,然后把你想拍的东西都摆放好,这一步叫做model transformation(模型变换)。接下来你肯定会挑选一个特定的角度摆放你的摄像机,这一步就叫做view transformation(视图变换)。然后按下快门后把图片拍下来,这一步就叫做projection transformation(投影变换)。

qq_43331089的博客 4715

CDO批量处理nc文件:5分钟搞定CMIP6数据双线性插值(附完整代码)

本文详细介绍了如何使用CDO工具链中的`remapbil`命令,快速实现CMIP6数据的批量双线性插值处理。通过环境配置、核心操作步骤、高级优化技巧及典型报错解决方案,帮助科研人员高效处理大规模nc文件,显著提升气象数据处理效率。

weixin_29267307的博客 291

13 Three.js照相机的正交投影和透视投影

这一篇文章会的人也不看,不会的人也不需要专业术语,我直接大白话介绍一下webgl里面的照相机。 照相机就相当于在模型世界中,设置一个位置,将前方的内容拍摄下来,然后再给canvas,在窗口里面显示出来在当前位置的图像。 再说的简单一些,就相当于我们拿着手机拍了一张照片,放到了窗口里面显示出来。而动画则是一直拍,一直显示而已。 因为绘制出来的图形是3d的,而我们的显示屏只能显示2d的图片。所以

现在学习也不晚 7058

CTF入门RSA维纳攻击

RSA维纳攻击 一.题目描述 适用于e过大或国过小情况下的RSA加密 题干如下: #coding:utf-8 import gmpy2 import libnum e = 54856417509806712596137531985117125938559627187663765776152288580865785539464797248184444737659643755765127505761012086539564616967122137525108154121304264697865568653100

noj_h的博客 2232

量子密钥分发系统的设计与实现(二):光路子系统初步讨论

本文主要对量子密钥分发系统中的光路子系统方案进行了讨论。

量子领域相关话题 2406

threejs CameraHelper 查看照相机的观察范围

简单例子 这个例子,是在一个视图中,看到照相机的辅助线,也就是,一个照相机的观察访问 这样,就需要两个照相机,一个是主照相机,一个是加有辅助线的照相机(有两种,正交和透视,这里辅助的使用的是正交的) 设置两个照相机位置:注意,辅助的子照相机要在主照相机里面,这样才能在主照相机的镜头下看到辅助照相机的观察范围 //场景、摄像机、渲染器、实体 var ...

weixin_30832983的博客 887

通过EMIF接口实现FPGA与DSP的高速连接(方法)

请注意,具体的连接细节和步骤可能会根据所使用的FPGA和DSP型号以及特定的应用需求而有所不同。开发DSP和FPGA上的软件,以实现数据交换和处理。根据系统的具体需求,对FPGA和DSP的接口逻辑进行优化,以减少延迟、提高数据吞吐量或降低资源消耗。它通常支持多种类型的存储器,如SRAM、DRAM、ROM等,以及通过特定的接口与FPGA连接。对于FPGA,需要编程来实现与DSP的接口逻辑,包括地址译码、数据传输、时序控制等。在连接完成后,进行详细的调试和测试,以确保数据能够在DSP和FPGA之间正确传输。

AigcFox的博客 4584

Threejs 教程1

Threejs基础概念记录

mazhuo110的博客 374

解决Windows 10安装语言包时遇到的0x800F0954错误

在安装Windows 10操作系统的语言包时,如果遇到错误代码0x800F0954的提示,这无疑会让许多用户感到困惑和无助。这个错误通常意味着在安装过程中遇到了一些阻碍,导致无法正常完成语言包的安装。本文将为大家详细解析这个错误代码0x800F0954,并提供一系列有效的解决方法,帮助大家顺利安装所需的语言包。

nntxthml的博客 3793

Anki小白必看:手把手教你打造高颜值个性化笔记模板(附Leaflyer模板下载)

本文为Anki新手提供详细的个性化笔记模板设计指南,从基础配置到高级定制技巧,帮助用户打造高效记忆系统。特别推荐Leaflyer模板下载,通过视觉优化和功能强化,显著提升学习体验和记忆效率。

weixin_28717969的博客 433

Three.js基础探寻二——正交投影照相机

  本篇主要介绍照相机中的正交投影照相机。     第一篇传送门:Three.js基础探寻一 1.照相机   图形学中的照相机定义了三维空间到二维屏幕的投影方式。   针对投影方式照相机分为正交投影照相机和透视投影照相机。 2.两种相机的区别与适用范围   正交投影:   透视投影:   正交投影就像数学课上画的;而透视投影有一个基本点,就是远处的物体比近处的物体...

weixin_30794499的博客 206

OpenClaw 开机自启配置:Windows/macOS/Linux 全平台技术指南

OpenClaw 开机自启全平台配置指南 本文提供了在Windows、macOS和Linux系统上配置OpenClaw开机自启的完整技术方案。主要内容包括: Windows配置:提供三种方法(Windows服务、任务计划程序、启动文件夹),详细说明服务脚本创建、服务注册和测试流程 macOS配置:使用LaunchAgent实现开机自启,包含配置文件创建和加载方法 Linux配置:通过systemd服务实现,包括服务单元文件创建和启用步骤 系统要求:明确硬件(64位CPU/4GB内存)和软件(各平台操作系统版

一键难忘的博客 2992

threejs 绘制球体_3D可视化库-Threejs调研及简单示例

0 背景WebGL是一种3D绘图协议,其允许JavaScript和OpenGL ES2.0结合在一起,为H5 Canvas提供硬件3D加速渲染,可以借助系统显卡在浏览器里更流畅地显示3D场景和模型。Threejs是一款webGL框架,由于其易用性被广泛应用。Threejs在WebGL的api接口基础上,又进行了一层封装。WebGL原生的api是一种非常低层的接口,需要一些数学和图形学的相关技术。其...

weixin_39760068的博客 1083

中文核心:swin transformer 农作物病虫害识别 完整代码数据

中文核心:swin transformer 农作物病虫害识别

939

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

Threejs入门1-简介

简介 Three.js是WebGL的JavaScript 3D库,其对WebGL提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本,成为前端开发者完成3D绘图的得力工具。 three.js官方文档 :threejs.org/ three.js中文文档 : techbrood.com/threejs/doc… Three.js整体认知(附:Three.js功能概览) 一、...

空谷足音的博客 1737

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

webGL之three.js入门2

入门建议: webGL中文翻译教程,基于NeHe的openGL教程:http://www.hiwebgl.com/?p=42。 WebGL中文网 http://www.hewebgl.com/ ,里面有THREEJS教程,THREEJS初级教程免费 ,其余要收费。但是初级教程也很不错。 three.js官方网站:www.threejs.org/ ,three.js-master...

weixin_34082854的博客 211

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

Three.js入门(一)

摘自Three.js入门指南 张雯莉 (作者) 本书针对Three.js的几个重要话题分章节介绍,包括:Three.js和WebGL的背景资料、照相机的设定、在场景中添加物体、实现动画效果、导入外部模型、添加光源和阴影效果、着色器等。 1、WebGL WebGL是基于OpenGL ES 2.0的Web标准,可以通过HTML5 Canvas元素作为DOM接口访问。WebGL可以看做是将...

unirrrrr的博客 935

Three.js材料及光照属性测试

关于Three.js中camera部分属性测试界面-材料及光照测试 新增了three.js中一些元素的测试熟悉,包括光照、相机类型、光照类型、材料类型 ( 贴图类型当前似乎有点问题,上传完毕后不会马上显示贴图 ,需要旋转才能显示,后续解决) <html> <head> <meta charset="utf-8" /> <style> .container { display: flex; }

ck2580的博客 229

【前端】Three.js

Three.js 基本概念 渲染器(Renderer) 渲染器将和Canvas元素进行绑定 场景(Scene) 在Three.js中添加的物体都是添加到场景中的,因此它相当于一个大容器。一般说,场景里没有很复杂的操作,在程序最开始的时候进行实例化,然后将物体添加到场景中即可。 照相机(Camera) 针对投影方式的不同,照相机分为正交投影照相机与透视投影照相机。 渲染 在定义了场景中的物体,设置...

weixin_33957648的博客 155
上一篇: 【ThreeJs】(1)四大组件:场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
下一篇: 【D3.js - v5.x】(1)选择集 | 绑定数据 | 插入元素 | 删除元素
蟹蟹蟹风流
蟹蟹蟹风流 优质创作者: 编程框架技术领域 优质创作者: 编程框架技术领域 领域专家: 前端开发技术领域 领域专家: 前端开发技术领域
博客等级 码龄11年 3万+粉丝 396原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蟹蟹蟹风流

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值