Three.js使用PointerLockControls实现指针锁定后WASD无响应求助

问题清单 #

• 代码存在未定义变量报错：window.THREE.SimpleFPControls = SimpleFPControls 中的SimpleFPControls未声明，会触发引用错误阻塞后续逻辑运行
• 控制实例重复创建且拼写错误：已声明可用的fpsControls实例后，又重复创建了controls实例，且参数错误写为document.bodybody，属于无效冗余代码
• 帧循环未调用控制器更新方法：控制器的状态更新需要每帧执行update方法才会生效，当前animate函数仅执行了渲染逻辑
• 缺少WASD按键交互逻辑：官方原生PointerLockControls仅封装指针锁定和视角旋转能力，WASD位移逻辑需要自行实现
• 小语法错误：GLTFLoader实例化缺少括号、renderer.outputEncoding赋值错误（不是布尔值，应为编码枚举值）

修复后代码 #

import * as THREE from './three.js-master/build/three.module.js'
import {GLTFLoader} from './three.js-master/examples/jsm/loaders/GLTFLoader.js'
import {PointerLockControls} from './three.js-master/examples/jsm/controls/PointerLockControls.js'

const canvas = document.querySelector('.webgl')
const scene = new THREE.Scene()

// 修正GLTFLoader实例化语法
const loader = new GLTFLoader()
loader.load('assets/untitled.glb', function(glb){
    console.log(glb)
    const root = glb.scene;
    root.scale.set(0.01,0.01,0.01)
    scene.add(root);
}, function(xhr){
    console.log((xhr.loaded/xhr.total * 100) + "% loaded")
}, function(error){
    console.log('An error occured')
})

const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(0,0,2)
scene.add(light)

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 100)
camera.position.set(0,1,10)
camera.lookAt(0, 0, 0);
scene.add(camera)

let fpsControls = new PointerLockControls( camera ,  document.body );

document.body.addEventListener( 'click', function () {
    fpsControls.lock();
}, false );

// 新增WASD按键状态监听
const moveSpeed = 0.1
const keys = {
    w: false, a: false, s: false, d: false
}
document.addEventListener('keydown', e => {
    const key = e.key.toLowerCase()
    if(keys.hasOwnProperty(key)) keys[key] = true
})
document.addEventListener('keyup', e => {
    const key = e.key.toLowerCase()
    if(keys.hasOwnProperty(key)) keys[key] = false
})

const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})

renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMap.enabled = true
// 修正outputEncoding赋值错误
renderer.outputEncoding = THREE.sRGBEncoding
document.body.appendChild(renderer.domElement)

function animate(){
    requestAnimationFrame(animate)
    // 新增控制器位移逻辑
    if(keys.w) fpsControls.moveForward(moveSpeed)
    if(keys.s) fpsControls.moveForward(-moveSpeed)
    if(keys.a) fpsControls.moveRight(-moveSpeed)
    if(keys.d) fpsControls.moveRight(moveSpeed)
    renderer.render(scene,camera)
}

animate()

内容的提问来源于stack exchange，提问作者YUNG