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

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

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

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

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

相关文章

PHP后执行php.exe -v命令报错并给出解决方案

PHP后执行php.exe -v命令报错并给出解决方案

文章目录 一、执行php.exe -v命令报错解决方案 一、执行php.exe -v命令报错 -PHP Warning: ‘C:\windows\SYSTEM32\VCRUNTIME140.dll’ 14.38 is not compatible with this PHP build linked with 14.41 in Unknown on line 0 解决方案 当使用PHP8.4.1时遇到VCRUNTIME140.dll…
阅读更多...
分布式调度框架学习笔记

分布式调度框架学习笔记

一、分布式调度框架的基本设计 二、线程池线程数量设置的基本逻辑 cpu是分时复用的方法&#xff0c;线程是cpu调度的最小单元 如果当前cpu核数是n&#xff0c;计算密集型线程数一般设为n&#xff0c;io密集型(包括磁盘io和网络io)线程数一般设置为2n. 计算密集型线程数一般设…
阅读更多...
vue 基础学习

vue 基础学习

一、ref 和reactive 区别 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><div id"app"><h1>{{Web.title}}</h1><h1&…
阅读更多...
CI/CD是什么？

CI/CD是什么？

CI/CD 定义 CI/CD 代表持续集成和持续部署&#xff08;或持续交付&#xff09;。它是一套实践和工具&#xff0c;旨在通过自动化构建、测试和部署来改进软件开发流程&#xff0c;使您能够更快、更可靠地交付代码更改。 持续集成 (CI)&#xff1a;在共享存储库中自动构建、测试…
阅读更多...
论文阅读：Deep Fusion Clustering Network With Reliable Structure Preservation

论文阅读：Deep Fusion Clustering Network With Reliable Structure Preservation

论文地址&#xff1a;Deep Fusion Clustering Network With Reliable Structure Preservation | IEEE Journals & Magazine | IEEE Xplore 代码地址&#xff1a;https://github.com/gongleii/DFCN-RSP 摘要 深度聚类通过优雅地利用数据表示来寻找样本的划分&#xff0c;已…
阅读更多...
InnoDB存储引擎【MySQL从放弃到入门】

InnoDB存储引擎【MySQL从放弃到入门】

文章目录 InnoDB存储引擎【MySQL从放弃到入门】1.逻辑架构1.1 一条SQL语句是怎么执行的呢&#xff1f;1.2 MySQL存储引擎有哪些&#xff1f; 2.MySQL一行记录是怎么存储的&#xff1f;2.1 NULL值是如何存储的&#xff1f; 3.char和varchar的区别&#xff1f;4.数据页4.1 聚簇索…
阅读更多...
Jenkins集成部署(图文教程、超级详细）

Jenkins集成部署(图文教程、超级详细）

一、CI/CD 的概念 ​ CI/CD一般包含三个概念&#xff1a; 持续集成&#xff08;Continuous Integration &#xff0c;CI&#xff09; 持续交付&#xff08;Continuous Delivery&#xff09; 持续部署&#xff08;Continuous Deploy&#xff09; ​ CI/CD 是现代软件开发的重要…
阅读更多...
UE5喷涂功能

UE5喷涂功能

许多FPS/TPS 游戏都有喷涂、涂鸦功能 其实原理很简单&#xff0c;就是利用了延迟贴花实现的 我们从网上随便找一张图 创建一个材质&#xff0c;材质域选择延迟贴花 混合模式选择半透明&#xff0c;自发光强度可以看感觉调整 材质做好之后编译保存&#xff0c;新建一个Actor…
阅读更多...
ECCV-2024 | 指令不够用、大模型来生成！BEVInstructor：基于BEV感知和大模型的视觉语言导航指令生成

ECCV-2024 | 指令不够用、大模型来生成！BEVInstructor：基于BEV感知和大模型的视觉语言导航指令生成

作者&#xff1a;Sheng Fan, Rui Liu, Wenguan Wang, and Yi Yang 单位&#xff1a;浙江大学 原文链接&#xff1a;Navigation Instruction Generation with BEV Perception and Large Language Models &#xff08;https://link.springer.com/chapter/10.1007/978-3-031-726…
阅读更多...
电脑出现 0x0000007f 蓝屏问题怎么办，参考以下方法尝试解决

电脑出现 0x0000007f 蓝屏问题怎么办，参考以下方法尝试解决

电脑蓝屏是让许多用户头疼的问题&#xff0c;其中出现 “0x0000007f” 错误代码更是较为常见且棘手。了解其背后成因并掌握修复方法&#xff0c;能帮我们快速恢复电脑正常运行。 一、可能的硬件原因 内存问题 内存条长时间使用可能出现物理损坏&#xff0c;如金手指氧化、芯片…
阅读更多...
Ubuntu下ESP32-IDF开发环境搭建

Ubuntu下ESP32-IDF开发环境搭建

Ubuntu下ESP32-IDF开发环境搭建 文章目录 Ubuntu下ESP32-IDF开发环境搭建一、前言二、软件安装三、开发环境搭建3.1 ESP-IDF安装&#xff1a;3.2 安装编译工具&#xff1a; 四、编译并烧录代码五、ESP32代码编辑工具 一、前言 ​ 开发ESP32&#xff0c;我们首先就要安装开发环…
阅读更多...
Linux复习4——shell与文本处理

Linux复习4——shell与文本处理

认识vim编辑器 #基本语法格式&#xff1a; vim 文件名 •如果文件存在&#xff0c;进入编辑状态对其进行编辑 •如果文件不存在&#xff0c;创建文件并进入编辑状态 例&#xff1a; [rootlocalhosttest]# vim practice.txt #Vim 编辑器三种模式&#xff1a; 命令模式&a…
阅读更多...
5个实用的设计相关的AI网站

5个实用的设计相关的AI网站

在这个日新月异的数字时代&#xff0c;我们不断面临着新的挑战和机遇。随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;越来越多的AI工具开始融入到设计相关的工作流程中&#xff0c;极大地提升了工作效率和创作能力。今天&#xff0c;我非常兴奋地向大家介…
阅读更多...
云手机群控能用来做什么？

云手机群控能用来做什么？

随着云手机的发展&#xff0c;云手机群控技术逐渐从小众的游戏多开工具&#xff0c;发展为涵盖多个领域的智能操作平台。不论是手游搬砖、短视频运营&#xff0c;还是账号养成等场景&#xff0c;云手机群控都展现出了强大的应用潜力。本文将为大家详细解析云手机群控的应用场景…
阅读更多...
数据结构（哈希表（中）纯概念版）

数据结构（哈希表（中）纯概念版）

前言 哈希表&#xff08;Hash Table&#xff09;是计算机科学中的一个基础而重要的数据结构&#xff0c;它广泛评估各种算法和系统中&#xff0c;尤其是在需要快速查找、插入和删除操作的场景中。由于其O( 1)的平均时间复杂度&#xff0c;存储表在性能要求较高的应用中表现得非…
阅读更多...
Python使用requests_html库爬取掌阅书籍（附完整源码及使用说明）

Python使用requests_html库爬取掌阅书籍（附完整源码及使用说明）

教程概述 本教程先是幽络源初步教学分析掌阅书籍的网络结构&#xff0c;最后提供完整的爬取源码与使用说明&#xff0c;并展示结果&#xff0c;切记勿将本教程内容肆意非法使用。 原文链接&#xff1a;Python使用requests_html库爬取掌阅书籍&#xff08;附完整源码及使用说明…
阅读更多...
水库大坝三维模型开发bim篇

水库大坝三维模型开发bim篇

效果图 开发过程 使用了bimface 插件上传做好rvt模型到bimface工程引入bimface相关的插件代码加载模型自定义目录树定位构件闪烁构件展示构件信息 代码 技术交流加V:bloxed appKey 和appSecret 换成自己的就行 <template><div class"box-bim w100" ref&…
阅读更多...
CSharp: Oracle Stored Procedure query table

CSharp: Oracle Stored Procedure query table

存储过程查询postgreSQL,Oracle 和sql server,Mysql 有区别。程序调用也是有区别。 oracle sql script: CREATE OR REPLACE PROCEDURE procSelectSchool(paramSchoolId IN char,p_cursor OUT SYS_REFCURSOR ) AS BEGINOPEN p_cursor FORSELECT *FROM SchoolWHERE SchoolId p…
阅读更多...
C语言基础——指针（4）

C语言基础——指针（4）

一&#xff0e; 字符指针变量 字符指针变量的使用和整型指针变量的使用方法相似&#xff0c;以下是其基本使用方法的例子&#xff1a; &#xff08;1&#xff09;字符指针变量还有一种使用方法&#xff1a; const char* p "abcd" 需…
阅读更多...
Net9解决Spire.Pdf替换文字后，文件格式乱掉解决方法

Net9解决Spire.Pdf替换文字后，文件格式乱掉解决方法

官方文档 https://www.e-iceblue.com/Tutorials/Spire.PDF/Program-Guide/Text/Find-and-replace-text-on-PDF-document-in-C.html C# 在 PDF 中查找替换文本 原文件如下图&#xff0c;替换第一行的新编码&#xff0c;把41230441044替换为41230441000 替换代码如下&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023