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

学习threejs，使用第一视角控制器FirstPersonControls控制相机

news 2025/7/10 15:35:01

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️第一视角控制器FirstPersonControls控制相机
  • 二、🍀利用THREE.FirstPersonControls实现第一视角控制
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用第一视角控制器FirstPersonControls控制相机，实现游戏第一人称效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️第一视角控制器FirstPersonControls控制相机

THREE.FirstPersonControls 是 Three.js 的第一视角控制器，允许用户以第一人称视角进行三维场景的浏览、漫游。使用这个控制器时，用户可以通过鼠标或键盘来控制视角。
相关操控方法：
移动鼠标 向四周看
上、下、左、右方向键 向上、下、左、右移动
W 向前移动
A 向左移动
S 向后移动
D 向右移动
R 向上移动
F 向下移动
Q 停止移动
创建方法：
new THREE.FirstPersonControls(camera)
参数camera 为Threejs的相机对象
属性：
在这里插入图片描述

方法：
handleResize () : undefined 若应用程序窗口大小发生改变，则应当调用此函数。
lookAt ( vector : Vector3 ) : FirstPersonControls vector - 一个表示目标位置的向量。 或者，世界空间位置的x、y、z分量。 确保控制器将相机方向朝向到所传入的目标的位置。
lookAt ( x : Float, y : Float, z : Float ) : FirstPersonControls vector - 一个表示目标位置的向量。 或者，世界空间位置的x、y、z分量。 确保控制器将相机方向朝向到所传入的目标的位置。

二、🍀利用THREE.FirstPersonControls实现第一视角控制

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.PointLight点光源，设置点光源位置，设置点光源投影，scene添加点光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具，创建THREE.MTLLoader加载器，调用load方法获取模型材质信息，在MTLLoader的load方法中创建THREE.OBJLoader obj模型加载器，OBJLoader 加载器设置材质为从MTLLoader获取的材质，调用OBJLoader的load方法，加载模型， 生成mesh物体，scene场景加入mesh和THREE.AxesHelper坐标辅助工具。
  • 6、创建第一视角控制器FirstPersonControls，设置控制器相关参数。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn44(使用第一视角控制器FIRSTPERSONCONTROLS控制相机)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/js/Detector.js"></script><script src="lib/js/chroma.js"></script><script src="lib/threejs/127/three.js-master/examples/js/loaders/OBJLoader.js"></script><script src="lib/threejs/127/three.js-master/examples/js/loaders/MTLLoader.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/FirstPersonControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>html, body {margin: 0;height: 100%;}canvas {display: block;}
</style>
<body onload="draw()">
</body>
<script>var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.sortObjects = falsedocument.body.appendChild(renderer.domElement)}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000)camera.position.set(0, 10, 50)camera.lookAt(new THREE.Vector3(0, 0, 0))}var scenevar initScene = () => {scene = new THREE.Scene()}var lightvar initLight = () => {scene.add(new THREE.AmbientLight)light = new THREE.PointLight(0xffffff)light.position.set(0, 50, 0)light.castShadow = truescene.add(light)}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)var mtlLoader = new THREE.MTLLoader()mtlLoader.setPath('data/model/city/')mtlLoader.load('city.mtl', material => {var objLoader = new THREE.OBJLoader()objLoader.setMaterials(material)objLoader.setPath('data/model/city/')objLoader.load('city.obj', object => {var scale = chroma.scale(['yellow', '008ae5'])setRandomColors(object, scale)scene.add(object)})})}var setRandomColors = (object, scale) => {//获取children数组var children = object.children//如果当前模型有子元素，则遍历子元素if (children && children.length > 0) {children.forEach(function (e) {setRandomColors(e, scale)})}else {if (object instanceof THREE.Mesh) {//如果当前的模型是楼层，则设置固定的颜色，并且透明化if (Array.isArray(object.material)) {for (var i = 0; i < object.material.length; i++) {var material = object.material[i]var color = scale(Math.random()).hex()if (material.name.indexOf("building") === 0) {material.color = new THREE.Color(color)material.transparent = truematerial.opacity = 0.7material.depthWrite = false}}}// 如果不是场景组，则给当前mesh添加纹理else {//随机当前模型的颜色object.material.color = new THREE.Color(scale(Math.random()).hex())}}}}var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls = () => {controls = new THREE.FirstPersonControls(camera)controls.lookSpeed = 0.2 //鼠标移动查看的速度controls.movementSpeed = 20 //相机移动速度controls.noFly = truecontrols.constrainVertical = true //约束垂直controls.verticalMin = 1.0controls.verticalMax = 2.0controls.lon = -100 //进入初始视角x轴的角度controls.lat = 0 //初始视角进入后y轴的角度}var render = () => {renderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var clock = new THREE.Clock()var animate = () => {render()stats.update()controls.update(clock.getDelta())requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

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

相关文章：

学习threejs，使用第一视角控制器FirstPersonControls控制相机

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

编程日记 2024/11/14 21:58:35

odoo17 前端 在头像下拉 dropdown 自定义菜单

odoo17 前端 在头像下拉 dropdown 自定义菜单 其实很简单, 我们先找到原来已经创建好的, 找到代码位置 使用 我的资料 为例 odoo-17.0\addons\hr\static\src\user_menu\my_profile.js /** odoo-module **/import { _t } from "web/core/l10n/translation"; import …...

编程日记 2024/11/14 21:56:34

如何管理好自己的LabVIEW项目

在LabVIEW项目开发中&#xff0c;项目管理对于提高开发效率、确保项目质量、减少错误和维护成本至关重要。以下从项目规划、代码管理、测试与调试、版本控制、团队协作等方面&#xff0c;分享LabVIEW项目管理的体会。 ​ 1. 项目规划与需求分析 关键步骤&#xff1a; 需求分析…...

编程日记 2024/11/14 21:53:30

GPT-5 要来了：抢先了解其创新突破

Microsoft 的工程师计划于 2024 年 11 月在 Azure 上部署 Orion (GPT-5)。虽然这一版本不会向公众开放&#xff0c;但其上线被视为人工智能领域的一个重要里程碑&#xff0c;并将产生深远的影响。 文章目录 GPT-5 真的要来了GPT-4 的局限性GPT-5 的创新突破与遗留挑战GPT-5 预期…...

编程日记 2024/11/14 21:50:27

@ComponentScan：Spring Boot中的自动装配大师

文章目录 1. 什么是ComponentScan注解&#xff1f;2. 为什么需要ComponentScan注解&#xff1f;3. 如何使用ComponentScan注解&#xff1f;4. ComponentScan注解的高级用法5. 注意事项6. 结语推荐阅读文章 在Spring Boot的世界里&#xff0c;自动装配&#xff08;Auto-wiring&a…...

编程日记 2024/11/14 21:46:23

uniapp 面试题总结常考

uniapp 文件详情 ├── pages # 页面文件夹 │ │── index # index文件夹 │ │ │── index.vue # index页面 ├── static # 静态资源&#xff08;类似于图片 字体图标等&#xff09; │ …...

编程日记 2024/11/14 21:39:16

花了36元给我的个人博客上了一道防御

前言 双11活动薅了个羊毛&#xff0c;1折的价格买了一年的EdgeOne&#xff0c;正好可以为我的个人博客站点保驾护航。本文就来看看个人博客接入EdgeOne后的效果&#xff0c;如果也想薅羊毛的&#xff0c;赶紧去双11活动页面&#xff0c;不要错过这次机会。 EdgeOne 介绍 先简…...

编程日记 2024/11/14 21:38:15

浅谈C++之内存管理

一、基本介绍 内存管理是C最令人切齿痛恨的问题&#xff0c;也是C最有争议的问题&#xff0c;C高手从中获得了更好的性能&#xff0c;更大的自由&#xff0c;C菜鸟的收获则是一遍一遍的检查代码和对C的痛恨&#xff0c;但内存管理在C中无处不在&#xff0c;内存泄漏几乎在每个C…...

编程日记 2024/11/14 21:35:12

719. 找出第 K 小的数对距离

目录 题目解法 题目 数对 (a,b) 由整数 a 和 b 组成&#xff0c;其数对距离定义为 a 和 b 的绝对差值。 给你一个整数数组 nums 和一个整数 k &#xff0c;数对由 nums[i] 和 nums[j] 组成且满足 0 < i < j < nums.length 。返回 所有数对距离中 第 k 小的数对距离。…...

编程日记 2024/11/14 21:33:10

【图像压缩感知】论文阅读：Self-supervised Scalable Deep Compressed Sensing

tips&#xff1a;本文为个人阅读论文的笔记&#xff0c;仅作为学习记录所用。 Title&#xff1a;Self-supervised Scalable Deep Compressed Sensing Journal&#xff1a;IJCV 2024 代码链接&#xff1a;GitHub - Guaishou74851/SCNet: Self-Supervised Scalable Deep Comp…...

编程日记 2024/11/14 21:29:06

Swift 宏（Macro）入门趣谈（一）

概述 苹果在去年 WWDC 23 中就为 Swift 语言新增了“其利断金”的重要小伙伴 Swift 宏&#xff08;Swift Macro&#xff09;。为此&#xff0c;苹果特地用 2 段视频&#xff08;入门和进阶&#xff09;颇为隆重的介绍了它。 那么到底 Swift 宏是什么&#xff1f;有什么用&…...

编程日记 2024/11/14 21:27:04

linux常见资源查询命令（持续更新）

年纪大了&#xff0c;很多命令记不住了&#xff0c;但偶尔也需要用到&#xff0c;通过搜索也需要点时间&#xff0c;特此记录。 不同操作系统命令会有所区别&#xff0c;下面是大部分时候工作的机器系统&#xff1a; CentOS release 7.5 (Final)Kernel \r on an \m 1、实时查…...

编程日记 2024/11/14 21:25:02

JavaWeb：文件上传1

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…...

编程日记 2024/11/14 21:22:59

C++ 中的异常处理机制是怎样的？

异常处理的基本概念&#xff1a; 异常: 程序在运行时发生的错误或意外情况。 抛出异常: 使用 throw 关键字将异常传递给调用堆栈。 捕获异常: 使用 try-catch 块捕获和处理异常。 异常类型: 表示异常类别的标识符。 异常处理流程&#xff1a; 抛出异常: 当检测到错误或意…...

编程日记 2024/11/14 21:19:57

SwiftUI-基础入门

开发OS X 图形应用界面时有三种实现方式&#xff1a;XIB、Storyboard、SwiftUI。Storyboard基于XIB做了优化&#xff0c;但XIB基本被放弃了&#xff0c;而SwiftUI是苹果公司后来开发的一套编程语言&#xff0c;用来平替Objective-C。虽然现在Swift 6 还是有些不完善的地方&…...

编程日记 2024/11/14 21:18:55

C++builder中的人工智能（20）：如何在C++中开发一个简单的Hopfield网络

在AI技术的发展历史中&#xff0c;模式识别模型是最伟大的AI技术之一&#xff0c;尤其是从像素图像中读取文本。其中一个是Hopfield网络&#xff08;或称为Ising模型的神经网络或Ising–Lenz–Little模型&#xff09;&#xff0c;这是一种递归神经网络形式&#xff0c;由John J…...

编程日记 2024/11/14 21:17:54

video2gif容器构建指南

一、介绍 1.项目概述 Video2Gif 项目旨在提供一种便捷的方式&#xff0c;让用户能够将视频中的精彩片段快速转换为 GIF 动画。GIF 动画因其循环播放、文件体积小等特点&#xff0c;在社交媒体、聊天工具中广泛应用&#xff0c;用于表达情感、分享趣事等。 2.核心功能 视频导…...

编程日记 2024/11/14 21:15:52

探秘Spring Boot中的@Conditional注解

文章目录 1. 什么是Conditional注解&#xff1f;2. 为什么需要Conditional注解&#xff1f;3. 如何使用Conditional注解&#xff1f;4. Conditional注解的高级用法5. 注意事项6. 结语推荐阅读文章 在Spring Boot的世界里&#xff0c;配置的灵活性和多样性是至关重要的。有时候&…...

编程日记 2024/11/14 21:13:50

树形dp总结

这类题型在 dp 中很常见&#xff0c;于是做一个总结吧&#xff01;&#xff01;&#xff01; 最经典的题&#xff1a;没有上司的舞会 传送门&#xff1a;没有上司的舞会 - 洛谷 状态表示&#xff1a; dp[i][0] 为 以 i 为根的子树中&#xff0c;选择 i 节点的最大欢乐值 d…...

编程日记 2024/11/14 21:11:48

【算法一周目】双指针（2）

目录 有效三角形的个数 解题思路 C代码实现 和为s的两个数字 解题思路 C代码实现 三数之和 解题思路 C代码实现 四数之和 解题思路 C代码实现 有效三角形的个数 题目链接&#xff1a;611. 有效三角形的个数题目描述&#xff1a;给定一个包含非负整数的数组nums&…...

编程日记 2024/11/14 21:08:45

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/7/10 6:29:41

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/7/6 4:52:27

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/6/21 13:00:47

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/6/17 12:13:20

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/9 9:20:33

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/7/10 9:20:12

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/7/8 3:48:19

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/7/9 17:59:19

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/6/15 11:47:07

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2025/7/9 14:33:19