Camera.position.set Unable to Move forwards or backwards

Questions
,
1

Hello, sorry if I get some things wrong, I am a beginner to three.js.

So, my problem is when I go to set the camera position in my code to move either forwards or backwards, it doesn’t move at all.

Here is my code that I am using

let x, y, z;

window.focus()

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 5, 50);

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

z = 25;
y = 0;
x = 0;

function animate() {
	camera.position.set(x, y, z)
	
	window.onkeydown = function (e) {
		// Up and Down (Space and Left Shift)
		if (e.keyCode == 32) {
			y += 0.5
		}
		if (e.keyCode == 16) {
			y -= 0.5
		}
		// Left and Right (A and D)
		if (e.keyCode == 65) {
			x -= 0.5
		}
		if (e.keyCode == 68) {
			x += 0.5
		}
		// Forwards and Backwards (W and S)
		if (e.keyCode == 87) {
			z += 0.5
		}
		if (e.keyCode == 83) {
			z -= 0.5
		}
	}

	renderer.render( scene, camera );

}

I know that there is no import for three.js, that is because I am using codepen, and they have a built in library system.

Thanks,
Logan

2

where do you call onkeydown ?
I only see the declaration
where is the event listener?

3

Thanks for the quick reply.

I believe it calls this function.

window.onkeydown = function (e)

It seems to just be the W and S keys though.

4

Try using addEventListener, three doesn’t work like DOM elements.
window.addEventListener("keydown", myFunction );

use the official examples if you need references, they generally point toward the best reliable practices using three.

5

Hmm, it seemed to do something. So, when I press W, A, S, or D, it just makes the cube disappear? Could it be my near and far?

Here’s what I got right now

let x, y, z;

window.focus()

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 5, 50);

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

z = 25;
y = 0;
x = 0;

function animate() {
	camera.position.set(x, y, z)
	
	window.addEventListener("keydown", (e) => {
		// Up and Down (Space and Left Shift)
		if (e.keyCode == 32) {
			y += 0.5
		}
		if (e.keyCode == 16) {
			y -= 0.5
		}
		// Left and Right (A and D)
		if (e.keyCode == 65) {
			x -= 0.5
		}
		if (e.keyCode == 68) {
			x += 0.5
		}
		// Forwards and Backwards (W and S)
		if (e.keyCode == 87) {
			z += 0.5
		}
		if (e.keyCode == 83) {
			z -= 0.5
		}
	})

	renderer.render( scene, camera );

}
6

Don’t declare an event listener inside renderer loop.
Sorry this place is to answer three.js questions. Not to teach the bases of Javascript.
I will let any good angels continue this task. I’m off

1 Like
7

This is the first time I’ve seen @Oxyn thisfrustrated. :joy::rofl:

Take the event listener out of the animation loop. You’re basically Reassigning it on every frame is inefficient and unnecessary. The same goes for updating the camera position.

Here is the corrected fiddle

8

Alright, thanks for your help. It seemed to work, I just needed to press W and S a little bit since from where the camera was positioned, you couldn’t see the scale.

1 Like
9

Sorry, I didn’t think about that. :slightly_frowning_face:

1 Like