Camera Movement In Three.js Using GSAP

in this video we are going to discover two methods to animate the camera and by animate i mean moving the camera to certain positions over time and not using camera controls such as orbit controls or first person controls then we'll use that to create this animation which is made by moving the camera around these three meshes that are positioned around the origin of the scene let's say we want to pull the camera back what comes to my mind and i think it may be the case for you too is to simply change the position by calling the set method or changing each property on its own so let's do that and as you can see the camera goes to the wanted position but that happens instantly since the value of z is changed from its initial position to the final one without any progression because the movement is independent of time so to change the camera position over time we are going to create two variables the first is going to hold the values that the z property of the camera will contain and its value is going to be time dependent and z final is the final position of the camera so when z reaches that value it should stop increasing next we'll go to the animate function and increase the value of z by 0.1 during each frame and we'll set the stop condition and that's it now even if this method works i don't recommend you use it unless you have a very simple animation to achieve like the one we've just seen and that's because you'll find yourself dealing with a lot of variables and unorganized code so easily i mean imagine if we had to add some camera translation on the y and z axis we'd need four other variables and another four lines in the animate function in addition to that you won't be able to add some easing functions to the animation unless you add more code and again more complexity to your code base and that leads us to the second method which is simply using an animation library a couple of popular animation libraries that we can use are enemy js and gsap which is the one we are going to use in this tutorial so first and foremost we need to install it by typing the following command in the command line npm install gsab next we need to import it into our project and now we can apply the same animation we did earlier using the simple and concise few lines of code furthermore we can use the onupdate property to update the direction while changing the camera position so here we are going to make the camera maintain its direction towards the origin of the scene we can call the two method more than once to combine two animations at the same time that done we can also use a timeline in case we have to achieve more complex animations in this case we can for example have a three phases animation in the first phase the camera should be pulled back and the second phase it should move to the top and in the third phase we can create a three axis animation now it's time to apply what we've learned to create some cinematic camera movements around these animated models before we jump into the camera animation if you don't know how to create the scene we've just seen make sure to check out this video in which i explained in details how to clone models and how to animate the clones the only new things here are the time scale property which i used to slow down the animation speed and start at which i used to play the animations at different times so that the models don't have very similar movements that being said we'll start with adding the event listener to the window then we are going to create a couple variables so we have the timeline duration and ease set to none because we want the animation to be linear animation is finished it will be used to prevent the animation from being triggered another time when another click event is captured now we'll start with the first part of the animation which is a camera translation to the left without updating the direction in the second part we are going to reposition the camera on the y and z axis and update the camera direction this time and we'll make sure it starts after the end of the previous animation now i'll copy the code and just alter the x y and z values and as you can see i left the 8 seconds delay so both these sequences take place at the same time again this second phase of our animation still needs some work to be done so i'll copy and paste this block of code and just change the x y and z values another time and leave the delay and i'll add another sequence but this time we'll increase the delay to 14 seconds same thing here but this time i'll use this string to set the delay which basically means run this sequence 0.2 seconds before the end of the previous one and finally we'll add another horizontal translation which represents the final phase of our animation and this is it for this video so make sure to like and subscribe and i will see you in the next one

Channel: Wael Yasmina

Views: 26,548

Keywords: three.js tutorial, three.js camera movement, three.js camera animation, smooth camera animation three.js

Id: O2ouLOL6C4c

Length: 10min 57sec (657 seconds)

Published: Sun Apr 24 2022