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);
}

Id reccomend you to print out or render the collision point between the ray and the object. and if possible try to rener a ray in some way such that you can see how it moves in the space. I dont know what the gpupicker does, but there might be the issue that your ray and object are in different perspectives inside the calculation, causing some rays to miss the target. — Marko Taht
Thank you for your answer! But can you represent some demo code? Im newbie in three js — vinkovsky
I looked at your source code for the mose move and mouse click. Is there any particular reason you are doing the raycasting for mouse move and mouse click differently ? Step one i would suggest you do the mouseClick raycasting the sameway as mouse move raycasting. See if that fixes the issue. — Marko Taht
No, it was an experiment. I am working on my project right now. Please look again. When I use the code from the mouse movet, a new object is not added to the scene. Can you try it now? @Marko Taht — vinkovsky

George C. George C. · Accepted Answer · 2019-05-21T11:49:10

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 );

Intersection via orthographic camera

2 Answers