three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差。

onMouseClick(event) {
  this.event = event
  this.canvas = document.getElementById("dd")
  event.preventDefault();
  let getBoundingClientRect = this.canvas.getBoundingClientRect();
  let x = ((event.clientX - getBoundingClientRect.left) / document.getElementById("dd").offsetWidth) * 2 - 1; 
  let y = -((event.clientY - getBoundingClientRect.top) / document.getElementById("dd").offsetHeight) * 2 + 1; 
  let vector = new THREE.Vector3(x, y, 1);
  let worldVector = vector.unproject(this.camera);
  let ray = worldVector.sub(this.camera.position).normalize();
  let rayCaster = new THREE.Raycaster(this.camera.position, ray);
  let intersects = rayCaster.intersectObjects(this.scene.children, true);
    if (intersects.length > 0) {
        console.log("获取到了")
    }

},