Trying to work with PointerLockControls, WASD keys and Three.js

Question

I hope I'm not asking an obviously noob question, but I noticed on the three.js official examples, PointerLockControls.js allows for mouse pointer lock AND WASD keys navigation.

I've managed to get the mouse pointer to lock, but I am struggling to get the WASD keys to do anything.

Perhaps this is not the .js script I need to begin with?

I'm still very new to this, but I feel my file is so close! Any help would be appreciated.

this is my code

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'

if (typeof window !== 'undefined' && typeof window.THREE === 'object') {
  window.THREE.SimpleFPControls = SimpleFPControls;
}




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

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 geometry = new THREE.BoxGeometry(1,1,1)
//const material = new THREE.MeshBasicMaterial({
//    color: 0x00ff00
//})
//const boxMesh = new THREE.Mesh(geometry,material)
//scene.add(boxMesh)

//BOILER PLATE CODE
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)

//add document.body to PointerLockControls constructor
let fpsControls = new PointerLockControls( camera ,  document.body );

//add event listener to your document.body
document.body.addEventListener( 'click', function () {
    //lock mouse on screen
    fpsControls.lock();
}, 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
renderer.outputEncoding = true
document.body.appendChild(renderer.domElement)

function animate(){
    requestAnimationFrame(animate)
    renderer.render(scene,camera)
}

const controls = new PointerLockControls(camera, document.bodybody);

animate()

Answer 1

PointerLockControls only adds event listeners to pointerlockchange, pointerlockerror and mousemove. So it handles the mouse capturing and applies the mouse movements to the camera in order to rotate it.

However, the class adds not key event listeners. If you closely study the source code of official example, you will see that these event listeners are implemented on application level.