Javascript Three.js不是全屏时的光线投射

最近我在three.js raycasting上遇到了一些问题

我有一个div元素，该元素不是全屏的，也不应该是全屏的，我认为这导致了光线投射的定位问题，我不知道如何解决

    let mouseVector = new THREE.Vector3()
let raycaster = new THREE.Raycaster()

Object.assign(mouseVector, {
  x: 2 * (e.clientX / canvas.width) - 1,
  y: 1 - 2 * (e.clientY / canvas.height)
})

raycaster.setFromCamera(mouseVector, camera)

let intersects = raycaster.intersectObject(scene.children)

for(const intersection of intersects) {
  console.log(intersection)
 }

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

  raycaster.setFromCamera( mouse, camera );    
  intersects = raycaster.intersectObjects( scene.children, true );
  console.log(intersects);

  for(const ray of intersects) {
    if(ray.object.name !== "Grid") {
      if(smallestDist == undefined){
          smallestDist1 = ray;
        }else if(smallestDist > ray.distance){
          smallestDist1 = ray
        }
    }
  }
   mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera( mouse, camera );    
  var intersects = raycaster.intersectObjects( scene.children );

  for ( var i = 0; i < intersects.length; i++ ) {
    if(intersects[i].object.name == "Grid"){
    }else{
      if(smallestDist == undefined){
        smallestDist = intersects[i];
      }else if(smallestDist > intersects[i].distance){
        smallestDist = intersects[i]
      }
    }
  }
  console.log(smallestDist1)
  if(smallestDist1){
    const geometry = new THREE.SphereGeometry( 0.5, 15, 15 );
    const material = new THREE.MeshBasicMaterial( {color: 0xFF0000} );
    const sphere = new THREE.Mesh( geometry, material );
    sphere.position.set(smallestDist1.point.x, smallestDist1.point.y, smallestDist1.point.z)
    sphere.name = "TestSphere"
    scene.add( sphere );
  }

让mouseVector=new THREE.Vector3（）
让raycaster=new-THREE.raycaster（）
Object.assign（mouseVector{
x:2*（e.clientX/canvas.width）-1，
y:1-2*（e.客户/画布高度）
})
raycaster.setFromCamera（mouseVector，camera）
让intersects=raycaster.intersectObject（scene.children）
用于（交叉点的常数交点）{
控制台日志（交叉点）
}
mouse.x=（e.clientX/window.innerWidth）*2-1；
mouse.y=-（e.clientY/window.innerHeight）*2+1；
raycaster.setFromCamera（鼠标、相机）；
相交=光线投射器。相交对象（scene.children，true）；
控制台日志（交叉）；
for（相交的常量光线）{
if（ray.object.name！=“栅格”）{
if（smallestDist==未定义）{
最小距离1=射线；
}else if（最小距离>射线距离）{
smallestDist1=射线
}
}
}
mouse.x=（e.clientX/window.innerWidth）*2-1；
mouse.y=-（e.clientY/window.innerHeight）*2+1；
raycaster.setFromCamera（鼠标、相机）；
var intersects=raycaster.intersectObjects（scene.children）；
对于（变量i=0；i与[i]相交。距离）{
最小距离=相交[i]
}
}
}
console.log（smallestDist1）
如果（最小距离1）{
常数几何=新的三个。球度法（0.5,15,15）；
const material=new THREE.MeshBasicMaterial（{color:0xFF0000}）；
const sphere=新的三个网格（几何体、材质）；
sphere.position.set（smallestDist1.point.x、smallestDist1.point.y、smallestDist1.point.z）
sphere.name=“TestSphere”
场景。添加（球体）；
}

---

上面是我尝试过的代码，但是由于带有3D对象的元素不是全窗口大小，我认为它正在被窃听。非常感谢您的帮助。

尝试计算

鼠标

如下：

const rect=renderer.doElement.getBoundingClientRect（）；
const x=event.clientX-rect.left；
const y=event.clientY-rect.top；
mouse.x=（x/canvas.clientWidth）*2-1；
mouse.y=（y/canvas.clientHeight）*-2+1