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

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

news 2026/2/11 1:59:29

👨‍⚕️ 主页： 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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2026/1/15 21:24:41

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/22 16:15:42

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2026/2/3 22:50:06

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/2/10 20:18:09

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2026/1/29 8:51:33