What is this wacky math in three.js

Question

I'm in the process of learning three.js and I keep coming across these wacky math formulas everywhere and I can't understand the WHY.

Here's an example.

mouse.set( ( event.clientX / window.innerWidth ) * 2 - 1, 
- ( event.clientY / window.innerHeight ) * 2 + 1 );

If someone can explain the logic to me here would probably make a world of difference to me. From what I can understand from this example is we are taking the current mouse x position on the screen, then dividing by the width of the screen, then multiplying by 2, then subtracting 1. Just seems illogical to me.

example 2

geometry.rotateX( - Math.PI / 2 );

There is actually some explanation in the documentation. For example "calculate mouse position in normalized device coordinates (-1 to +1) for both components", see threejs.org/docs/index.html#Reference/Core/Raycaster — Oleg
– Oleg, Commented Aug 21, 2016 at 15:11
Thanks. I had never encountered normalized device coordinates before. So this is all new to me. — joeb
– joeb, Commented Aug 21, 2016 at 15:41
That you don't understand the math doesn't mean it is whacky :D — Wilt
– Wilt, Commented Aug 22, 2016 at 8:07

slebetman · Accepted Answer · 2016-08-21 15:10:02Z

First I'm going to assume you've missed the significance of some_distance/total_distance. It is basically the same as saying some_number_on_a_ruler/ruler_length - the result is basically a number between 0 and 1 that represent the location of the first number relative to the second number.

For example, if you do:

(event.clientX / window.innerWidth) * 100

You will get a number, in percent, that represent where the mouse is. So if you do:

(event.clientX / window.innerWidth) * 2

You will get a number between 0 and 2 that represent the mouse position. If instead you do:

(event.clientX / window.innerWidth) * 2 - 1

You will get a number between -1 and 1 that represent the mouse position where 0 represent the middle of the window. That's what the number mean. The closer it is to 0 the closer it is to the middle of the window.

As for - ( event.clientY / window.innerHeight ) * 2 + 1. That's the same thing, only it's actually a rearrangement of:

- (( event.clientY / window.innerHeight ) * 2 - 1 )

The inner part is exactly the same as for clientX only the sign have been inverted.

Now, for geometry.rotateX( - Math.PI / 2 ) what you need to know is that 2PI is 360 degrees. Forget about degrees COMPLETELY if you want to do a lot of geometry. The natural unit for angles is radians. Indeed it is so natural we normally don't even say 2PI radians in math, we just say 2PI.

If 2PI is one circle, then PI is half a circle so PI/2 is a quarter circle or 90 degrees. So it's rotating by 90 degrees.

I was about to hit enter and explain what is a normalized position ranging from -1 to +1... Good on you, upvoted.
@slebetman. Thanks for the pretty thorough explanation. Let me expand a bit on what I take away from it. If I am understanding you correctly, then 0,0 is always dead center of my screen. Let me put the math into literal. (1000 / 1920) * 2 - 1 = 0.041666. Is the sum of this equation also in radians? My brain was expecting a pixel value. The rotation explanation i totally get, i have no questions there.
@joeb: FWIW, the answer is in ratio. Typically though, we'd call it "fraction" as in what fraction of the screen is the mouse in. It's not useful for things like "where do I draw this?" because you need pixel values for that but it's useful for "is this close enough?" or "am I somewhere in the center?"

Collectives™ on Stack Overflow

What is this wacky math in three.js

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related