Rotation with exact values not working as expected

Questions
,
1

I am very new to Three and am trying to get my head around how everything works before I start working on anything large and I ran into an issue with rotation. I want my square to rotate 45 degrees whenever the s key is pressed but whenever I do press it it seems to rotate 45, 90, 135, etc degrees. I am using this code

To try and do it.

I have tried Math.PI/4 and rough values (5dp) to see if there was any change but the problem still persisted.

I am running the code on Microsoft edge and I am coding in visual studio code if that is important

Sorry if this is an incredibly simple question.

-initial screen

image
image1845×895 2.72 KB

-after s pressed once

image
image1843×931 5.81 KB

-after s pressed thrice (no change on second press)

image
image1840×934 7.31 KB

2

why would you add the listener in animate()

1 Like
3 
function animate() {
    requestAnimationFrame( animate );
    //rotate on "s" key	
    document.addEventListener("keypress", function() {switch (event.key) {case "s": {redFace.rotation.x+=Math.PI/4}}});
    renderer.render( scene, camera );
}

Don’t put .addEventListener() into the animation loop.

4

You are a saint, thanks.

5

Yes, for example, like this:

//rotate on "s" key	
document.addEventListener("keypress", function() {switch (event.key) {case "s": {redFace.rotation.x+=Math.PI/4}}});

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