Problem using quaternion rotations

[monolithMktg]

EDIT: Ok some progress. At first click, the camera does stop at a point but doesn't align to directly face the random particle. On the second click onward the rotation is a mayhem.

I have a particle system spread in a spherical coordinate system. On every mouse click, I choose a random point from these points on sphere.

What I want (gif attached): To smoothly rotate camera, on every click, so that its quaternion is equal to the random point's. You can see in the gif how the particle placed at that random point smoothly ends up in front of the camera.

In the current state, a single click on the canvas sends the camera in a rotation frenzy. Could someone please help me why doesn't the camera stop after reaching the destination?

Here's the fiddle link: https://jsfiddle.net/zk8umjfw/3/

DESIRED RESULT:

[monolithMktg]

Sorry to bump, but I really need this done. Ive spent hours editing and testing the code, looking online, even on Three JS forums but no solution.

[pschroen]

At a quick glance it looks like your code is using applyQuaternion(), wouldn't that keep transforming the rotation on every frame from the last position that was set?

...
camera.position.applyQuaternion(camQuat);

[monolithMktg]

At a quick glance it looks like your code is using applyQuaternion(), wouldn't that keep transforming the rotation on every frame from the last position that was set?

...
camera.position.applyQuaternion(camQuat);

Thank you very much for the reply Patrick. I'm so glad you took a glance.

I am still getting used to Quaternions so yes, I realize now that camera.position.applyQuaternion(camQuat); was not supposed to be in the update() function (another thing is it should be randQuat which is the target quaternion on the random point).

I followed some Three JS stackoverflow pages and one solution in common in such cases is the use of an updated camera.lookAt() vector called the forward vector. So I factored that in and updated my jsFiddle code. The camera does move smoothly but the whole scene is just plane 2D. I have even turned on camera.worldMatrixNeedsUpdate = true;

I tried a lot of approaches since yesterday, nothing is working and I am feeling dispirited. I would really appreciate if you could help me solve this with quaternions as this principle will help me in multiple future projects.

Problem: To smoothly rotate camera around the sphere so that the randomly chosen particle comes right in front of it.

Updated jsFiddle link: https://jsfiddle.net/q45cg7s0/1/

Forward vector links that I referred: https://stackoverflow.com/questions/27957645/three-js-find-the-current-lookat-of-a-camera https://stackoverflow.com/questions/15696963/three-js-set-and-read-camera-look-vector/15697227#15697227 https://discourse.threejs.org/t/how-to-calculate-a-cameras-lookat-direction/47780/3 https://www.scratchapixel.com/lessons/mathematics-physics-for-computer-graphics/lookat-function/framing-lookat-function.html

[pschroen]

For help with your project I think it's best to keep those requests on Stack Overflow, I can see you've already posted the same question there.

https://stackoverflow.com/questions/77958538/problem-using-quaternion-rotations-in-ogl-webgl-library

I won't be able to help, but perhaps someone else can there. 😊

[monolithMktg]

For help with your project I think it's best to keep those requests on Stack Overflow, I can see you've already posted the same question there.

https://stackoverflow.com/questions/77958538/problem-using-quaternion-rotations-in-ogl-webgl-library

I won't be able to help, but perhaps someone else can there. 😊

The problem is that there is little to no traction for OGL questions at Stackoverflow and hence I had to post it here. I looked at multiple Three JS resources trying to replicate the effect here but to no avail. I've deeply reseached on Youtube and Google too by the way.

Thanks anyway.

[pschroen]

I understand, keep in mind that GitHub issues are supposed to be for issues/bugs with the library itself, support for a project is a different thing, though someone else might be able to point you in the right direction here.

Best of luck!