three.js 看鼠标。工作，但为什么？

Question

我确定我的 three.js 基础知识中缺少一些简单但重要的东西。

我的眼球总是注视着用户的鼠标光标。我让它基于先生的 post 工作。 doob，但我不确定 why/how 它是否有效。有人可以向我解释将屏幕坐标转换为场景 space 位置背后的数学原理吗？下面是我的工作示例。我理解规范化鼠标位置，但为什么我们要 (* 2-1) 和 -(* 2 + 1)？

window.addEventListener('mousemove', function(e){
    var mouse3D = new THREE.Vector3(
        ( event.clientX / window.innerWidth ) * 2 - 1,
        - ( event.clientY / window.innerHeight ) * 2 + 1,
        0.5 );

    pupil.lookAt(mouse3D);
})

TIA 为您解说！我真的很感激。

Answer 1

默认 3D space 沿 X、Y 和 Z 从 -1 到 1，并以 (0,0,0) 为中心。

该代码：

将X转换到范围[0,1]，即左边对应0，右边对应1(( event.clientX / window.innerWidth ))
然后将 X 缩放到 [0,2] (* 2)
然后移动到范围[-1,1] (- 1)
将Y转换为范围[-1,0]，即上边对应0，下边对应-1 (-( event.clientY / window.innerHeight ))
然后将 Y 缩放到 [-2,0] (* 2)
然后移动到范围[-1,1] (+ 1)
使用常数 Z 0.5（在 [-1,1] 范围内），因为这是一个二维函数。

three.js 看鼠标。工作，但为什么？

three.js look at mouse. Working, but why?

geometry

three.js