问题
最近做项目遇到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;
