CODEWITHSUNDEEP
javascriptthree.js
vinkovsky
vinkovsky

Reputation: 310

Intersection via orthographic camera

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! enter image description here

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

Upvotes: 3

Views: 463

Answers (2)

vinkovsky
vinkovsky

Reputation: 310

To fix this problem, just add this line

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

Upvotes: 1

user6600549
user6600549

Reputation:

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

Upvotes: 1

Related Questions