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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/60634.shtml

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

相关文章

LabVIEW导入并显示CAD DXF文件图形 程序见附件

LabVIEW导入并显示CAD DXF文件图形 程序见附件 LabVIEW导入并显示CAD DXF文件图形 程序见附件 - 北京瀚文网星科技有限公司 LabVIEW广泛应用于自动化、数据采集、图形显示等领域。对于涉及CAD图形的应用&#xff0c;LabVIEW也提供了一些方法来导入和显示CAD DXF文件&#x…

数据结构---详解栈

一、栈的概念和结构 栈&#xff1a;⼀种特殊的线性表&#xff0c;其只允许在固定的⼀端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&a…

Python Plotly 库使用教程

Python Plotly 库使用教程 引言 数据可视化是数据分析中至关重要的一部分&#xff0c;它能够帮助我们更直观地理解数据、发现潜在的模式和趋势。Python 提供了多种数据可视化库&#xff0c;其中 Plotly 是一个功能强大且灵活的库&#xff0c;支持交互式图表的创建。与静态图表…

怎么样绑定域名到AWS(亚马逊云)服务器

1&#xff0c;拿着你买的域名去亚马逊申请一个证书。申请证书分两种&#xff0c;一种是去亚马逊后台填域名手动申请 &#xff0c;另一种是通过API来申请&#xff0c;类似如下代码&#xff1a; 2、证验证书。有两种方式&#xff1a;一种是通过邮件&#xff0c;另一种去到域名提供…

Dubbo源码解析(三)

一、Dubbo整合Spring启动流程 Dubbo的使用可以不依赖Spring&#xff0c;但是生产环境中Dubbo都是整合到Spring中一起使用&#xff0c;所以本章就解析Dubbo整合Spring的启动流程 一、传统的xml解析方式 一、Dubbo配置解析流程 在Java 中&#xff0c;一切皆对象。在JDK 中使用…

【ubuntu】Geogebra

Geogebra 几何作图工具 是一款跨平台的几何作图工具软件&#xff0c; 目前已经覆盖了&#xff0c; windows&#xff0c;android&#xff0c; mac, linux 等操作系统。 Ubuntu 现状 Ubuntu 自带应用市场 Ubuntu 自带应用市场目前只有 Geogebra 4.0 版本&#xff0c; 不能画立…

Qt 编写插件plugin,支持接口定义信号

https://blog.csdn.net/u014213012/article/details/122434193?spm1001.2014.3001.5506 本教程基于该链接的内容进行升级&#xff0c;在编写插件的基础上&#xff0c;支持接口类定义信号。 环境&#xff1a;Qt5.12.12 MSVC2017 一、创建项目 新建一个子项目便于程序管理【…

MFC工控项目实例二十九主对话框调用子对话框设定参数值

在主对话框调用子对话框设定参数值&#xff0c;使用theApp变量实现。 子对话框各参数变量 CString m_strTypeName; CString m_strBrand; CString m_strRemark; double m_edit_min; double m_edit_max; double m_edit_time2; double …

x-cmd pkg | lf - 轻量级终端文件管理器,开销低,效率高,适合资源受限的环境

目录 简介快速上手安装使用 技术特点竞品和相关项目进一步阅读 简介 lf&#xff08;list files&#xff09;是 github.com/gokcehan 用 Go 开发的轻量级终端文件管理器&#xff0c;能提供一个通过键盘快捷键进行文件浏览、操作和管理的方法。它的界面风格和操作模式类似于 ran…

D64【python 接口自动化学习】- python基础之数据库

day64 SQL-DQL-基础查询 学习日期&#xff1a;20241110 学习目标&#xff1a;MySQL数据库-- 133 SQL-DQL-基础查询 学习笔记&#xff1a; 基础数据查询 基础数据查询-过滤 总结 基础查询的语法&#xff1a;select 字段列表|* from 表过滤查询的语法&#xff1a;select 字段…

力士乐工控机触摸屏面板维修CFG-BTV40.BN

力士乐工控机触摸屏维修包括BTV20系列&#xff0c;BTV30系列&#xff0c;BTV40等系列均可提供维修服务。 力士乐工控机维修&#xff0c;先区分故障是来自小信号处理部分&#xff0c;还是功率部分故障&#xff0c;很多设备的上位机会有所提示。处理部分包括i/o端口&#xff0c;…

数据挖掘全景:从基础理论到经典算法的深度探索

1 绪论--1.1 数据挖掘的概念和任务 1. (单选题)目前数据分析与挖掘领域的现实情况描述不正确的是&#xff08;&#xff09; A. 信息爆炸 B. 数据爆炸 C. 信息贫瘠 D.数据收集能力远远超过人们的分析和理解能力 2. (单选题)你认为下面哪种数据对于数据挖掘算法来说最简单最…

简易入手《SOM神经网络》的本质与原理

原创文章&#xff0c;转载请说明来自《老饼讲解神经网络》:www.bbbdata.com 关于《老饼讲解神经网络》&#xff1a; 本网结构化讲解神经网络的知识&#xff0c;原理和代码。 重现matlab神经网络工具箱的算法&#xff0c;是学习神经网络的好助手。 目录 一、入门原理解说 01.…

ubuntu 安装kafka-eagle

上传压缩包 kafka-eagle-bin-2.0.8.tar.gz 到集群 /root/efak 目录 cd /root/efak tar -zxvf kafka-eagle-bin-2.0.8.tar.gz cd /root/efak/kafka-eagle-bin-2.0.8 mkdir /root/efakmodule tar -zxvf efak-web-2.0.8-bin.tar.gz -C /root/efakmodule/ mv /root/efakmodule/efak…

小程序服务商常见问题

1: 服务器域名和开发域名都不带https前缀, 业务域名每个都需要校验文件 2: 手机开了调试可以请求, 关闭调试无法请求, 体验版接口请求不同 答: 服务商还需要通过接口给小程序设置业务域名; 但不需要校验文件; 注意: 体验版通过快速配置小程序服务器域名接口会不生效, 用普通的 …

Llama架构及代码详解

Llama的框架图如图&#xff1a; 源码中含有大量分布式训练相关的代码&#xff0c;读起来比较晦涩难懂&#xff0c;所以我们对llama自顶向下进行了解析及复现&#xff0c;我们对其划分成三层&#xff0c;分别是顶层、中层、和底层&#xff0c;如下&#xff1a; Llama的整体组成…

Docker在微服务架构中的最佳实践

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 Docker在微服务架构中的最佳实践 Docker在微服务架构中的最佳实践 Docker在微服务架构中的最佳实践 引言 Docker 概述 定义与原理…

排序算法 - 冒泡

文章目录 1. 冒泡排序1.1 简介1.2 基本步骤&#xff1a;1.3 示例代码&#xff08;C&#xff09;1.4 复杂度分析1.5 动画展示 1. 冒泡排序 1.1 简介 冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法&#xff0c;其基本思想是通过相邻元素的比较和交换&#…

Nginx在Windows上和Linux上(Docker启动)分别配置基本身份认证示例

场景 Nginx代理的资源或网站等&#xff0c;url直接暴露有风险&#xff0c;需要添加身份认证&#xff0c;即输入用户名密码后才能成功访问。 注&#xff1a; 博客&#xff1a;霸道流氓气质-CSDN博客 实现 Windows上配置Nginx实现基本身份认证 修改nginx的配置文件 添加基…

丹摩征文活动|丹摩智算平台使用指南

目录 1. 登录平台与工作环境设置1.1 访问与登录1.2 创建或选择项目1.3 初始化项目环境 2. 数据上传与管理2.1 数据上传2.2 数据管理与预处理2.3 数据可视化 3. 模型构建与训练3.1 模型选择3.2 参数配置3.3 模型训练与评估 4. 模型部署与应用4.1 模型部署4.2 接口调用与集成4.3 …