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

学习threejs，使用FlyControls相机控制器

news 2026/1/17 18:08:01

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

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

相关文章：

学习threejs，使用FlyControls相机控制器

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

编程日记 2025/1/20 4:26:15

在 C++ 中实现调试日志输出

在 C 编程中&#xff0c;调试日志对于定位问题和优化代码至关重要。有效的调试日志不仅能帮助我们快速定位错误&#xff0c;还能提供有关程序运行状态的有价值的信息。本文将介绍几种常用的调试日志输出方法&#xff0c;并教你如何在日志中添加时间戳。 1. 使用 #ifdef _DEBUG…...

编程日记 2025/1/20 4:21:09

从零搭建一套远程手机的桌面操控和文件传输的小工具

从零搭建一套远程手机的桌面操控和文件传输的小工具 --ADB连接专题 一、前言 前面的篇章中&#xff0c;我们确定了通过基于TCP连接的ADB控制远程手机的操作思路。本篇中我们将进行实际的ADB桥接的具体链路搭建工作&#xff0c;从原理和实际部署和操作层面上&#xff0c;从零…...

编程日记 2025/1/20 4:19:06

Python中的静态方法

目录 什么是静态方法&#xff1f;静态方法的特点 定义和调用静态方法示例&#xff1a;定义一个简单的静态方法 静态方法 vs 类方法 vs 实例方法示例对比 静态方法的应用场景1. &#x1f527; 工具函数2. &#x1f3ed; 工厂方法3. ✅ 数据验证 静态方法的限制总结 静态方法是 P…...

编程日记 2025/1/20 4:09:58

【C++】面试题整理（未完待续）

【C】面试题整理 文章目录 一、概述二、C基础2.1 - 指针在 32 位和 64 位系统中的长度2.2 - 数组和指针2.3 - 结构体对齐补齐2.4 - 头文件包含2.5 - 堆和栈的区别2.6 - 宏函数比较两个数值的大小2.7 - 冒泡排序2.8 - 菱形继承的内存布局2.9 - 继承重写2.10 - 如何禁止类在栈上分…...

编程日记 2025/1/20 4:08:56

每日一题 403. 青蛙过河

403. 青蛙过河 动态规划&#xff0c;状态转移 和 上一步步长 和 当前位置点 有关系 class Solution { public:bool canCross(vector<int>& stones) {int n stones.size();unordered_map<int,unordered_set<int>> dp;unordered_map<int,int> mp;…...

编程日记 2025/1/20 4:04:52

Spring Boot 集成 MongoDB：启动即注入的便捷实践

引言 在现代后端开发中&#xff0c;Spring Boot 凭借其快速开发、自动配置等特性深受开发者喜爱&#xff0c;而 MongoDB 以其灵活的文档存储结构和出色的扩展性&#xff0c;成为处理非结构化数据的首选数据库之一。将两者结合&#xff0c;利用 Spring Boot 的自动配置功能&…...

编程日记 2025/1/20 3:57:45

【电视盒子】HI3798MV300刷机教程笔记/备份遥控码修复遥控器/ADB/线刷卡刷/电视盒子安装第三方应用软件

心血来潮&#xff0c;看到电视机顶盒满天飞的广告&#xff0c;想改造一下家里的电视盒子&#xff0c;学一下网上的人刷机&#xff0c;但是一切都不知道怎么开始&#xff0c;虽然折腾了一天&#xff0c;以失败告终&#xff0c;还是做点刷机笔记。 0.我的机器 年少不会甄别&…...

编程日记 2025/1/20 3:56:44

R语言的文件操作

R语言的文件操作 引言 在数据科学和分析的过程中&#xff0c;文件操作是不可或缺的一部分。R语言作为一种强大的统计计算和图形作图的编程语言&#xff0c;提供了丰富的文件操作函数&#xff0c;使得用户能够方便地读取和保存数据。本文将详细介绍R语言中的文件操作&#xff…...

编程日记 2025/1/20 3:54:42

锐捷路由器网关RG-NBR6135-E和锐捷交换机 Ruijie Reyee RG-ES224GC 电脑登录web方法

2025年1月17日22:29:35 最近淘了点东西&#xff0c;准备在家里搞一套深度学习的服务器&#xff0c;先把网关和交换机搞到了 锐捷路由器网关RG-NBR6135-E 电脑登录web方法 在拿到机器的时候&#xff0c;如果不是全新建议拿根牙签&#xff0c;差入reset 5-10秒,灯光会全部闪几下…...

编程日记 2025/1/20 3:52:41

论文速读|NoteLLM: A Retrievable Large Language Model for Note Recommendation.WWW24

论文地址&#xff1a;https://arxiv.org/abs/2403.01744 bib引用&#xff1a; misc{zhang2024notellmretrievablelargelanguage,title{NoteLLM: A Retrievable Large Language Model for Note Recommendation}, author{Chao Zhang and Shiwei Wu and Haoxin Zhang and Tong Xu…...

编程日记 2025/1/20 3:49:37

在线图片转为excel工具

在线图片转为excel工具&#xff0c;无需登录&#xff0c;无需成本&#xff0c;用完就走。 包括中文和英文版本。 官网地址&#xff1a; https://img2excel.openai2025.com 效果&#xff1a;...

编程日记 2025/1/20 3:46:32

深度学习篇---数据集分类

文章目录 前言第一部分&#xff1a;VOC数据集标签、COCO数据集格式1.VOC数据集标签的特点及优缺点特点优点缺点 2.COCO数据集标签的特点及优缺点特点优点缺点 3.YOLO数据集标签的特点及优缺点特点优点缺点 第二部分&#xff1a;VOC格式和YOLO格式1.VOC格式3.YOLO格式3.区别(1)文…...

编程日记 2025/1/20 3:35:21

Unity3D仿星露谷物语开发23之拿起道具的动画

1、目标 当点击库存栏上可以carry的道具时&#xff0c;首先arms替换为carry状态&#xff0c;同时手上拿着被点击的道具。当再次点击同一个道具时&#xff0c;ams替换为idle状态&#xff0c;手上放下之前的道具。 这个最主要的是要学会使用AnimatorOverrideController类。 2、…...

编程日记 2025/1/20 3:27:12

素描风格渲染

素描风格渲染&#xff08;Hatching Style Rendering&#xff09;&#xff0c;是一种非真实感渲染&#xff08;NPR&#xff09;&#xff0c;主要目的是使3D模型看起来像 手绘素描的视觉效果。这种风格的渲染常用于游戏、动画和电影中&#xff0c;用来创造一种独特的艺术风格 1、…...

编程日记 2025/1/20 3:26:11

STM32使用DSP库 Keil方式添加

文章目录 前言一、添加DSP库二、使能FPU及配置1. 使能FPU2. 增加编译的宏3.增加头文件的检索路径三. 验证1. 源码中添加2.代码测试前言 添加DSP有两种方案，本文采用的是是Keil 中添加。 一、添加DSP库 在创建好的工程中添加DSP库：步骤如下： 步骤1：选择运行环境管理； 步…...

编程日记 2025/1/20 3:21:06

【机器学习实战入门项目】MNIST数字分类机器学习项目

Python 深度学习项目&#xff1a;手写数字识别 为了使机器更加智能&#xff0c;开发者们正在深入研究机器学习和深度学习技术。人类通过不断练习和重复来学习执行某项任务&#xff0c;从而记住如何完成这些任务。然后&#xff0c;大脑中的神经元会自动触发&#xff0c;他们能够…...

编程日记 2025/1/20 2:59:41

利用 LNMP 实现 WordPress 站点搭建

部署MySQL数据库 在主机192.168.138.139主机部署数据库服务 包安装数据库 apt-get install mysql-server 创建wordpress数据库和用户并授权 mysql> create database wordpress;#MySQL8.0要求指定插件 mysql> create user wordpress192.168.138.% identified with mys…...

编程日记 2025/1/20 2:44:26

模块化架构与微服务架构，哪种更适合桌面软件开发？

前言 在现代软件开发中&#xff0c;架构设计扮演着至关重要的角色。两种常见的架构设计方法是模块化架构与微服务架构。它们各自有独特的优势和适用场景&#xff0c;尤其在C#桌面软件开发领域&#xff0c;模块化架构往往更加具有实践性。本文将对这两种架构进行对比&#xff0…...

编程日记 2025/1/20 2:43:25

2025.1.17——1200

2025.1.17——1200 Q1. 1200 Jellyfish has n n n green apples with values a 1 , a 2 , … , a n a_1, a_2, \dots, a_n a1​,a2​,…,an​ and Gellyfish has m m m green apples with values b 1 , b 2 , … , b m b_1,b_2,\ldots,b_m b1​,b2​,…,bm​. They will …...

编程日记 2025/1/20 2:40:21

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2026/1/16 18:39:29

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/1/15 5:23:00

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/1/15 4:57:52

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/15 4:57:58

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2026/1/15 5:01:42

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

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

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