To begin with, let's consider the significance of some_distance/total_distance. Essentially, it is analogous to expressing
some_number_on_a_ruler/ruler_length
- resulting in a value between 0 and 1 that indicates the position of the first number relative to the second number.
For instance, if you calculate:
(event.clientX / window.innerWidth) * 100
You will obtain a percentage representing the mouse position. Similarly, by running:
(event.clientX / window.innerWidth) * 2
You will receive a value between 0 and 2 reflecting the mouse position. Conversely, if you execute:
(event.clientX / window.innerWidth) * 2 - 1
You will yield a number between -1 and 1 indicating the mouse position where 0 corresponds to the center of the window. The closer the value is to 0, the nearer it is to the middle of the window.
Regarding
- ( event.clientY / window.innerHeight ) * 2 + 1
, this is essentially a modification of:
- (( event.clientY / window.innerHeight ) * 2 - 1 )
The underlying calculation mirrors that of clientX, with only the sign being altered.
Considering
geometry.rotateX( - Math.PI / 2 )
, it is vital to understand that 2PI equates to 360 degrees. To delve into geometry, it's imperative to abandon degrees entirely and embrace radians as the natural unit for angles. In fact, radians are so ingrained in mathematics that we often refer to 2PI simply as 2PI.
If 2PI represents a full circle, then PI amounts to half a circle, meaning PI/2 corresponds to a quarter circle or 90 degrees. Hence, the rotation is by 90 degrees.