threejs---第一人称控件 PointerLockControls

最新推荐文章于 2024-05-12 17:33:01 发布

String佳佳

最新推荐文章于 2024-05-12 17:33:01 发布

阅读量2.7k

点赞数 2

分类专栏： threejs 文章标签： three.js

本文链接：https://blog.csdn.net/weixin_44171757/article/details/120282525

版权

threejs 专栏收录该内容

14 篇文章 4 订阅

订阅专栏

先上效果图：

在这里插入图片描述

1、引入插件

...其他必要插件的引入...
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls'

2、定义相关变量

data(){
	return{
	  selControls: null,
      moveForward: null,
      moveBackward: null,
      moveLeft: null,
      moveRight: null,
      canJump: null,
      prevTime: performance.now(),
      velocity: new THREE.Vector3(), // 移动速度
      direction: new THREE.Vector3(), // 移动方向
	}
}

3、初始化控件，并添加键盘监听事件

methods：

	selView () {
      this.selControls = new PointerLockControls(this.camera, document.body)
      this.selControls.lock() // 锁定第一视角
      var onKeyDown = (event) => {
        switch (event.keyCode) {
          case 38: // up
          case 87: // w
            this.moveForward = true
            break

          case 37: // left
          case 65: // a
            this.moveLeft = true
            break

          case 40: // down
          case 83: // s
            this.moveBackward = true
            break

          case 39: // right
          case 68: // d
            this.moveRight = true
            break

          case 32: // space
            if (this.canJump === true) this.velocity.y += 350
            this.canJump = false
            break
        }
      }

      var onKeyUp = (event) => {
        switch (event.keyCode) {
          case 38: // up
          case 87: // w
            this.moveForward = false
            break

          case 37: // left
          case 65: // a
            this.moveLeft = false
            break

          case 40: // down
          case 83: // s
            this.moveBackward = false
            break

          case 39: // right
          case 68: // d
            this.moveRight = false
            break
        }
      }

      document.addEventListener('keydown', onKeyDown, false)
      document.addEventListener('keyup', onKeyUp, false)
    }

4、在循环渲染函数中，实现键盘控制移动

methods：

render(){
		requestAnimationFrame(this.render)
		// 实现第一人称视角
        const time = performance.now() //eslint-disable-line
        if (this.selControls) {
          if (this.selControls.isLocked) {
            var delta = (time - this.prevTime) / 1000
            this.velocity.x -= this.velocity.x * 10.0 * delta
            this.velocity.z -= this.velocity.z * 10.0 * delta
            this.velocity.y -= 9.8 * 200.0 * delta // 控制跳跃的高度

            this.direction.z = Number(this.moveForward) - Number(this.moveBackward)
            this.direction.x = Number(this.moveRight) - Number(this.moveLeft)
            this.direction.normalize() // 这确保了各个方向的一致运动

            if (this.moveForward || this.moveBackward) this.velocity.z -= this.direction.z * 200.0 * delta // 可控制移动的速度
            if (this.moveLeft || this.moveRight) this.velocity.x -= this.direction.x * 200.0 * delta // 可控制移动的速度

            this.selControls.moveRight(-this.velocity.x * delta)
            this.selControls.moveForward(-this.velocity.z * delta)
            this.selControls.getObject().position.y += (this.velocity.y * delta) // new behavior

            if (this.selControls.getObject().position.y < 5) {
              this.velocity.y = 0
              this.selControls.getObject().position.y = 5 // 视角锁定时y轴的高度
              this.controls.position0.set(0, 5, 10)
              this.canJump = true
            }
          } else {
            this.showBtn = true
          }
          this.prevTime = time
        }
		this.renderer.render(this.scene, this.camera)
}