Intersection via orthographic camera

Question

I use the orthographic camera in my project. My problem is with a raycaster. It's working, but not correctly. The object picks not in all its width or height. Sometimes it works only with half of the object. But when I move camera via orbit control, raycaster works correctly. I forgot to say I use GPUpicker library

My project: https://alovert.ru

By default camera is perspective, to switch it to orthographic, please press 'O' on your keyboard.

To see the issue, you must click on the cube sides and on the small side of the beam. In this way, you add a new object to the scene. When you try to add the new object you can see that some piece of the object didn't intersect until you move the camera. With perspective camera it works ok. I appreciate any help!

---

My code intersection

function onMouseClick(e) {
  e.preventDefault();

  mouse.x = e.clientX;
  mouse.y = e.clientY;
  var raymouse = new THREE.Vector2();
  raymouse.x = ((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width) * 2 - 1;
  raymouse.y = - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1;

  raycaster.setFromCamera(raymouse, activeCamera);

  var intersect = gpuPicker.pick(mouse, raycaster);
}

Answer 1

要解决此问题，只需添加此行raycaster.ray.origin.set（mouse.x，mouse.y， - 1）.unproject（camera）;

Answer 2

Please look at this example: https://threejs.org/examples/#webgl_interactive_cubes_ortho

Code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes_ortho.html

Try this:

var camera = new THREE.OrthographicCamera(0, window.innerWidth, -window.innerHeight, 0, -100, 100);

var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once

...

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

var intersects = raycaster.intersectObjects( objects, recursiveFlag );