Raycaster and event handler isnt throwing the right mesh array when clicked on the scene

Questions
1

I want to move the camera to particular position when a mesh(top_left) is clicked in the scene
the circled mesh is top_left

image
image877×815 71.8 KB

when the above mesh is clicked i want to move the camera there. however i coded so as to get the normalized mesh array(found) as i followed a YouTube tutorial

const raycaster = new THREE.Raycaster();
const clickmouse = new THREE.Vector2();
const movemouse = new THREE.Vector2();

window.addEventListener('click', event => {
  clickmouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  clickmouse.y = (event.clientY / window.innerHeight) * 2 - 1;

  raycaster.setFromCamera(clickmouse,camera);
const found = raycaster.intersectObjects(scene.children);
if(found.length > 0){
  console.log(found);
}

})

however when i view the log it just show the cube_001 (the room_mesh) of the scene and found_length is always 1.
![image|690x325](upload://AiWPgJzBQ8uV13WYMPYzYA3Oh7p.jpeg)
the red_circle is throwing found of length 1 and its wrong mesh, room_001 is actaully marked in blue
2 
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1; // <- signs are flipped

(docs)

3

If you are using three.js vanilla, may I suggest you to use a library to be able to bind events and avoid using raycaster manually, like in this example?