Question

我确信在我的three.js基础知识中有一些简单但缺失的东西。

我总是看着用户的鼠标光标。我有它的工作基于先生的帖子。 doob，但我不确定为什么/如何工作。有人可以向我解释将屏幕坐标转换为场景空间位置背后的数学。以下是我的工作示例。我理解标准化鼠标位置，但为什么我们（* 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空间沿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）
使用0.5的常数Z（在[-1,1]范围内），因为这是一个2D函数。

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

1 个答案: