學習threejs，使用FlyControls相機控制器

👨??? 主頁： gis分享者
👨??? 感謝各位大佬 點贊👍 收藏? 留言📝 加關注?!
👨??? 收錄于專欄：threejs gis工程師

文章目錄

  • 一、🍀前言
    • 1.1 ??THREE.FlyControls 相機控制器
  • 二、🍀使用FlyControls相機控制器
    • 1. ??實現思路
    • 2. ??代碼樣例

一、🍀前言

本文詳細介紹如何基于threejs在三維場景中使用FlyControls相機控制器，親測可用。希望能幫助到您。一起學習，加油！加油！

1.1 ??THREE.FlyControls 相機控制器

TrackballControls啟用了一種類似于數字內容創建工具（例如Blender）中飛行模式的導航方式。 你可以在3D空間中任意變換攝像機，并且無任何限制（例如，專注于一個特定的目標）。

構造函數：
FlyControls( object : Camera, domElement : HTMLDOMElement )
object: 被控制的攝像機。
domElement: 用于事件監聽的HTML元素。
創建一個新的 FlyControls 實例。

屬性：

.autoForward : Boolean
若該值設為true，初始變換后，攝像機將自動向前移動（且不會停止）。默認為false。
.domElement : HTMLDOMElement
該 HTMLDOMElement 用于監聽鼠標/觸摸事件，該屬性必須在構造函數中傳入。在此處改變它將不會設置新的事件監聽。
.dragToLook : Boolean
若該值設為true，你將只能通過執行拖拽交互來環視四周。默認為false。
.movementSpeed : Number
移動速度，默認為1。
.object : Camera
被控制的攝像機。
.rollSpeed : Number
旋轉速度。默認為0.005。

方法：

.dispose () : undefined
若不再需要該控制器，則應當調用此函數。
.update ( delta : Number ) : undefined
delta: 時間增量值。
更新控制器，常被用在動畫循環中。

事件：
change
當相機已被控件轉換時觸發。

二、🍀使用FlyControls相機控制器

1. ??實現思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三維場景scene
  • 3、初始化camera相機，定義相機位置 camera.position.set，設置相機方向camera.lookAt。
  • 4、創建THREE.SpotLight聚光燈光源spotLight，設置spotLight的位置信息和光照強度，場景scene中添加spotLight。
  • 5、加載幾何模型：創建THREE.OBJMTLLoader加載器loader，loader調用load方法加載‘city.mtl’、‘city.obj’模型。在load回調函數中，設置建筑物網格對象材質顏色和非建筑網格對象材質透明度、放射（光）顏色等信息。具體代碼參考代碼樣例。
  • 6、加入THREE.FlyControls相機控制器flyControls，設置flyControls相關參數。加入stats監控器，監控幀數信息。

2. ??代碼樣例

<!DOCTYPE html>
<html>
<head><title>學習threejs，使用FlyControls相機控制器</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/OBJLoader.js"></script><script type="text/javascript" src="../libs/MTLLoader.js"></script><script type="text/javascript" src="../libs/OBJMTLLoader.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../libs/chroma.js"></script><script type="text/javascript" src="../libs/FlyControls.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 代碼 -->
<script type="text/javascript">// 初始化function init() {var clock = new THREE.Clock();var stats = initStats();// 創建三維場景var scene = new THREE.Scene();// 創建相機var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 創建渲染器，并設置渲染器大小var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;// 設置相機位置和方向camera.position.x = 100;camera.position.y = 100;camera.position.z = 300;camera.lookAt(new THREE.Vector3(0, 0, 0));var flyControls = new THREE.FlyControls(camera);flyControls.movementSpeed = 25;flyControls.domElement = document.querySelector("#WebGL-output");flyControls.rollSpeed = Math.PI / 24;flyControls.autoForward = true;flyControls.dragToLook = false;var ambientLight = new THREE.AmbientLight(0x383838);scene.add(ambientLight);// 添加聚光燈光源，設置位置和光強var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(100, 140, 130);spotLight.intensity = 2;scene.add(spotLight);// 渲染器綁定頁面要素document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;var controls = new function () {};var gui = new dat.GUI();var mesh;var loader = new THREE.OBJMTLLoader();var load = function (object) {var scale = chroma.scale(['red', 'green', 'blue']);setRandomColors(object, scale);mesh = object;scene.add(mesh);};loader.load('../assets/models/city.obj', '../assets/models/city.mtl', load);function setCamControls() {}render();function setRandomColors(object, scale) {var children = object.children;if (children && children.length > 0) {children.forEach(function (e) {setRandomColors(e, scale)});} else {// no children assume contains a meshif (object instanceof THREE.Mesh) {object.material.color = new THREE.Color(scale(Math.random()).hex());if (object.material.name.indexOf("building") == 0) {object.material.emissive = new THREE.Color(0x444444);object.material.transparent = true;object.material.opacity = 0.8;}}}}function render() {stats.update();var delta = clock.getDelta();flyControls.update(delta);webGLRenderer.clear();requestAnimationFrame(render);webGLRenderer.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.pswp.cn/web/66077.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/66077.shtml
英文地址，請注明出處：http://en.pswp.cn/web/66077.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Vue 3前端與Python（Django）后端接口簡單示例

Vue 3前端與Python（Django）后端接口簡單示例

項目 后端&#xff08;Django&#xff09;前端&#xff08;Vue 3&#xff09; 后端&#xff08;Django&#xff09; 創建Django項目和應用&#xff1a; 確保你已經安裝了Django。如果沒有安裝&#xff0c;可以使用以下命令安裝&#xff1a; pip install django創建一個新的Dja…
閱讀更多...
MCP Server開發的入門教程（python和pip）

MCP Server開發的入門教程（python和pip）

使用python技術棧開發的簡單mcp server 需要安裝 MCP server的需要使用python-sdk，python需要 3.10，安裝如下 pip install mcpPS： MCP官方使用的是uv包管理工具，我平時使用pip比較多，所以文中以pip為主。因為mcp的一些依賴包版本并不是最新的，所以最好弄一個干凈的環境…
閱讀更多...
Spark vs Flink分布式數據處理框架的全面對比與應用場景解析

Spark vs Flink分布式數據處理框架的全面對比與應用場景解析

1. 引言 1.1 什么是分布式數據處理框架 隨著數據量的快速增長&#xff0c;傳統的單機處理方式已經無法滿足現代數據處理需求。分布式數據處理框架應運而生&#xff0c;它通過將數據分片分布到多臺服務器上并行處理&#xff0c;提高了任務的處理速度和效率。 分布式數據處理框…
閱讀更多...
隱私計算，構建安全的未來數據空間

隱私計算，構建安全的未來數據空間

大數據產業創新服務媒體 ——聚焦數據 改變商業 在醫療領域&#xff0c;不同醫院之間需要共享患者數據&#xff0c;以提供更全面準確的診斷和治療方案。 傳統的數據處理方式通常是數據經過轉換隱藏重要數據后再進行分析&#xff0c;雖然可以保護數據隱私&#xff0c;但在數據源…
閱讀更多...
PID控制器 (Proportional-Integral-Derivative Controller) 算法詳解及案例分析

PID控制器 (Proportional-Integral-Derivative Controller) 算法詳解及案例分析

PID控制器 (Proportional-Integral-Derivative Controller) 算法詳解及案例分析 目錄 PID控制器 (Proportional-Integral-Derivative Controller) 算法詳解及案例分析1. 引言2. PID控制器的基本概念2.1 PID控制器的定義2.2 PID控制器的核心思想2.3 PID控制器的應用領域3. PID控…
閱讀更多...
rtthread學習筆記系列(3) -- FINSH模塊

rtthread學習筆記系列(3) -- FINSH模塊

文章目錄 3. FINSH模塊3.1MSH3.1.1初始化3.1.1.1FSymtab段3.1.1.2 宏 3.1.2遍歷FINSH命令3.1.3TAB補全實現3.1.3.1 msh_auto_complete3.1.3.2 msh_opt_auto_complete 3.1.4 TAB 子選項自動補全 3.2 SHELL3.2.1 finsh_system_init分配finsh結構體使用內存3.2.2 finsh_thread_ent…
閱讀更多...
Redis 知識速覽

Redis 知識速覽

文章目錄 1. Redis 簡介2. Redis 優缺點3. Redis 高性能4. Redis VM 機制5. Redis 數據類型6. 應用場景7. 持久化8. 過期策略9. 內存相關10. 線程模型11. 事務12. 集群 1. Redis 簡介 定義&#xff1a;Redis 是一個用 C 語言編寫的高性能非關系型&#xff08;NoSQL&#xff09…
閱讀更多...
nginx-lua緩存機制

nginx-lua緩存機制

一. 簡述&#xff1a; 緩存是一個大型系統中非常重要的一個組成部分。在硬件層面&#xff0c;大部分的計算機硬件都會用緩存來提高速度&#xff0c;比如CPU會有多級緩存、RAID卡也有讀寫緩存。在軟件層面&#xff0c;我們用的數據庫就是一個緩存設計非常好的例子&#xff0c;在…
閱讀更多...
Java 面試中的高頻算法題詳解

Java 面試中的高頻算法題詳解

&#x1f496; 歡迎來到我的博客&#xff01; 非常高興能在這里與您相遇。在這里&#xff0c;您不僅能獲得有趣的技術分享&#xff0c;還能感受到輕松愉快的氛圍。無論您是編程新手&#xff0c;還是資深開發者&#xff0c;都能在這里找到屬于您的知識寶藏&#xff0c;學習和成長…
閱讀更多...
【Python項目】手寫數字識別系統

【Python項目】手寫數字識別系統

【Python項目】手寫數字識別系統 技術簡介&#xff1a;采用Python技術、Django框架、MYSQL數據庫等實現。 系統簡介&#xff1a;手寫數字識別系統主要的功能有手寫字識別、手寫字管理、修改密碼、個人信息和用戶管理。 背景&#xff1a; 在當今這個飛速發展的時代&#xff0c;…
閱讀更多...
Springboot + vue 小區物業管理系統

Springboot + vue 小區物業管理系統

&#x1f942;(???)您的點贊&#x1f44d;?評論&#x1f4dd;?收藏?是作者創作的最大動力&#x1f91e; &#x1f496;&#x1f4d5;&#x1f389;&#x1f525; 支持我&#xff1a;點贊&#x1f44d;收藏??留言&#x1f4dd;歡迎留言討論 &#x1f525;&#x1f525;&…
閱讀更多...
空指針：HttpSession異常，SpringBoot集成WebSocket

空指針：HttpSession異常，SpringBoot集成WebSocket

異常可能性&#xff1a; 404 &#xff1a; 請檢查攔截器是否將請求攔截WebSocket握手期間HttpSession為空 HttpSession為空 方法一 &#xff1a; 網上參考大量的文檔&#xff0c;有說跟前端請求域名有關系的。 反正對我來說&#xff0c;沒啥用無法連接。 需使用 localhost&a…
閱讀更多...
什么是視頻孿生智慧能源？視頻孿生智慧能源的應用案例

什么是視頻孿生智慧能源？視頻孿生智慧能源的應用案例

?視頻孿生智慧能源是集三維地理信息系統、視頻虛實融合、數字孿生、人工智能等多技術于一體的綜合應用&#xff0c;旨在實現對能源系統的實時、動態、全方位監控和管理?。 具體來說&#xff0c;視頻孿生智慧能源通過以下方式實現其功能&#xff1a; ?技術融合?&#xff1a;…
閱讀更多...
【update 更新數據語法合集】.NET開源ORM框架 SqlSugar 系列

【update 更新數據語法合集】.NET開源ORM框架 SqlSugar 系列

系列文章目錄 &#x1f380;&#x1f380;&#x1f380; .NET開源 ORM 框架 SqlSugar 系列 &#x1f380;&#x1f380;&#x1f380; 文章目錄 系列文章目錄前言 &#x1f343;一、實體對象更新1.1 單條與批量1.2 不更新某列1.3 只更新某列1.4 NULL列不更新1.5 無主鍵/指定列…
閱讀更多...
006-excel數據輸出insert語句

006-excel數據輸出insert語句

一、在空白列插入&#xff0c;選擇需要的列 "INSERT INTO tab_name1 (code, name) VALUES ("&A1&", "&B1&");"二、 拖動填充塊&#xff0c;或者雙擊填充塊&#xff08;可以快速填充整列&#xff09; 三、直接把生成的 insert 語…
閱讀更多...
前端組件開發：組件開發 / 定義配置 / 配置驅動開發 / 爬蟲配置 / 組件V2.0 / form表單 / table表單

前端組件開發：組件開發 / 定義配置 / 配置驅動開發 / 爬蟲配置 / 組件V2.0 / form表單 / table表單

一、最早的靈感 最早的靈感來自sprider / 網絡爬蟲 / 爬蟲配置&#xff0c;在爬蟲爬取網站文章時候&#xff0c;會輸入給爬蟲一個配置文件&#xff0c;里邊的內容是一個json對象。里邊包含了所有想要抓取的頁面的信息。爬蟲通過這個配置就可以抓取目標網站的數據。其實本文要引…
閱讀更多...
43.Textbox的數據綁定 C#例子 WPF例子

43.Textbox的數據綁定 C#例子 WPF例子

固定最簡步驟&#xff0c;包括 XAML&#xff1a; 題頭里引入命名空間 標題下面引入類 box和block綁定屬性 C#&#xff1a; 通知的類&#xff0c;及對應固定的任務 引入字段 引入屬性 屬性雙觸發&#xff0c;其中一個更新block的屬性 block>指向box的屬性 從Textbo…
閱讀更多...
excel按行檢索（index+match）

excel按行檢索（index+match）

假設你的數據表如下&#xff1a; 假設 數據區域是 A1:D4。 你想查詢某人在某個日期的數據。 實現步驟 公式 在某個單元格中使用以下公式&#xff1a; excel 復制代碼 INDEX(A2:D4, MATCH(“張三”, A2:A4, 0), MATCH(“2025/01/02”, A1:D1, 0)) 2. 公式拆解 MATCH(“張三”,…
閱讀更多...
信創改造-龍蜥操作系統搭載MySql、Tomcat等服務

信創改造-龍蜥操作系統搭載MySql、Tomcat等服務

龍蜥操作系統 Anolis OS 8 是 OpenAnolis 社區推出的完全開源、中立、開放的發行版&#xff0c;它支持多計算架構&#xff0c;也面向云端場景優化&#xff0c;兼容 CentOS 軟件生態。Anolis OS 8 旨在為廣大開發者和運維人員提供穩定、高性能、安全、可靠、開源的操作系統服務。…
閱讀更多...
FPGA EDA軟件的位流驗證

FPGA EDA軟件的位流驗證

位流驗證&#xff0c;對于芯片研發是一個非常重要的測試手段&#xff0c;對于純軟件開發人員&#xff0c;最難理解的就是位流驗證。在FPGA芯片研發中&#xff0c;位流驗證是在做什么&#xff0c;在哪些階段需要做位流驗證&#xff0c;如何做&#xff1f;都是問題。 我們先整體的…
閱讀更多...
最新文章

Copyright @ 2022~2023