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 Ethan Hermsey · Accepted Answer · 2020-01-10T11:26:55

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

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

1 Answers