Why isn't the camera moving in three.js? - three.js

Question

I have create a child class from THREE.PerspectiveCamera and would like to add the ability to make the camera move around on the x,z axes, in the browser I get the position of the the from update_position but the camera does not seem to move
class FPS extends THREE.PerspectiveCamera
{
constructor(params)
{
super(params)
this.keys = {
forward: false,
backward: false,
left: false,
right: false,
}
window.addEventListener('keydown', (event)=>
{
console.info(this.keys);
switch (event.keyCode)
{
case 87: // w
this.keys.forward = true;
break;
case 65: // a
this.keys.left = true;
break;
case 83: // s
this.keys.backward = true;
break;
case 68: // d
this.keys.right = true;
break;
}
this.update_position();
});
window.addEventListener('keyup', (event)=>
{
switch (event.keyCode)
{
case 87: // w
this.keys.forward = false;
break;
case 65: // a
this.keys.left = false;
break;
case 83: // s
this.keys.backward = false;
break;
case 68: // d
this.keys.right = false;
break;
}
});
}
update_position()
{
// x axis moves right or left
if (this.keys.right == true)
{
this.position.x += 1;
}
else if (this.keys.left == true)
{
this.position.x -= 1;
}
// z axis moves forward or backwards
if (this.keys.forward == true)
{
this.position.z += 1;
}
else if (this.keys.backward == true)
{
this.position.z -= 1;
}
console.log(this.position.x);
console.log(this.position.y);
console.log(this.position.z);
}
}
class Game
{
constructor()
{
this.scene = new THREE.Scene();
this.camera = new FPS(100, window.Width/window.Height, 0.1, 1000);
render_scene()
{
requestAnimationFrame(() =>
{
this.renderer.render(this.scene , this.camera);
this.render_scene();
});
}
}
if I replace position with rotation then the camera does rotate but it does not work for the position

Answer 1

Your code seems to work as expected:
let camera, scene, renderer, mesh;
function init() {
camera = new FPS(70, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 10;
scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
//
class FPS extends THREE.PerspectiveCamera {
constructor(fov, aspect, near, far) {
super(fov, aspect, near, far)
this.keys = {
forward: false,
backward: false,
left: false,
right: false,
}
window.addEventListener('keydown', (event) => {
//console.info(this.keys);
switch (event.keyCode) {
case 87: // w
this.keys.forward = true;
break;
case 65: // a
this.keys.left = true;
break;
case 83: // s
this.keys.backward = true;
break;
case 68: // d
this.keys.right = true;
break;
}
this.update_position();
});
window.addEventListener('keyup', (event) => {
switch (event.keyCode) {
case 87: // w
this.keys.forward = false;
break;
case 65: // a
this.keys.left = false;
break;
case 83: // s
this.keys.backward = false;
break;
case 68: // d
this.keys.right = false;
break;
}
});
}
update_position() {
// x axis moves right or left
if (this.keys.right == true) {
this.position.x += 1;
} else if (this.keys.left == true) {
this.position.x -= 1;
}
// z axis moves forward or backwards
if (this.keys.forward == true) {
this.position.z += 1;
} else if (this.keys.backward == true) {
this.position.z -= 1;
}
//console.log(this.position.x);
//console.log(this.position.y);
//console.log(this.position.z);
}
}
init();
animate();
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.145/build/three.min.js"></script>
The only thing I have updated in FPS was the constructor since the arguments were not applied correctly. Better to explicitly list the parameters.