When I have multi canvas views on a page and canvases differ in size or camera then scene mesh picking is not aligned with the actual meshes. See live demo here and code here (based on multi canvas demo code). There’s an opacity change on hover for the red cube, but you’ll see the pick target doesn’t align with the mesh.
If canvases are the same size and only the one camera is in use across multiple views then mesh picking seems to be aligned.
So, I don’t think it will be possible to make picking work with your current code.
The problem is that the ray picking code is using engine.getRenderWidth() / engine.getRenderHeight() to create the viewport in pixel coordinates (from the camera.viewport property). But this code is executed outside of the main render loop (even outside of the requestFrameAnimation handler) for pointer events, so at that time engine.getRenderWidth/Height are the dimensions of the currently bound framebuffer, which is the latest that had been drawn into (canvas2 in your case).
I think what you should do is calling scene.pick yourself in the appropriate context, meaning when the scene is rendered with cam1. You can do this in the render loop:
engine.runRenderLoop(function() {
if (scene.activeCamera) {
scene.render();
if (scene.activeCamera.name === "cam1") {
const pickResult = scene.pick(scene.pointerX, scene.pointerY, undefined, false, scene.activeCamera);
if (pickResult.pickedMesh) {
console.log("picked", pickResult.pickedMesh.name);
}
}
}
});