这个古怪的数学在three.js中是什么？

Question

我正在学习three.js的过程中,我不断遇到这些古怪的数学公式,我无法理解为什么.

这是一个例子.

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

如果有人可以向我解释这个逻辑,那么可能会给我一个不同的世界.从我从这个例子中可以理解的是,我们将屏幕上的当前鼠标x位置,然后除以屏幕的宽度,然后乘以2,然后减去1.对我来说似乎是不合逻辑的.

例2

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

Answer 1

首先,我要假设你已经错过了重要性some_distance/total_distance.它基本上与说法相同some_number_on_a_ruler/ruler_length- 结果基本上是0到1之间的数字,表示第一个数字相对于第二个数字的位置.

例如,如果你这样做:

(event.clientX / window.innerWidth) * 100

您将获得一个代表鼠标位置的数字(以百分比表示).所以,如果你这样做:

(event.clientX / window.innerWidth) * 2

您将获得一个介于0和2之间的数字,代表鼠标位置.相反,如果您这样做:

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

您将获得一个介于-1和1之间的数字,表示鼠标位置,其中0表示中间位置window.这就是数字的意思.它越接近0越接近中间window.

至于- ( event.clientY / window.innerHeight ) * 2 + 1.这是同一件事,只是它实际上是一个重新排列:

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

内部部分与clientX仅倒置的符号完全相同.

现在,geometry.rotateX( - Math.PI / 2 )您需要知道的是2PI是360度.如果你想做很多几何体,请完全忘记度数.角度的自然单位是弧度.事实上,我们通常不会在数学中说2PI弧度,我们只说2PI.

如果2PI是一个圆,那么PI是半圆,所以PI/2是四分之一圆或90度.所以它旋转了90度.