Need help with gsap camera and OrbitControls animations

Questions
,
1

Hello all.
I’m hoping to get some help with gsap animations around a scene.
I know we are not supposed to ask multiple questions in one post, but I think fixing one of my issues will fix everything. So, please forgive me for asking so much.

I put together a quick scene with a few spheres, along with buttons that animate the cameras movement to the spheres. There is also a scene reset button in the dat.gui that puts the scene back to its original position. The example is here
https://codepen.io/SD32/pen/Yzwgmvq

The problem is this,
Right now when a button is clicked the camera “fly’s” to the sphere’s exact position. But I would like to have the camera move to a position where it stops in front of the sphere so that it is directly in the cameras view as opposed to the camera being inside the sphere. There should be some distance between the camera and the sphere… Hopefully that makes sense.

If one button is pressed, the controls.target function, and the camera.position both work correctly the first time. When the camera stops moving, the scene jumps, and the orbit control stop working all together. But if another button is pressed, the camera will move to the corresponding ball, but the controls.target function animation does not work.
If the scene reset button is pressed, that animation works fine, and when it finishes the orbit controls work again.

Right now the camera, and controls.target position are the same XYZ positions. If one change is made to the target position everything works fine. For instance, ball 1 position is:
x: -17.6, y: -1, z: 28.9.
If one digit is changed in the controls.target animation the orbit controls don’t freeze up.

Thanks

1 Like
2

One possible solution for this issue is to compute the AABB for the object and then animate the camera towards one of its side. This can be achieved by computing the center and size vectors of the AABB. You can then use these vectors to compute the target position. Something like:

var aabb = new THREE.Box3().setFromObject( mesh );
var center = aabb.getCenter( new THREE.Vector3() );
var size = aabb.getSize( new THREE.Vector3() );

gsap.to( camera.position, {
	duration: 1,
	x: center.x,
	y: center.y,
	z: center.z + size.z, // maybe adding even more offset depending on your model
	onUpdate: function() {
		camera.lookAt( center );
	}
} );

Live demo: three.js dev template - module - JSFiddle - Code Playground

5 Likes
3

Wow man! Thank you so much! :grin:

If I have more questions about this should I start a new topic?

Once again, thank you! I really appreciate it.

4

No, related questions can also asked in existing topics.

5

Ok, what I’d ultimately like to do is create click events in each buttons HTML, that will animate the camera to fly to each sphere when the corresponding button is clicked. That way when a sphere is added, I can add a new button with a small amount of code.
Something like:
<button onclick="moveCamera(x:-17.6, y:0, z:28.9)">Ball One</button>

That way if I add a dozens, or even hundreds of spheres, I have a minimal amount of code.
I’d show an example of what I’m trying to accomplish, but I only managed to create a mess when I tried. :man_facepalming:t5:

So any help would be greatly appreciated.

6

Hi Mugen the script works perfectly but if i move the

gsap.to( camera.position, {

                    duration: 2,

                    x: 1, 

                    y: 50,

                    z:  -60,

                    onUpdate: function() {

                    controls.update();

                    }

                } );

to a negative value it will rotate my camera to the other side . if the value of the rotation is > 180 then it will have a weird effect.

7

Hey Mugen, I have another question regarding this topic.
As it is right now if you press a button to animate to camera’s movement it will fly to a sphere, and reset. Is there a way to have the camera fly to a sphere and look at it from the angle that it starts from?
So if the camera fly’s toward a sphere from the left I’d like to have it stop and look at that side of the sphere as opposed to resetting.
Is that possible?
Code can be found here;
NEW Three.js animation test (codepen.io)

Thanks

8

Hi Mugen,
if i changed gsap command as a this;

gsap.to( camera.position, {
duration: 1,
x: center.x,

		onUpdate: function() {
			camera.lookAt(  );
		}
	} );

object is going point of create for movement but i wanna it stay in last point and it move. please help me.

9

I updated @SCDavison codepen example to support 148 and the modular dependencies. It was a super helpful example.

10

Thanks. I appreciate that.

1 Like