Amazing 3D Animation Website with Three.Js So Eazy

[Music] hello everyone recently when making videos about programming and web design I received a lot of comments from everyone about creating videos related to working with 3D models and 3js and that's why we have this video If you think this video will only help you know how to import and use basic 3js no this video is more interesting than that in this video I will also guide everyone to create a 3D animation effect for the website when scrolling the page in a simple way if everyone finds it interesting don't forget to like And subscribe to

the channel to follow many interesting videos about programming and web design thank you everyone and let's get started the first thing is to find a model for the project you can find it on sketch faab this is a place that contains a lot of diverse 3D models in the search section I will type B don't forget to click on the section that allows downloading and has animation effects it will show a lot of results there are free models or not I will choose this model click on the download section and choose the glb version after

downloading you will have a glb file in your project in addition I've also prepared a landing page using HTML and CSS my task in this video video is to focus 100% on 3js I proceed to create a JavaScript file then import it into HTML with type module also don't forget to create an element with ID as container 3D whose task is to contain the 3D model on the screen with this element I will intentionally use position fix to fix it on the screen with inset zero meaning it will overlap the current device screen to make

sure it doesn't have any errors I will try to give a red background to see if it is positioned correctly next declare Z index to make sure it is not covered by other elements finally add pointer events none to avoid it hindering users from interacting with other content elements on the page and that's the whole preparation process now let's move to the next stage in the Javascript file of course we will need to import the 3js library a complete 3D model will be created from two main components the first is the camera to set up

the camera the first value is the viewing angle increasing or decreasing the viewing angle will help us see more or less things the second value is aspect the default aspect value is the ratio of the frame that you want to contain the 3D model in my case I want it to be as large as the browser window if the aspect does not match the frame size the image will be distorted the third value is near used to determine the closest distance that the camera can see set 0.1% so that it can see things closest to

the camera and finally far determines the farthest distance that the camera can see finally the camera position normally no one will use the default position as the camera position instead we'll need to move the camera position away from the z-axis a certain distance to be able to see the whole scene and the second is the scene the scene will contain all the things related to the 3D frame such as the model the light next I need to import the B model that we have downloaded to put into the project to be able to read this

file format we will need to import the GLT floater library then proceed to use the load method to get the file information with the first parameter being the path to the model file in this load method we have three callback functions the first function will run when the model loading process is complete the second function will continuously run during the loading process to help the user check the file loading progress and finally the error reporting function this function will run if an error occurs during the model loading process in case the file upload is successful

I will take all the data about the B model and put it into the scam because as I said from the beginning the scam will contain all the data related to building the 3D model so we have everything we need including the scene and the camera the next task is to use this data to draw on the screen then we have the renderer the task of the renderer is to create the canvas API tag in HT ML and use it to draw on the screen surprise right the nature of 3js is just using the HTML

canvas to draw we will need to set the size of the canvas here I will give it the same size as the browser window and finally we will put the canvas into the 3D container element that we created in HTML now let's see what the website is displaying all we see is black you can see inside the current 3D container element there is a canvas tag inserted and the reason the screen is black is because of the background color of the canvas if you want to replace the black color with a transparent color at alpat

true here so we have created a canvas on the screen next we'll use the data from the scene and the camera to draw a 3D model on the canvas however nothing happened so where is my B this happens because when we use render to get the data of the scene to draw on the screen at that time the loading of the 3 model data is not complete and of course at that time the B is not added to the scene so when using the scene at that time to draw on the screen there will be

no B model fix this problem instead of writing a render that runs only once here create a function called render 3D and paste that code here don't forget to call it immediately below to run this function the difference is that in this function I use request animation frame to continuously repeat this function thanks to that if the first time the B is not loaded when rendering then after the B is loaded it can still render new data because the reender 3D function continuously repeats to get newer data some of you will think that this usage

is quite similar to set interval in JavaScript but in fact request animation Frame Works much better smoother better performance but why is the current model only black that's because we don't have light yet when working with 3D models we will have two basic types of light that is ambient light and directional light when initializing ambient light will include two values the first is the color of the light the second is the intensity when using this light the brightness will be divided evenly across the entire element helping us to see its color as for directional light

it is more special than ambient light because it has a direction for example the sun it will have the coordinate position of the light source thanks to which when it is lit the model will have brighter spots and darker spots because the light being covered thereby creating a more realistic feeling finally based on this 3D coordinate rule I will move the be's position to be more suitable after loading the B model I will change its initial default position if the model's initial y- AIS position is zero I will reduce it so that it moves down

if this direct view is not what I want I will also rotate the b along the y- AIS so that it looks in a different direction back to the page where we loaded the model it's clearly flying not standing still look at this model it contains a bunch of different animations and for each type of Animation it will move differently so how do we get this animation when the model is loaded the animation information is already sent along the problem is how to use it to manage animation in 3js we have mixer when the model

is loaded I will also initialize animation mixer with the object that wants to create the main animation which is the B now my task is to find which animation has the same name as the animation that is creating this movement and according to this list the animation with the same name is at position zero so I just declare the animation at position zero as the main animation to move finally use exer update with a time of 0.02 seconds it has converted but it does not create animation this is simple because this upload method also needs

to repeat continuously update the new image so I will also move it down to the render 3D function so that it can repeat continuously when using remember to add a condition to check if the mixer has been initialized before proceeding to update so we have been able to get the default animation of the models similarly you can try other default animations now let's come to a more interesting animation I want to create a calculated movement when the user Scrolls the page thanks to the fixed position attribute initialized from CSS the B is now always following

the screen my job now is to determine which section the screen is in and then move it to the appropriate position please note that all the sessions in HTML I have identified it with a separate ID now I will try to change the position of the beam manually to find the right position for example in the banner this is the position I want I will temporarily save this information into Excel the two things I will change are the position and rotation next is the position of the intro I will move it to the right by

increasing the x-axis position and change the Z position to make it smaller at the same time I will also change the rotation angles so that it is facing the left after finding a satisfactory position I will continue to put these values into Excel for temporary memory just like that until I complete this process at the end I will have the complete change positions based on this data I will create an array containing information about the transitions each object will represent a section each section will be identified by a unique ID which is also the ID

of that section in HTML below will include information related to posi in and rotation likewise I will fill in the rest of the content once we have enough data we proceed to capture the user scroll event for this task we only perform it if the B model has been loaded at this point I will process the information inside the move model function initialize the function everyone notice that all these sections are declared by me in the same class called section with each separate ID so first that will get the entire section list using query select

all for each section I use get bounding client track to get its current position information if its current distance is less than 1/3 of the screen height then I take the ey of that section as the current position now I will display the active item to test it as you can see when the section with ID intro reaches this position it is activated if the ID is already active I just need to use the find index function to find its corresponding position in the position model array with the condition that its ID will match the

ey of the element inside this array if the found position is greater than or equal to zero it means we have found it in the original array at this time the new coordinate is equal to the object at the position just found finally we just need to change the B's position R to the new value we just found now let's try scrolling the page it is transition however it is shifted immediately instead of moving smoothly the easiest way to solve this problem is to use gab first we will need to import it here now instead

of Chang changing the position values of the B directly I will put it in the to method of Gap in addition we have an additional duration property to declare the animation duration and ease is the animation type here I choose it to initially transition quickly then gradually slow down now let's try again the position movement problem has become smooth similar to position I will also use gsap to change the rotation value of the B also because the B's position is already set completely in this function so instead of having to temporarily set the values when

the model is loaded I will call the model move function right here let's try again everything is perfect the Beast transformation is exactly as I intended from the beginning but there is still a problem here that is when the screen size is change the be's position is no longer correct and gradually disappears from the screen that's because we haven't made it respond Ive yet first we need to catch the event when the screen size is changed at this point we will have to set the canvas size to the size of the current browser screen as

you can see RB is no longer falling off the screen but is distorted because the aspect ratio in the camera is no longer correct so we also have to reset the aspect according to the current screen size and we have to call update projection Matrix for it to take effect and that's it now when the screen is zoomed in or out our 3D model will change accordingly so it doesn't break and that's the last content in this video I really hope it will be useful in the project I tried to make it as simple as

possible so that beginners can access it if you have any questions in the video don't hesitate to leave a comment and I will answer and if you find it interesting don't forget to like And subscribe to the channel to continuously update interesting videos about programming and web design thank you for watching Until the End see you all in the next video [Music] [Music]