threejs实现wasd控制 3D漫游

来自官方games_fps 以下便是源码 

官方链接 https://threejs.org/examples/?q=fps#games_fps

.vue

<template>
  <div>
      <div id="container"></div>
  </div>
</template>

<script>
import index from "./index.js";
export default index;
</script>

<style>
</style>

.js

import * as THREE from "three";
import {Octree} from 'three/examples/jsm/math/Octree.js';
import {Capsule} from 'three/examples/jsm/math/Capsule.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
// import {ColladaLoader} from 'three/examples/jsm/loaders/ColladaLoader.js';
import {FBXLoader} from "three/examples/jsm/loaders/FBXLoader";
import {GUI} from "three/examples/jsm/libs/lil-gui.module.min.js";

let renderer = null;
const GRAVITY = 30;
//每帧的步数
const STEPS_PER_FRAME = 1;
//Octree 对象，用于管理场景中的物体
const worldOctree = new Octree();
//模拟角色的身体
const playerCollider = new Capsule(new THREE.Vector3(0, 0.35, 0), new THREE.Vector3(0, 1, 0), 0.35);
//玩家的速度和方向向量
const playerVelocity = new THREE.Vector3();
const playerDirection = new THREE.Vector3();
//玩家是否在地面上的标志
let playerOnFloor = false;
//记录鼠标操作时间
let mouseTime = 0;
//存储按键状态的对象
const keyStates = {};
//性能统计对象
const stats = new Stats();
export default {
    data() {
        return {
            clock: null,
            scene: null,
            camera: null,
            gui: null,
            cube2: null,
        };
    },
    mounted() {
        this.init()
        this.initModel()
        this.initGui();

    },
    beforeDestroy() {
        this.resetScene()
    },
    methods: {
        //初始化场景中的平面和两个立方体
        initModel() {
            // 创建平面
            const planeGeometry = new THREE.PlaneGeometry(80, 80);
            const planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc, side: THREE.DoubleSide});
            const plane = new THREE.Mesh(planeGeometry, planeMaterial);
            pla