学习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.mzph.cn/web/66077.shtml

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

相关文章

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)

使用python技术栈开发的简单mcp server 需要安装 MCP server的需要使用python-sdk,python需要 3.10,安装如下 pip install mcpPS: MCP官方使用的是uv包管理工具,我平时使用pip比较多,所以文中以pip为主。因为mcp的一些依赖包版本并不是最新的,所以最好弄一个干净的环境…

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) 算法详解及案例分析1. 引言2. PID控制器的基本概念2.1 PID控制器的定义2.2 PID控制器的核心思想2.3 PID控制器的应用领域3. PID控…

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 知识速览

文章目录 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缓存机制

一. 简述&#xff1a; 缓存是一个大型系统中非常重要的一个组成部分。在硬件层面&#xff0c;大部分的计算机硬件都会用缓存来提高速度&#xff0c;比如CPU会有多级缓存、RAID卡也有读写缓存。在软件层面&#xff0c;我们用的数据库就是一个缓存设计非常好的例子&#xff0c;在…

Java 面试中的高频算法题详解

&#x1f496; 欢迎来到我的博客&#xff01; 非常高兴能在这里与您相遇。在这里&#xff0c;您不仅能获得有趣的技术分享&#xff0c;还能感受到轻松愉快的氛围。无论您是编程新手&#xff0c;还是资深开发者&#xff0c;都能在这里找到属于您的知识宝藏&#xff0c;学习和成长…

【Python项目】手写数字识别系统

【Python项目】手写数字识别系统 技术简介&#xff1a;采用Python技术、Django框架、MYSQL数据库等实现。 系统简介&#xff1a;手写数字识别系统主要的功能有手写字识别、手写字管理、修改密码、个人信息和用户管理。 背景&#xff1a; 在当今这个飞速发展的时代&#xff0c;…

Springboot + vue 小区物业管理系统

&#x1f942;(❁◡❁)您的点赞&#x1f44d;➕评论&#x1f4dd;➕收藏⭐是作者创作的最大动力&#x1f91e; &#x1f496;&#x1f4d5;&#x1f389;&#x1f525; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;欢迎留言讨论 &#x1f525;&#x1f525;&…

空指针:HttpSession异常,SpringBoot集成WebSocket

异常可能性&#xff1a; 404 &#xff1a; 请检查拦截器是否将请求拦截WebSocket握手期间HttpSession为空 HttpSession为空 方法一 &#xff1a; 网上参考大量的文档&#xff0c;有说跟前端请求域名有关系的。 反正对我来说&#xff0c;没啥用无法连接。 需使用 localhost&a…

什么是视频孪生智慧能源?视频孪生智慧能源的应用案例

‌视频孪生智慧能源是集三维地理信息系统、视频虚实融合、数字孪生、人工智能等多技术于一体的综合应用&#xff0c;旨在实现对能源系统的实时、动态、全方位监控和管理‌。 具体来说&#xff0c;视频孪生智慧能源通过以下方式实现其功能&#xff1a; ‌技术融合‌&#xff1a;…

【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语句

一、在空白列插入&#xff0c;选择需要的列 "INSERT INTO tab_name1 (code, name) VALUES ("&A1&", "&B1&");"二、 拖动填充块&#xff0c;或者双击填充块&#xff08;可以快速填充整列&#xff09; 三、直接把生成的 insert 语…

前端组件开发:组件开发 / 定义配置 / 配置驱动开发 / 爬虫配置 / 组件V2.0 / form表单 / table表单

一、最早的灵感 最早的灵感来自sprider / 网络爬虫 / 爬虫配置&#xff0c;在爬虫爬取网站文章时候&#xff0c;会输入给爬虫一个配置文件&#xff0c;里边的内容是一个json对象。里边包含了所有想要抓取的页面的信息。爬虫通过这个配置就可以抓取目标网站的数据。其实本文要引…

43.Textbox的数据绑定 C#例子 WPF例子

固定最简步骤&#xff0c;包括 XAML&#xff1a; 题头里引入命名空间 标题下面引入类 box和block绑定属性 C#&#xff1a; 通知的类&#xff0c;及对应固定的任务 引入字段 引入属性 属性双触发&#xff0c;其中一个更新block的属性 block>指向box的属性 从Textbo…

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等服务

龙蜥操作系统 Anolis OS 8 是 OpenAnolis 社区推出的完全开源、中立、开放的发行版&#xff0c;它支持多计算架构&#xff0c;也面向云端场景优化&#xff0c;兼容 CentOS 软件生态。Anolis OS 8 旨在为广大开发者和运维人员提供稳定、高性能、安全、可靠、开源的操作系统服务。…

FPGA EDA软件的位流验证

位流验证&#xff0c;对于芯片研发是一个非常重要的测试手段&#xff0c;对于纯软件开发人员&#xff0c;最难理解的就是位流验证。在FPGA芯片研发中&#xff0c;位流验证是在做什么&#xff0c;在哪些阶段需要做位流验证&#xff0c;如何做&#xff1f;都是问题。 我们先整体的…