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

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

news 2026/5/22 1:20:51

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

CANN/asc-devkit浮点ilogbf函数文档

ilogbf 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言&#xff0c;原生支持C和C标准规范&#xff0c;主要由类库和语言扩展层构成&#xff0c;提供多层级API&#xff0c;满足多维场景算子开发诉求。 项目地址: https://gitcode.com/can…...

编程新知 2026/5/21 23:55:13

别再为多设备同步发愁了！手把手教你用NI-DAQmx的‘通道扩展’功能搞定多机箱数据采集

多设备数据采集同步实战&#xff1a;NI-DAQmx通道扩展功能深度解析 在工业测试与科研数据采集领域&#xff0c;工程师们经常面临一个棘手问题&#xff1a;当单个数据采集设备的通道数无法满足需求时&#xff0c;如何实现多个设备的无缝协同工作&#xff1f;想象一下汽车ECU测试…...

编程新知 2026/5/21 20:35:29

终极指南：WinDiskWriter - 简单快速制作Windows启动盘的Mac神器

终极指南&#xff1a;WinDiskWriter - 简单快速制作Windows启动盘的Mac神器 【免费下载链接】windiskwriter &#x1f5a5; Windows Bootable USB creator for macOS. &#x1f6e0; Patches Windows 11 to bypass TPM and Secure Boot requirements. &#x1f47e; UEFI &…...

编程新知 2026/5/21 20:24:51

Diablo Edit2：10分钟掌握暗黑破坏神2存档修改终极指南

Diablo Edit2&#xff1a;10分钟掌握暗黑破坏神2存档修改终极指南 【免费下载链接】diablo_edit Diablo II Character editor. 项目地址: https://gitcode.com/gh_mirrors/di/diablo_edit 厌倦了在暗黑破坏神2中反复刷装备&#xff1f;想要快速测试新build却不想花费40小…...

编程新知 2026/5/21 20:15:53

告别 API 收费！OpenClaw 对接 Ollama，本地大模型免费无限用

OpenClaw 连接 Ollama 本地模型教程 前置准备 已安装并能正常打开 OpenClaw Windows 客户端OpenClaw 顶部 Gateway 状态保持在线电脑可正常联网&#xff0c;能访问 Ollama 官网磁盘空间充足&#xff08;本地模型占用空间较大&#xff09;提前确认待下载的模型名称&#xff08…...

编程新知 2026/5/21 18:09:48

ElevenLabs东北话语音效果翻车？92%开发者忽略的3个声调映射参数，立即校准！

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;ElevenLabs东北话语音效果翻车现象溯源 近期大量中文开发者在使用 ElevenLabs API 生成东北方言语音时&#xff0c;普遍反馈合成结果严重偏离预期——语调生硬、儿化音缺失、语气词&#xff08;如“嘎哈”“瞅…...

编程新知 2026/5/21 18:05:22

别再只删node_modules了！npm run serve报错‘There is likely additional logging output above’的完整排查与修复手册

从日志溯源到根治&#xff1a;npm run serve报错的系统性排查指南 当你满怀期待地敲下npm run serve&#xff0c;却迎面撞上那句"There is likely additional logging output above"时&#xff0c;是否感到一阵无力&#xff1f;删除node_modules重装就像重启电脑——…...

编程新知 2026/5/21 18:00:55

VMPDump终极指南：如何轻松破解VMProtect 3.X x64代码保护

VMPDump终极指南&#xff1a;如何轻松破解VMProtect 3.X x64代码保护 【免费下载链接】vmpdump A dynamic VMP dumper and import fixer, powered by VTIL. 项目地址: https://gitcode.com/gh_mirrors/vm/vmpdump 你是否曾面对被VMProtect保护的软件感到束手无策&#x…...

编程新知 2026/5/21 17:05:22

Nodejs后端服务接入Taotoken实现AI对话功能的具体步骤

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Node.js 后端服务接入 Taotoken 实现 AI 对话功能的具体步骤 1. 准备工作&#xff1a;获取 API 密钥与模型 ID 在开始编写代码之前…...

编程新知 2026/5/21 16:54:50

3分钟搞定百度网盘提取码：新手也能快速上手的终极解决方案

3分钟搞定百度网盘提取码&#xff1a;新手也能快速上手的终极解决方案 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 你是否经常遇到这样的烦恼&#xff1a;朋友分享的百度网盘链接明明就在眼前&#xff0c;却因为缺少那个关…...

编程新知 2026/5/21 16:22:05