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

server/2024/11/14 11:44:09/

👨‍⚕️ 主页： 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.ppmy.cn/server/141847.html

相关文章

aws xray如何实现应用log和trace的关联关系

aws xray如何实现应用log和trace的关联关系

参考资料 https://community.aws/tutorials/solving-problems-you-cant-see-using-aws-x-ray-and-cloudwatch-for-user-level-observability-in-your-serverless-microservices-applicationshttps://stackoverflow.com/questions/76000811/search-cloudwatch-logs-for-aws-xra…
阅读更多...
K8S实现反向代理，负载均衡

K8S实现反向代理，负载均衡

通过K8SUI界面创建nginx服务器&#xff0c;创建内部internal&#xff0c;service 创建成功 同时会创建一个VIP地址&#xff0c;是service内部服务产生的&#xff0c;我们访问10.10.112.2&#xff0c;它会把请求转发给102.142和102.143 此时通过node节点&#xff0c;访问改vip地…
阅读更多...
Java后端请求想接收多个对象入参的数据方法

Java后端请求想接收多个对象入参的数据方法

在Java后端开发中&#xff0c;如果我们希望接收多个对象作为HTTP请求的入参&#xff0c;可以使用Spring Boot框架来简化这一过程。Spring Boot提供了强大的RESTful API支持&#xff0c;能够方便地处理各种HTTP请求。 1.示例&#xff1a;使用Spring Boot接收包含多个对象的HTTP…
阅读更多...
【经验技巧】基于Matlab和ADS的PCIe 4.0 AMI模型建模与仿真分析

【经验技巧】基于Matlab和ADS的PCIe 4.0 AMI模型建模与仿真分析

在Matlab的在线帮助中心&#xff0c;搜索“PCIe4 Transmitter/Receiver IBIS-AMI Model”&#xff0c;按照文档中的操作步骤&#xff0c;进行基于PCIE 4.0的IBIS AMI模型的参数配置&#xff0c;并在SerDes Designer Toolbox中完成调试后&#xff0c;导入到Simulink环境下&#…
阅读更多...
表格字典处理

表格字典处理

正常表格处理字典： <el-table-column prop="exam_status" label="审核状态"> <template #default="scope"> <el-tag v-if="scope.row.exam_status" effect="plain"> {{getDict(dicts.shzt, scope.row.e…
阅读更多...
gin入门

gin入门

Gin入门笔记 1. 初始gin 1.1. 依赖安装 go get github.com/gin-gonic/gin写gin程序都有一套固定的格式 初始化写路由监听运行 1.2. hello world package mainimport ("github.com/gin-gonic/gin""net/http" )func main() {router : gin.Default()rou…
阅读更多...
【Golang】golang框架，为什么选择GoFrame, GoFrame使用心得

【Golang】golang框架，为什么选择GoFrame, GoFrame使用心得

前言 GoFrame 是一个功能强大的 Go 语言开发框架，旨在提供简单、高效且灵活的开发体验。V2版本的发布，不但继承了 GoFrame V1 的优秀特性，并在性能、功能和易用性方面做出了显著改进。本文将总结 GoFrame V2 框架的使用，并对比其与其他 Go 框架的优势与劣势。 GoFrame v2…
阅读更多...
远程链接mysql步骤

远程链接mysql步骤

1. 创建用户 -- 登录root用户 mysql -uroot -py -- 查询所有用户 select user,host from mysql.user; -- add create user usernamehost identified by password; -- delete drop user usernamehost; -- 查看当前用户 select current_user;2. 远程链接数据库 解决&#xff1a;…
阅读更多...
最新文章

Copyright @ 2022~2023