Hello,
i want to rotate the camera around the hitpoint i get when i click on a object.
Like in the GIF below.
If I now set Controls.target, it moves the rotation point to the centre of the viewport. What I do not want. But I can’t find any other way to change the rotation point in the Orbit-Controls?
Is there a way to get the same behaviour like in the GIF with Orbit-Controls?
Thanks
No real answer but at least I can tell you that there is no configuration option to produce the above behavior with OrbitControls. You need a custom solution.
Could maybe use JavaScript to find that initial first click, and then use OrbitControls.target.set() method to declare the new target location. But I am not sure how to deal with the missing axis. I’m new with Three.js so more just imagining here.
This was also my first idea. The problem is that the rotation point is always moved to the centre of the viewport. This causes the image to change with every click.
That’s a really interesting question, but why limit yourself to the confines of OrbitControls?
Incidentally this is an excellent use-case for the application of a SpaceMouse (6DoF input device):
Each orbit (movement along an arbitrary path) can at the infinitesimal level be construed through a superposition of a pure rotation and a pure translation (tangential to the path), which happens to be exactly what you can do with a SpaceMouse, simultaneously and one-handedly.
The direction of the puck displacement (blue arrow), which is tangent to the path at this moment, defines the direction of where the current center of rotation can be. It’s the ratio between rotational velocity (as given by the pucks twisting and/or tilting) and the translational velocity (as given by the pucks displacement) which defines the actual distance of the center of rotation along the black dash-dotted line.
Simply by changing the direction of the pucks displacement (green arrow), you arrive at an entirely different set of possible locations of the current center of rotation. On the fly and without any clicks whatsoever.
This does take some manual skill and practice, but the results in terms of ease and intuitiveness of navigation are imo very well worth it.
I have solved the problem with the camera controller from GitHub - yomotsu/camera-controls: A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features..
In the following example it is used:
https://yomotsu.github.io/camera-controls/examples/click-to-set-orbit-point.html
