In threejs, if the size of renderer is not the width and height of window, an error will occur in ray pickup. How to solve this problem?

I want to embed the demo of threejs into a div, and then change the size of the renderer to put it in my other pages. It turns out that after the size of the renderer has changed, the ray pickup seems to have gone wrong.

was originally renderer.setSize (window.innerWidth,window.innerHeight); click events are all normal
later I set renderer.setSize (window.innerWidth/2,window.innerHeight/2) like this, and found that renderer has become smaller, and the objects in it have shrunk accordingly, but there is something wrong with the click event, and the actual position coordinates of the object do not seem to have changed. How should I deal with this?

Webgl three.js javascript

Oct.12,2021

function initRay() {  
  let getBoundingClientRect = **canvas**.getBoundingClientRect()  //canvasid
  // 
  let x = ((event.clientX - getBoundingClientRect .left) / canvas.offsetWidth) * 2 - 1;// 
  let y = -((event.clientY - getBoundingClientRect .top) / canvas.offsetHeight) * 2 + 1;// 
  let standardVector = new THREE.Vector3(x, y, 1);// 
  // 
  let worldVector = standardVector.unproject(camera);
  // (worldVector)
  let ray = worldVector.sub(camera.position).normalize();
  // 
  let rayCaster = new THREE.Raycaster(camera.position, ray);
  //   false
  let intersects = rayCaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {
      // console.log(intersects[0].object);
  }
}

Previous: Vue params value

Next: The problem of storing POST data in MongoDB after PHP accepts MongoDB data

Is there a more mature acquisition scheme for UV mapping of Three.js more complex maps?
I want to make a model with 3dmax and load using ThreeJS . Given the mapping rules, the map image resource is later loaded image or canvas, can replace the map and re-render with one click. because the model is not a simple square or other regular g...

Canvas webgl three.js javascript

Mar.03,2021
How to set up the AABB bounding box of 3D model at the front end?
as the title, I load 3D models to the page through webGL, but the location, size, angle and so on of some models are not very suitable. I want to do a script for automatic normalization and standardization of 3D models at the front end. My current think...

Webgl three.js javascript

Mar.28,2021
How does three.js click to load the finished gltf model?
the code to load the gltf file is as follows: function loadGLTF(path, fileName) { var loader = new THREE.GLTFLoader(); loader.load(`${path}${fileName}.gltf`, function (gltf) { let object = gltf.scene; object.scale.set...

Webgl three.js javascript

Sep.22,2021