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, May 21 '19 at 11:36
Thank you for your answer! But can you represent some demo code? Im newbie in three js — vinkovsky, May 21 '19 at 11:47
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, May 21 '19 at 13:12
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, May 21 '19 at 13:39
I lookeid into the code of GPUPick. It seems that for somereason a ray and a triangle are parallel so they dont meet and this gives error. Simplify your models into a cube and a rectangle. They have simpler shapes and the intersection test should be more simpler. You can then see if the issue persists, and it might be easier to debug it. Next step would be to dig into the GPUPicker code and see if you can somehow render or outline the triangle wiht waht the check fails. — Marko Taht, May 21 '19 at 14:09
Its already a cube and a rectangle. The intersection just works with a cube Please, see my project again. I turn on wireframe @Marko Taht — vinkovsky, May 21 '19 at 14:14
So read a bit more about the GPUpicker and looked at your code. Have you tried using gpuPicker.needUpdate = true; after you change the camera ? — Marko Taht, May 22 '19 at 06:19
Yes, i have `controlsP.addEventListener('end', updateGPUPicker); controlsO.addEventListener('end', updateGPUPicker); function updateGPUPicker() { gpuPicker.needUpdate = true; }` @Marko Taht — vinkovsky, May 22 '19 at 06:31
https://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast have you seen this? Maybe this can help. — Marko Taht, May 22 '19 at 08:11
Yes, I saw. It only works if I manually set ray.origin for my axis. If I set, for example, origin.z = 1000 origin.x = 1000 and origin.y = 1000. everything works fine, but only on positive axes. negative does not work @MarkoTaht — vinkovsky, May 22 '19 at 09:11
It seems like you got it working. If i click i cann add objects way outside the area where before. You just now need to fix the highlighting :D. One suggestion. Since you do the raytrace every mosemove anywhay, i would reccomend to save the result in global variable, and when you click then instead of raytracing again, you refrence to the global variable. — Marko Taht, May 22 '19 at 09:23
But yea, negative side not woroking. What owud happen if you only put raycaster.ray.origin.z = activeCamera.far; and leav the x and y as is ? — Marko Taht, May 22 '19 at 09:35
In this case you can add new object only on positive side of z axis @MarkoTaht — vinkovsky, May 22 '19 at 09:45
https://stackoverflow.com/questions/31655888/how-to-cast-a-visible-ray-threejs the answer has a comment that shows how to draw the ray. Try to draw the ray and see what the ray does. — Marko Taht, May 22 '19 at 10:02
Ok, I did it, but there are more mistakes. Maybe i send you my code and you check some moments? @MarkoTaht Ofcourse if you dont mind. Thank you for your great support — vinkovsky, May 22 '19 at 12:24
I dont mind. You can zip it together(with all the libaries like THREE JS etc). But it into a dropbox or google drive, and then give the link to it. I can then download it and see what might be the issue :). — Marko Taht, May 22 '19 at 13:13
Yeah! I fixed my problem!!! Just add this line `raycaster.ray.origin.set( mouse.x, mouse.y, - 1 ).unproject( camera );` @MarkoTaht much thanks!!! — vinkovsky, May 22 '19 at 14:51
Good job. Now create an answer for your qouestion and mark it as an answer, so that next people who has the same issue can see the solution easily. — Marko Taht, May 23 '19 at 06:10

score 1 · Answer 1 · answered May 21 '19 at 11:49

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

it seems that the "near" parameter does not change when I set it to -1000, it is still 0 — vinkovsky, May 21 '19 at 12:50

vinkovsky · Accepted Answer · 2023-04-03T17:40:17.330

1

To fix this problem, just add this line

raycaster.ray.origin.set( mouse.x, mouse.y, - 1 ).unproject( camera );

edited Apr 03 '23 at 17:40

answered May 22 '19 at 14:53

vinkovsky

310
4
16

1

You are rendering objects behind the camera. camera.near should be > 0. https://stackoverflow.com/questions/17558085/three-js-orthographic-camera/17567292#17567292 – WestLangley May 22 '19 at 16:38

Intersection via orthographic camera

2 Answers2