解决threejs模型非全屏下raycaster选中偏移问题（非复制粘贴）

问题

最近做项目遇到threejs的一个问题，我在全屏（容器坐标（0，0））状态下使用射线选中没有问题，但是容器如果不是在（0，0）坐标下就会发现选不中了，见下图：

image.png

threejs鼠标拾取方法见官网demo代码贴一下：

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove( event ) {

    // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)

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

}

function render() {

    // 通过摄像机和鼠标位置更新射线
    raycaster.setFromCamera( mouse, camera );

    // 计算物体和射线的焦点
    var intersects = raycaster.intersectObjects( scene.children );

    for ( var i = 0; i < intersects.length; i++ ) {

        intersects[ i ].object.material.color.set( 0xff0000 );

    }

    renderer.render( scene, camera );

}

window.addEventListener( 'mousemove', onMouseMove, false );

window.requestAnimationFrame(render);

解决方法

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

这里的window.innerWidth和window.innerHeight其实是容器的宽高，并且默认按照（0，0）来计算的，需要考虑偏移的位置(px,py)

    mouse.x = ( (event.clientX - px)  / renderer.domElement.clientWidth) * 2 - 1;
    mouse.y = - ( (event.clientY - py) / renderer.domElement.clientHeight) * 2 + 1;