javascript - 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 表示窗口的中间。这就是这个数字的意思。越接近 0，就越接近窗口的中间。

至于- ( event.clientY/window.innerHeight ) * 2 + 1。这是同样的事情，只是它实际上是以下内容的重新排列:

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

内部部分与clientX完全相同，只是符号颠倒了。

<小时/>

现在，对于geometry.rotateX( - Math.PI/2 )，您需要知道2PI 是360 度。如果你想做很多几何学，就完全忘记度数。 Angular 自然单位是弧度。事实上，这很自然，我们通常在数学中甚至不说 2PI 弧度，我们只说 2PI。

如果 2PI 是一个圆，则 PI 是半圆，因此 PI/2 是四分之一圆或 90 度。所以它旋转了 90 度。