Rotate camera on click event

Questions
,
1

I’m trying to achieve a camera tween on a click event. My guess is that I have to use a path for this but I’m not sure so maybe someone can give me some tips on what the best route is for this.

So what I would like to achieve: I have 3 clickable spheres in my scene and when one of the spheres is clicked I would like the scene to zoom out a bit and then to orbit around the scene while zooming in on the clicked sphere.

So as mentioned any tips on where to start to achieve this are very welcome. Thanks in advance.

2

If you would like to rotate the scene camera, I think maybe camera controls can help. Instead of orbit controls try using camera controls. It has a method setLookAt. You can animate the lookAt by setting enableTransition parameter to true. Not sure if this is what you are looking for.
Thanks

3

Thanks for your fast reply. I will check that out!

4

What is camera controls? Are you referring to a third party repository?

5

I was already looking in the threejs docs but couldn’t find any documentation about it… In the threejs master zip I can find CameraControls.js but without any documentation i have no idea what to do with this or how to start. @Mugen87 can you maybe advise in where to start with what I want to achieve? Thanks

6

its a npm package
https://www.npmjs.com/package/camera-controls

7

This class is experimental and should not be used, yet.

8

That was my guess already also. Any advise on what would be a good route to follow? What I found uptill now is letting the camera follow a path created with curves. Is this the way to go or are there other/better options?

9

There are several ways to solve this issue. You can move the camera along a curve like in the following three.js example:

https://threejs.org/examples/webgl_geometry_extrude_splines

However, using an animation library like GSAP or Tween.js provides more flexibility. For example you can easily configure easing methods or implement callbacks for certain events. I suggest you study one of the animation libraries a bit and then animate the camera to a certain position like in the following fiddle or along a path.

Simple camera animation with GSAP: https://jsfiddle.net/8j4dfvx9/1/

1 Like
10

Perfect thanks @Mugen87 ! I am already using (and studying GSAP) so good to know that this is possible with GSAP, thanks again.