当前位置： 首页 > news >正文

学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

news 2025/11/14 13:17:01

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.PerspectiveCamera透视相机
    • 1.2 ☘️THREE.OrthographicCamera正交相机
  • 二、🍀PerspectiveCamera透视相机和OrthographicCamera正交相机对比
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中PerspectiveCamera透视相机和OrthographicCamera正交相机进行对比，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.PerspectiveCamera透视相机

THREE.PerspectiveCamera这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
构造函数：
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
这些参数一起定义了摄像机的viewing frustum（视锥体）。
属性：
在这里插入图片描述
方法：
在这里插入图片描述

1.2 ☘️THREE.OrthographicCamera正交相机

THREE.OrthographicCamera正交相机在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。
这对于渲染2D场景或者UI元素是非常有用的。
构造函数：
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。
这些参数一起定义了摄像机的viewing frustum（视锥体）。
属性：
在这里插入图片描述
方法：
在这里插入图片描述

二、🍀PerspectiveCamera透视相机和OrthographicCamera正交相机对比

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene。
  • 3、初始化PerspectiveCamera透视相机camera，定义相机位置 camera.position。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源。创建THREE.DirectionalLight平行光源directionalLight，设置平行光源位置，scene场景加入平行光源。
  • 5、加载几何模型：创建THREE.PlaneGeometry平面几何体planeGeometry，创建THREE.MeshLambertMaterial漫反射材质planeMaterial，传入参数planeGeometry和planeMaterial创建平面几何体网格对象plane，设置plane投影，设置plane的位置和旋转角度，场景scene中加入plane。在plane上循环创建立方体网格对象cube，将plane铺满，具体代码参考代码样例。
  • 6、加入gui控制，实现PerspectiveCamera透视相机和OrthographicCamera正交相机的切换，进行效果对比。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>PerspectiveCamera透视相机和OrthographicCamera正交相机对比</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">// once everything is loaded, we run our Three.js stuff.function init() {var stats = initStats();// create a scene, that will hold all our elements such as objects, cameras and lights.var scene = new THREE.Scene();// create a camera, which defines where we're looking at.var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x = 120;camera.position.y = 60;camera.position.z = 180;// create a render and set the sizevar renderer = new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));renderer.setSize(window.innerWidth, window.innerHeight);// create the ground planevar planeGeometry = new THREE.PlaneGeometry(180, 180);var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});var plane = new THREE.Mesh(planeGeometry, planeMaterial);// rotate and position the planeplane.rotation.x = -0.5 * Math.PI;plane.position.x = 0;plane.position.y = 0;plane.position.z = 0;// add the plane to the scenescene.add(plane);var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {var rnd = Math.random() * 0.75 + 0.25;var cubeMaterial = new THREE.MeshLambertMaterial();cubeMaterial.color = new THREE.Color(rnd, 0, 0);var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);cube.position.y = 2;scene.add(cube);}}var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);directionalLight.position.set(-20, 40, 60);scene.add(directionalLight);// add subtle ambient lightingvar ambientLight = new THREE.AmbientLight(0x292929);scene.add(ambientLight);// add the output of the renderer to the html elementdocument.getElementById("WebGL-output").appendChild(renderer.domElement);// call the render functionvar step = 0;var controls = new function () {this.perspective = "Perspective";this.switchCamera = function () {if (camera instanceof THREE.PerspectiveCamera) {camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);camera.position.x = 120;camera.position.y = 60;camera.position.z = 180;camera.lookAt(scene.position);this.perspective = "Orthographic";} else {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x = 120;camera.position.y = 60;camera.position.z = 180;camera.lookAt(scene.position);this.perspective = "Perspective";}};};var gui = new dat.GUI();gui.add(controls, 'switchCamera');gui.add(controls, 'perspective').listen();// make sure that for the first time, the// camera is looking at the scenecamera.lookAt(scene.position);render();function render() {stats.update();// render using requestAnimationFramerequestAnimationFrame(render);renderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: ms// Align top-leftstats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init</script>
</body>
</html>

效果如下：
在这里插入图片描述

相关文章：

学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.PerspectiveCamera透…...

编程日记 2024/12/28 1:12:22

C#数学相关开发性能优化方法

本文Github地址&#xff1a;CSharp-MathOptimization.md 华为公司的C语言编程规范在开头就强调了&#xff1a; 一般情况下&#xff0c;代码的可阅读性高于性能&#xff0c;只有确定性能是瓶颈时&#xff0c;才应该主动优化。 本文讲述的方法没有经过大项目和大公司的检验&…...

编程日记 2024/12/28 1:11:21

【前沿 热点 顶会】AAAI 2025中与目标检测有关的论文

CP-DETR: Concept Prompt Guide DETR Toward Stronger Universal Object Detection&#xff08;AAAI 2025&#xff09; 最近关于通用物体检测的研究旨在将语言引入最先进的闭集检测器&#xff0c;然后通过构建大规模&#xff08;文本区域&#xff09;数据集进行训练&#xff0…...

编程日记 2024/12/28 1:08:18

APP投放的归因框架设计

一、归因相关概念回顾 在广告归因简介中我们介绍常见的归因模型和归因方法&#xff0c;我们先来回顾一下&#xff1a; 1. 背景 2. 设备标识 3. 归因模型 归因模型的多样性意味着每种模型都有其独特的优势和局限。关键在于选择一个与您的业务场景相匹配的模型&#xff0c;并且…...

编程日记 2024/12/28 1:04:14

职业生涯记录-1

机缘 普通人改命，要学会向上社交，能自然融入的圈子，多数是往下社交，没有多少价值，想要获取更多资源，但是有钱人只跟有钱人交朋友，不会带我们普通人玩，又错了，有钱人身边最不缺的就是有钱人，他们缺的是对他们有利用价值的朋友，往上社交的关键，你必须是个对他有利用价…...

编程日记 2024/12/28 1:02:11

江苏捷科云：可视化平台助力制造企业智能化管理

公司简介 江苏捷科云信息科技有限公司&#xff08;以下简称“捷科”&#xff09;是一家专注于云平台、云储存、云管理等产品领域的创新型企业&#xff0c;集研发、生产和销售于一体&#xff0c;致力于在网络技术领域打造尖端品牌。在推动制造业企业数字化转型的进程中&#xf…...

编程日记 2024/12/28 1:01:09

【ES6复习笔记】Promise对象详解（12）

1. 什么是 Promise&#xff1f; Promise 是 JavaScript 中处理异步操作的一种机制&#xff0c;它可以让异步操作更加容易管理和控制。Promise 对象代表一个异步操作的最终完成或失败&#xff0c;并提供了一种方式来处理操作的结果。 2. Promise 的基本语法 Promise 对象有三…...

编程日记 2024/12/28 0:57:05

01 Oracle 基本操作

Oracle 基本操作 初使用步骤 1.创建表空间 2.创建用户、设置密码、指定表空间 3.给用户授权 4.切换用户登录 5.创建表 注意点&#xff1a;oracle中管理表的基本单位是用户 文章目录 了解Oracle体系结构 1.创建表空间**2.删除表空间**3.创建用户4.给用户授权5.切换用户登录6.表操…...

编程日记 2024/12/28 0:56:03

C语言基础：指针（数组指针与指针数组）

数组指针与指针数组 数组指针 概念&#xff1a;数组指针是指向数组的指针&#xff0c;本质上还是指针 特点&#xff1a; 先有数组&#xff0c;后有指针 它指向的是一个完整的数组 一维数组指针&#xff1a; 语法&#xff1a; 数据类型 (*指针变量名)[行容量][列容量]; 案…...

编程日记 2024/12/28 0:42:51

本地部署 LLaMA-Factory

本地部署 LLaMA-Factory 1. 本地部署 LLaMA-Factory2. 下载模型3. 微调模型3-1. 下载数据集3-2. 配置参数3-3. 启动微调3-4. 模型评估3-5. 模型对话 1. 本地部署 LLaMA-Factory 下载代码&#xff0c; git clone https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Facto…...

编程日记 2024/12/28 0:40:48

Web前端基础知识（三）

表单的应用非常丰富&#xff0c;可以说&#xff0c;每个网站都会用到表单。下面首先介绍表单中的form标签。 --------------------------------------------------------------------------------------------------------------------------------- <form></form&g…...

编程日记 2024/12/28 0:39:47

数据库设计问题记录

唯一性约束和逻辑删除的冲突 问题描述 如果一张表中&#xff0c;存在唯一性约束&#xff0c;比如一些数据中的code&#xff0c;且数据表使用逻辑删除。当删除某行数据的时候&#xff0c;以后再次插入相同code的数据&#xff0c;数据库会报错。 问题分析 在逻辑删除中&#…...

编程日记 2024/12/28 0:33:41

mac_录屏

参考&#xff1a; mac m1上系统内录方法BlackHole代替soundflower录音(附安装包) https://blog.csdn.net/boildoctor/article/details/122765119录屏后没声音&#xff1f;这应该是 Mac&#xff08;苹果电脑&#xff09; 内录声音最优雅的解决方案了 https://www.bilibili.com/…...

编程日记 2024/12/28 0:32:39

【Java-tesseract】OCR图片文本识别

文章目录 一、需求二、概述三、部署安装四、技术细节五、总结 一、需求 场景需求:是对识别常见的PNG,JPEG,TIFF,GIF图片识别&#xff0c;环境为离线内网。组件要求开源免费&#xff0c;并且可以集成Java生成接口服务。 二、概述 我不做选型对比了,我筛选测试了下Tesseract(v…...

编程日记 2024/12/28 0:24:29

redis cluster集群

华子目录 什么是redis集群redis cluster的体系架构什么是数据sharding&#xff1f;什么是hash tag集群中删除或新增节点&#xff0c;数据如何迁移&#xff1f;redis集群如何使用gossip通信?定义meet信息ping消息pong消息fail消息&#xff08;不是用gossip协议实现的&#xff0…...

编程日记 2024/12/28 0:22:21

解锁高效密码：适当休息，让学习状态满格

一、“肝帝” 的困境 在当今竞争激烈的职场中&#xff0c;“肝帝” 现象屡见不鲜。超长工时仿佛成为了许多行业的 “标配”&#xff0c;从互联网企业的 “996”“007”&#xff0c;到传统制造业的轮班倒、无休无止的加班&#xff0c;员工们的工作时间被不断拉长。清晨&#xff…...

编程日记 2024/12/28 0:17:13

代码随想录算法训练营第十一天-150.逆波兰表达式求值

队列栈 #include <iostream> #include <vector> #include <stack>class Solution { public:int evalRPN(std::vector<std::string>& tokens) {std::stack<long long> stack_number;for (auto it tokens.begin(); it ! tokens.end(); it) {…...

编程日记 2024/12/28 0:16:11

C++ 泛编程 —— 嵌套使用模板类

嵌套使用模板类 嵌套使用模板类最常见的场景数组容器中有栈容器栈容器中有数组容器递归使用模板类 嵌套使用模板类最常见的场景 容器中有容器 数组的元素可以是栈&#xff0c;栈中的元素可以是数组。先来看一下Stack和Vector的基本代码&#xff0c;定长数组Array的代码也给出来…...

编程日记 2024/12/28 0:14:09

【WebGIS】Cesium：GLTF数据加载

在3D Web GIS开发中&#xff0c;使用GLTF格式的模型可以提高应用的加载速度并提升用户体验。Cesium.js是一个强大的3D地理空间引擎&#xff0c;支持GLTF格式的3D模型&#xff0c;并且提供丰富的API来处理和优化模型的加载和渲染。本文将系统地介绍如何加载GLTF模型&#xff0c;…...

编程日记 2024/12/28 0:13:08

【面经】25届 双非本科 字节跳动 北京 四年的总结

点击“硬核王同学”&#xff0c;选择“关注” 福利干货第一时间送达 大家好&#xff0c;我是硬核王同学&#xff0c;最近在做免费的嵌入式知识分享&#xff0c;帮助对嵌入式感兴趣的同学学习嵌入式、做项目、找工作&#xff01; 给大家分享一个25届本科大佬的面经&#xff0c…...

编程日记 2024/12/28 0:12:07

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/11/7 19:47:01

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/11/9 19:03:10

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2025/11/13 8:14:48

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/11/12 20:31:25

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2025/11/12 20:35:31

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2025/11/11 2:19:57

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

编程新知 2025/7/7 14:36:50

代理服务器-LVS的3种模式与调度算法

作者介绍&#xff1a;简历上没有一个精通的运维工程师。请点击上方的蓝色《运维小路》关注我&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们上一章介绍了Web服务器&#xff0c;其中以Nginx为主&#xff0c;本章我们来讲解几个代理软件&#xff1a…...

编程新知 2025/11/12 19:15:48