三.js RayCaster.setFromCamera，鼠标的位置和Z

Question

三.js r70源码

setFromCamera: function ( coords, camera ) {

        // camera is assumed _not_ to be a child of a transformed object

        if ( camera instanceof THREE.PerspectiveCamera ) {

            this.ray.origin.copy( camera.position );
            this.ray.direction.set( coords.x, coords.y, 0.5 ).unproject( camera ).sub( camera.position ).normalize();

        }

这一行，设置鼠标的位置和z的默认值0.5。

this.ray.direction.set( coords.x, coords.y, 0.5 )

大多数关于光线投射的示例代码，例如

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

我想知道它是如何工作的，( event.clientX / window.innerWidth ) * 2 - 1 是什么意思，为什么将 z 设置为 0.5？

Answer 1

每次鼠标单击时的事件 client.x 是 x 轴上的鼠标位置 width.innerheight 是当你有一个 2d 鼠标时你的屏幕尺寸是多少高度，所以当你在左半边时，你必须将它分开屏幕左右移动，因此将屏幕高度除以 2，然后比较鼠标在末端的 1 鼠标注册的位置，因此如果要偏移十字准线，可以这样做

function onDocumentMouseMove(e) {
    e.preventDefault();
    
var fleece = window.document.body.scrollHeight;
var fleeceb = window.document.body.scrollWidth;
mouse.x = (e.clientX / fleeceb) * 2 - 1;
    mouse.y = - (e.clientY / fleece) * 2 + 1;
}