Forgive me if this is a beginner question, but I've noticed that in the official three.js examples, the PointerLockControls.js allows for mouse pointer lock and WASD key navigation.
I have successfully locked the mouse pointer, but I am having trouble getting the WASD keys to function.
Could it be that I'm not using the right .js script to begin with?
I'm still quite new at this, but I believe my file is almost there! Any assistance would be greatly appreciated.
Here's the code I'm working with:
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)
// Commented out geometry and material for demonstration purposes
//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)
let fpsControls = new PointerLockControls(camera, document.body);
document.body.addEventListener('click', function () {
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.body);
animate()