is there a way to set the orbit controls target with mouse click?

Question

I am trying to set the orbit controls target here in three.js. for example in https://threejs.org/editor/ when you add any cube or shape, the camera always rotates around the center of the model unless you pan the camera and it will still rotate around (0,0,0). Now the behavior I am trying to get from orbit controls is that on the mouse click, I should be able to set the target for the orbit controls. for this, I am using raycaster and then getting the object position/center on a mouse-down event and then setting the target for orbit controls there and it works fine when click and move happened as it sets the target exactly in front of the camera. But the problem comes when target is set somewhere else, user is zooming in the model(i have implemented zoom to cursor)/panning the model, and then without clicking on new object on another side, user click on empty space and did mouse move, immediately, I see the jump of controls and camera to the previous target.

I want to set the target of orbit controls exactly at the mouse cursor even though if it is empty space. How can I get that thing?

I tried getting mouse pointer in 2D and then Unproject it from the camera to get 3D coordinates, but that is setting the orbit target just near the camera's near plane. I am not able to get what value should I pass to the orbit target if user hits an empty part of the model.

Ethan Hermsey · Answer 1 · 2020-01-10T12:10:32.473

1

The solution you found is correct. You just have to offset that target further away from the camera position, at the distance from the camera to the mesh.

I've made a small example here; https://jsfiddle.net/EthanHermsey/x5p6gswu/8/

var vec = new THREE.Vector3(); 
  var distance = camera.position.distanceTo( mesh.position );  

  vec.set(
      ( event.clientX / window.innerWidth ) * 2 - 1,
      - ( event.clientY / window.innerHeight ) * 2 + 1,
      0.5 );

  vec.unproject( camera );

  vec.sub( camera.position ).normalize();

  pointerMesh.position.copy( camera.position ).add( vec.multiplyScalar( distance ) );

edited Jan 10 '20 at 12:10

answered Jan 10 '20 at 11:26

Ethan Hermsey

930
4
11

Here we are adding 5 as a factor distance but my question was that how to set the depth base on camera distance from the model. Adding 5 is just moving it little away from the camera but not near to the model. I am trying to find the range where my model is located in the world and then set cursor points in 3D near to that model only, even if I click on empty space. – SIM Jan 10 '20 at 11:49
I tried doing it like `var distance = new THREE.Vector3().subVectors(this.camera.position, this.controls.target).length();` , but still not much luck – SIM Jan 10 '20 at 11:51
Whoops. Glanced over that. That solution should work, though I used camera.position.distanceTo( mesh.position ), which is practically the same.. **I've updated my answer and added a jsfiddle example** – Ethan Hermsey Jan 10 '20 at 12:11
Is this the behaviour you where looking for? – Ethan Hermsey Jan 10 '20 at 22:16
:- yes, but not exactly solving my problem. Posted another question on that https://stackoverflow.com/questions/59859782/three-js-how-to-set-the-length-of-vector-based-on-angle-between-camera-positio – SIM Jan 22 '20 at 12:29

is there a way to set the orbit controls target with mouse click?

1 Answers1