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

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

news 2025/9/21 12:33:50

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

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/9/21 5:06:39

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/9/21 0:48:33

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/8/29 10:31:59

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/7/25 23:24:13

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/9/13 10:07:19

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/9/18 12:53:05

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/9/4 1:22:39