A Beginner's Guide to 3D Animations in React Native with three.js

what's up no Jazz developers welcome back to a new project based tutorial and today I prepared for you something special today we are going to build a 3D we're gonna learn how to build 3D animations in real native using free.js so first of all what's this free.js well you most probably saw a lot of 3GS websites where there are these stunning and crazy 3D experiences where you can scroll and go through 3D scenes a lot of people are using these 3GS for their portfolios or other interesting use cases the cool thing is that 3GS is also available for react native applications and that's actually what we're gonna do today we're gonna use Expo we're gonna build our react native application with Expo we're gonna use 3GS and also react free fiber to put everything together ever and build beautiful 3D experiences in react native we're also gonna cover the fundamentals of 3GS and how to to understand that all these Concepts because getting started is quite complicated and this was my first experience with free jazz so it was really complicated to find like really easy to use information so this tutorial I prepared for you uh something that I put a lot of work in in order to make everything more simple and everyone to be able to understand and follow along actually this tutorial was inspired by a tweet so the creator of this project was Alexander patarize hopefully I pronounced the name correctly and in short the end experience that we are going to try to do by the end of this tutorial is similar to this where we will have a 3D model of some Nike shoes and then based on them uh the gyroscope of the phone by moving the phone we're gonna drive the animation and we're gonna see these shows moving on the display so I hope you're as excited as I am for this tutorial and before we get started make sure to download the asset bundle following ss.noja.dev Nike where you will find uh most importantly the 3D model that you're gonna use I search for them a lot not all of them are compatible so this one is going to make your experience much easier to follow along and do the same thing as I'm doing here also I have prepared the step-by-step guide as usually on notjusts.dev and if you go to um to the description of this video somewhere in the description you will see the uh step-by-step guide here follow the step-by-step guide so let's open it and we're gonna use this I prepared all the steps that you need to follow in order to complete this project so it's going to be very useful and it will help you along the way all right so um think we are more or less ready if you're new to this channel hi my name is Vadim I'm a full stack developer and I've co-founded multiple startups I worked at Amazon as a software engineer but now I found my passion in teaching developers all over the world to build full Stack mobile applications and if you are one of them make sure to subscribe to the channel leave a comment down the video and I will appreciate that very much so without further Ado let's get started and let's start learning fiber with react native hi everyone in the live chat how are you doing guys are you excited about this one this was something new for me as well so uh very exciting when I'm also learning new stuff so yeah uh okay so I'm going to start this tutorial with a brand new project so everyone can follow along and for that let's go ahead and open a terminal I'm going to navigate to my project uh let me okay so open a terminal navigate to the project where you usually create your project I'm gonna zoom in a bit so it's going to be visible let's do a clear and now let's go ahead and initialize a new Expo project for that we're gonna use npx create Expo up and let's do uh the name first free application let's press enter and this will start downloading the Javascript file and initializing our Expo project and we have a first donation and moon play thank you very much for best support you were help supporting the channel previous time as well I appreciate it very much thank you cheers hope this time the shoe will be included with a source code at least it's 3D yes we're getting closer to a real shoes uh Thursday those 2D today 3D next time maybe an nft or something and we're gonna get there and yeah in a couple of weeks we're gonna do a 3D printed shoe right uh how about him are you going to add the back and forth last week Nike project yes I'm planning to continue the Nike project and this is part of an IKEA application however I'm starting slow with a brand new application so that the all the complex logic of 3GS is going to be easily understandable for everyone and by the end of this video we're gonna integrate all of this in the Nike application and later on next week we're gonna do that backend as well uh so we have our application uh created let's go ahead and open it with code so I'm going to open it with code just like that uh I can close the terminal I don't need it anymore let me zoom in and set everything up and let's go ahead and open a terminal from where we can run our development server by doing npm start this will run our Metro bundler and from here we can either run the application on iOS Android by pressing I or a as you can see here I'm going to start by running it on iOS simulator but throughout the tutorial we're gonna have to switch to a real device uh because some of these things will not work on on simulators for now I hope we should be good to go here we see our simulator not sure how how fast we're gonna have to switch but we're gonna do that like that come on perfect perfect perfect perfect and again uh don't forget that all of the steps that we are doing here uh you can find them on not just.dev website and here you will find like all the commands that you have to run the next step after running the application which should take a moment yeah let's first see it displayed on screen perfect we see open up.js to start working on the application which means that our application has is running successfully now the entry point of our application as we already know is app.js let's go ahead and open this file here um I'm going to I'm going to just simply probably ignore the TS errors here yes uh simply adding this test no check because we are not using typescript for this application we're going to stick with JavaScript for now um so yeah as I said our application is running we are ready to get started and for that let's go ahead and start and install already balances that we're gonna need for this project let's grab the command from here from install dependencies and we're gonna install uh photogram um let's open a new terminal in Visual Studio code and here let's run this command we're gonna install free which is the free just Library we're going to install the react free fiber and red free fiber I showed here a bit of example of what's the difference uh between rat free and rat free fiber ratri fiber is a simple renderer for react which allows us to declaratively build our like 3D scenes basically it's going to help us write the same code that we are used to writing in react and rack native instead of doing it in a in a in the 3Gs way so it's very easy to understand the difference when you look at the two codes here on the left we see the code that you'd have to write in 3GS you'd have to initialize all of them all of the classes to put them together so it's much more work there where in a in using rack free fiber we simply render components and behind the scenes they are transformed to the 3Gs way of doing it so it's much more easier to write the code and it's going to help us throughout the tutorial uh what our dependencies do we install the Expo GL which is uh for the graphics and Xbox 3 which is um connecting 3gs to Expo gel so uh probably we will get an error yeah I think there is um differences in peer dependencies here so what we can do to solve this problem I mean to ignore this problem is to run the same command one more time but other than dash dash space invent dash dash Legacy peer depths and that should install them correctly why is my word black which one so yes our packages has been installed correctly perfect I think we are actually already we have all the libraries installed and we are ready to start rendering something on the screen so let's start with then free jazz fundamentals well in order to display something on the screen I'm going to make this one smaller in order to start rendering something on the screen we need that canvas a canvas is a place where we will draw uh where we will render our 3D models and the whole of our scene so let's go ahead and import canvas from react free fiber and instead of rendering this view I'm going to render simply the canvas just like that now we don't need the Styles anymore and we're going to simplify our file very much like we need a canvas we are rendering the canvas here and let's save and yeah we do not see anything on the screen because we have an empty canvas perfect the next step is okay let's start to render something on the screen to render an object on the screen we need two things we need them to define the shape of our object so if you think about uh if you have to render for example a basketball ball right you need to know a couple of things about it in order to render it on the screen first of all you need to know the shape of it and the shape can be a sphere right and the shape of the object that we are rendering in free GS terms is called geometry the second part about the object that we have to render is the the material basically what color is it what how rough is this material is it shiny or is it uh how well it reflects light and so on so an object which in free jazz terms is called a mesh is consists of two things the geometry which represents the shape of an object basically a sphere and the material and the material is what represents how this shape looks what the color and so on so with these two things um this cast let's go ahead and render a mesh basically the mesh of is our object and it has two um two required things vegemometry and we're gonna start with a sphere geometry so let's go ahead and write sphere geometry and as you can see we don't have to import it from anywhere it will automatically be available from uh from 3GS so by doing that we already see something on the screen we see basically a circle at this moment it's not yet visible that this is 3D because it looks like a 2d Circle but let's go ahead and add the material the mesh the mesh material so we're gonna use a mesh standard material that will allow us to give simply the color for this geometry for this object so the color let's go ahead with orange if we're trying to render a ball so something happened if I'm re-rendering maybe this is the time where I have to switch to yes most probably this is the time where I have to switch from a simulator to a physical device so I'm gonna go ahead and close my simulator and from my physical device I'm going to press C here to see the QR code and using the Expo go application on Android or the camera from your um iOS device I'm gonna scan this QR code to open the application on my physical phone okay I already see it and now the last step is to go ahead and show it to you as well so for that uh I need them this one give me just one second file new recording hmm why you are not showing up in this menu okay I think I have it here foreign my phone my my charger is really bad like I mean my phone probably um the connector is not very um reliable but we have something on the screen oh come on to throwing give it a sec will that work Let's Get Physical yes uh uh okay let's get one more time why you cannot do that this showing just now okay we need you to work probably too much sand in there in the port foreign player like just doesn't want to it crashes QuickTime Player come on you can do it that's going to be interesting if I'm not gonna be able to show you I can actually show you like this like hey here it is but I really want to show you on the screen because we have a lot of exciting things now too to do so I'm gonna give it more two come on why as an Indian slapping or tapping by electrical devices is the solution for the work I don't know let's try oh uh no actually uh can you ask please Alex to give me her phone maybe that's gonna because I think but no it's not a problem in the phone it's a quick time because just starting with a quick time gives me error and an error hmm we have a problem I don't have a possibility to restart a computer how to stream this one here oh use activity monitor to kill QuickTime yeah maybe that's gonna work because I'm quitting it but it doesn't properly a quick time play yes it's still here so let me try to kill it with fire stop quit doesn't want even from here oh no it worked so now let's open it again and new movie recording again preparation could not be completed hmm foreign you have time to make to follow along until this point and hopefully for you you should see the the black um circle on your screen come on QuickTime come on let's be friends yeah that's not very fun if you're interested what I'm doing like have a look I'm just playing with QuickTime Player you can use rust desk what's that is that something that I can stream my um phone screen so quick time player come on here file new movie recording and it doesn't work new audio recording audio recording works um but for movie recording it doesn't what if the problem is my camera that is used by the streaming software let's debug guys you came here for the operation could not be completed yeah look let me try to stop the camera you're not gonna see me but hopefully we can do something if not so I'm out for a second don't worry I'm still here and let's go ahead and open QuickTime Player file new movie recording no it's still the same problem okay so yeah I'm not gonna try it anymore I'm gonna just from time to time show you on my screen what we see and then um yeah you you'll follow along uh myself and you'll see it on your physical device and I think it's gonna make a lot of sense like this yeah we we have to to do what we have to do so uh the last step that we have done is adding the mesh standard material in our code and a v smash tender material allows us to easily apply some meshes by simply applying some colors so this is a very standard material like just to get started and see things on the screen but the problem is that at this moment our circle is not orange like it is still black so why is that happening well that is happening because we forgot to turn on the light and what what do I mean by that well our canvas and the way a 3D World scene works is it needs a light source to light up the 3D models that we have here so we have a couple of types of lighting and the first one would be the ambient light so if the first component in the canvas would be our ambient light then our sphere will already light up but as you can see it is still it still looks very very much 2D at this moment it doesn't look like a 3D model and why is that well um the ambient light is the light that will light the objects proportionally from all the direction you can think about this as with daylight that you have in the room so basically all the objects are kinda lit in the same way and the ambient light will not produce shadows and because it will not produce Shadows we will not be able to see that this is an actual 3D object so we besides the ambient light we need to use another source of light in our code in our scene that will that will mimic more a light bulb and the light bulb to mimic a light bulb basically we are going to use a Point light the point light is a light source that has a position and emits light in all the directions uh proportionally but when it hits some objects it will light the face with faces the the light more than the back side of that object another thing is that the point light needs an actual position so the position if we give it a 10 10 10 that's going to change a little bit our scene and now we're gonna already start seeing with vsphere is an actual 3D object as you can see here like now you can see and you can understand that it is a 3D object your brain can process it because one side has a shadow and our side is more lit and to see this even better you can go ahead and uncomment the ambient light and this will produce an even more dramatic dramatic scene because in this situation only one side of our sphere is uh that faces our light source is being lit and the back side is almost black because there is no ambient light so that's how we can play with different light sources to mimic basically the real world and to give um to give them a realistic look to our scene uh I have a comment I think you should consider making a guide for 3GS for people who is new to 3D kind of stuff I think this is exactly what you're looking for because I am new to 3D world as well like all of this was very new to me a couple of weeks ago and I invested a lot of time in studying it and I find it very very exciting and I'm happy to share it with you and try to make it more easy and simpler than it is uh then I had when the experience that I had going through all the documentations trying to understand like all of these sliding sources all of this mesh like what's a mesh what's a geometry what's a material or how to load objects and so on so this is exactly what you're looking for so um yeah as I said uh to recap what we have done so far um we know that to render 3D scenes we need the canvas and in the canvas we can play with our object then a 3D object basically a a object inside our scene is called a mesh and a mesh is is composed of two things its geometry which represents the shape of it so is it a cube is it a sphere and so on and the material and the material represents how does it look is it orange is it black is it shiny um and things like that so you can go ahead and play with different kind of geometries for example you can you can have a uh what's it called not the sphere but not a cube is it a cube no not a cube give me just a second a box box geometry yes a box geometry will geometry if we give this mesh a position to move it a bit on the screen and I'm gonna give it probably one zero zero or even let's do one zero two zero yes or minus two in order to put it on the bottom yes no two is better yes like this if we put these positions now we see a box and the Box uh we can understand that it's actually 3D we see it's the shade of the of of it behind so yeah what you can do is you can play with uh different uh geometries and I left a link inside the guide so if I go to the sphere here you can check out different geometries by checking their free just guide so in the geometry come on somewhere here in the geometries we see all the different kind of geometries that you can play with starting with a box one which is a basically a cube uh a capsule you can change the radius of a length segments and so on the circle one I think it's a disk uh cone geometry yeah as you can expect cylinder and so on there are a lot of pre-made geometries but you can adjust to to make different kind of shapes that you need in your scene this one is a sphere one we saw how to work with it Taurus this one looks really amazing it's like a ring basically okay this is crazy already just by changing some parameters you can adjust how it looks wow mesmerizing like I'm just playing with it so bear with me but yeah uh go ahead and play around with different kind of geometries uh try to add multiple of them you can add different kind of meshes here uh so we can for example let's add Taurus like this so I'm gonna Taurus not geometry instead of box let's do Taurus not geometry and for the position I'm gonna do minus one minus two to do it in bottom here and it's not going to be worrying it's going to be green yeah it's already something different we see it here on the screen all right so um you can see the difference between 3GS which on free jazz documentation here you this is The free.js Code by initializing like new free dot Taurus and sending all of the parameters here in our case we are using the fiber react the free fiber the free react fiber and it's simply rendering the component like this and we can pass here even like the args which can be the arguments that Vapors here so if I'm gonna pass these arguments in my code I I should see the same kind of structures here so let's try to to pass the arguments like this then free 100 okay it's too much so I think I'm gonna play with scale of 0.2 even 0.1 actually it's not what I was expecting to see hmm Taurus not geometry then maybe I can adjust it using radius and so on so Taurus like radius equal 10. nope I think it's a bit forward red you see it worked but for them for this one for over Q oh I need more I need more so I need this digit all right all right all right give me a second uh so here I'm gonna try to copy all these arcs 10 yeah it's around 10 this one it's around one then here 260 then we have six then we have 10 and 16. okay now it looks something like that I'm going to show you just in a second so here is the object that we were trying to emulate and in my code if I make it even a bit bigger probably I can do it in position zero zero zero then we see this form this 3D crazy form in our scene here in the next step I'm gonna animate them and we're gonna see like them spinning around as well so yeah um I'm gonna stop here playing with different geometries you can continue doing that um it's it's really fun to see all of them how they work now what I want to do is I want to show you the power of the fiber library because it allows us to create reusable components the same way as we would create basically a reusable button in react.js or react native so for that for example if you have some shapes that you want to use in in different screens where you want to reuse multiple times in that case you can simply start by defining a function for example let's say we're going to start with a box we're gonna receive props and this box will return a mesh I'm gonna start with probably V smash here because it's a box geometry and yeah both geometry is going to be orange and now inside my application instead of rendering this mesh I can render a box component as I would normally render a react react.js component or a react native component um I can go ahead and take these props and send them down to the mesh in order to be able to adjust props like position of every single individual box so now if I save you can find props props like this yes now if I save I'm gonna go ahead and comment out this one we should see on the screen one box in the middle of the screen however if we're gonna go ahead and duplicate this box and put another one on position um one zero zero another one maybe not one but one point five three yeah I don't like this position one and this one minus two and this one two stay with me here yes that's perfect so now uh just rendering three different boxes and sending different positions to them we will see on the screen three different boxes one of them on top in the middle and on the bottom and the benefit of this is that all of these boxes they can have individual state so we can adjust how they behave how they perform how we look on the screen depending on the state and they will actually respond to the State updates that happens here so it's very very similar to to everything that we are doing in react does it support TSX yes it supports typescript I'm just keeping it simple with JavaScript for now so um yes we can go ahead and play with the state and see how we can use it and let's go ahead and import the use State Hook from react and let's for every box let's define a state variable whether this box is active or not set active use State initially it's going to be false so if if the state is active we can go ahead and increase for example the scale of our mesh so we can say that the scale is going to be equal to if it's active it's going to be a bit more larger 1.5 otherwise one and probably also we can adjust the color so if it's active it's going to be green otherwise let's do gray okay now all of them will be gray but we want to detect clicks so whenever we click on a on a 3D object we want to set it as active well we can do that we can add a one-click event on the mesh so if we do on click we can register them the on click event callback so every time the user will click we're gonna receive the event of that click and what we can do is we can go ahead and change the active state of that individual box so now with this code let me check if it's working yes it should be working we can go ahead in our application and all of them are green but if we press on one of them they will change the scale they will change the color and yeah we can select all of them as you can see so this opens up a lot of the dwarf to a lot of opportunities we can now create games like interactions user can not only see this free 3D scenes but they can also interact with them they can click they can scroll and so on and that will change the 3D environment with VC so um perfect now um as I said I also want to see a similar animation like rotation animation as we see on the 3Gs documentation we want our objects to basically spin around to do that we can use a hook from react free fiber called use frame and this hook will allow us to execute some code on every frame that is drawn on the screen so for example if our application is running at 60 frames per second the function inside use frame is going to be called every um one 60th part of a second so basically every how much is it 1000 divided by 60 that 16 milliseconds so every 16 milliseconds this function is going to be called and what we will get is we will get the state of our object and also with Delta and this Delta specify how much time did it pass from the last frame update because yes if you divide 1000 by 60 that's 16.6 but in case your phone uh that's not always going to be the same because if your phone is running some other operation at the same time maybe it takes more than that to uh to render a frame maybe it takes maybe your application is not even running at 60 frames per second so that's why we have this Delta in order to implement very smooth animations based on time uh so what do we want to do is basically we're going to update the rotation of our mesh you uh whenever like on every frame drone for that we can basically um the first way you would think about this is yes we can send position here and we can go ahead and save a position in a state variable on every frame drawn we can update the state variable and then send the position here well that's not how it works because in the use frame we should be very mindful of the performance and we should also not update State because every state update will try to re-render the whole component and imagine if you have to do that 60 times every second to re-render all of our component so instead of changing the rotation through State what we want to do is to access this mesh using a reference so for that we can import a use ref Hook from react let's define the mesh reference and by sending it here to the mesh as reference as mesh now from other functions by calling mesh dot current we can access the the properties of our mesh and inside the use frame we can use this mesh dot current dot rotation is it rotation yes it's rotation rotation and we can animate web for example the Y position of a rotation by adding the amount of time it passed from the last second and that means that every second we are going to rotate on the y-axis one radian if I'm not mistaken I'm not sure how radians and degrees work think yes is one no no it's one degree more radian I don't know but it will move and that's what we are looking forward to see um what's going on here Let me refresh the application and see if it works uh yeah we see yeah I forgot to remove this position and now reload yes come on let me try again uh QuickTime Player Maybe now it will work no it's the same problem and what we see on the screen all of our objects are rotating uh on the y-axis it's a nice smooth animation all of them are rotating uh we can add different kind of logic here like basically we can add logic to rotate only if it's active so if it's active then we can rotate and maybe you want to rotate not only on the y-axis but also on the X axis so now what we will have is all of them are stationary and when we select it's active it starts spinning it's basically what you can do like for games when you try to choose a player Maybe yeah like possibilities are endless here oh come on yes perfect okay so that's how you drive uh animations using the use frame hook it allows you to run some code and update some properties of our objects every single frame uh that our application is rendered if you're coming from game development background which I had I was a game developer probably seven or six years ago I was really into that so that's basically how game engines are working you basically have an update function that is being called every single frame and in that update function you need to take decisions and move things around you just move like every frame like a little bit closer to the destination based on the how much time passed from the last re-render and yeah basically that's how you develop this 3D experiences so guys so far how is it going is it clear I hope I'm making this clear even though we are taking it slowly and I'm explaining every single step I want to make sure that you understand what we're doing here because if you go to the free jazz documentation like you just see all of these examples right away and you are left with okay but why is it like that what does that do and so on shouldn't you clamp value so that the angles don't get too big yeah probably you should um so that basically means that if you you clamp them if it's radiance from zero to B radians are like that and if it's in degrees from 0 to 360 but yeah even like this it will work so if we give a rotation of some thousands of degrees that's just going to Simply mean that um hard to explain rotations I did a saying that he is messing everything there that's that's the way to learn it like mess with it see how it breaks give make assumptions like what happens if I change this what happens if instead of doing plus Delta I'm gonna do minus Delta well that is going to change the direction of the rotation one is going to rotate it clockwise another one is going to rotate it anti-clockwise what if I go ahead and do Delta multiplied by 10. that's gonna simply go ahead and spin it like crazy like this uh so that means that this is the speed at which uh it it moves um okay if it's a Speedway maybe this can be a state variable and we can have um we can have a handle that moves the speed like from up to from low speed to high speed and yeah go ahead and play with it be be creative be crazy try to to see the limits and to understand how everything is put together is really trying to help me and I really appreciate that let me go to the uh to to make to make my application visible here so I'm gonna go to the system preferences uh uh in the location on privacy or just privacy privacy settings okay location services wait a second in the general you see the problem is not with uh with my device the problem is with QuickTime actually because the QuickTime fails even if I don't have my device connected Oh you mean from my phone to room let me see there so in the settings from my phone I'm gonna try I really want to to for you to see everything on the screen because we are just getting started we are covering only the fundamentals now and in the next phase we're gonna Implement that animation that you saw in the in the beginning of the spinning um 3D model of a Nike shoes so I really want you to see that as well on the display is going to make it more much more easier but it seems that reset location and privacy yeah hmm don't seem to no the problem seems to be with my quick time operation could not be completed why and this is not gonna work on iOS right um yeah my phone is not plugged at the moment so yeah the problem is still there uh would you mind asking my question I have this question for a while which is better for app development Java kotlin or native um basically Java and kotlin visit native development and it allows you to write Android applications what we are doing here is we are using rack native which allows us to write the code once and then Rec native behind the scenes transforms this code to native code so at the end of the day it's a way to write native applications in JavaScript and what we get out out of this is a native Android application and a native iOS application so that's why react native is so powerful and I recommend it I always recommend it and as you can see like um you like you you can do a lot of things in Rec native like there are no major limitations between rack native and Native development emulator is not working so yeah I'm just gonna have to to show you my screen on them on the camera from time to time maybe on Android maybe on Android again I really doubt it oh look at this when Android it's working wow that's unexpected but on Android emulator is working so I'm happy with that now we can yeah like I can show you much easier everything that we are doing we are changing here so it's going to be way easier for us to to play with this record is saying super clear thank you very much I assume this video is going to be saved as always yes all of our live streams are saved on the channel so you can re-watch them on your own time uh post them go ahead and make sure that you follow along and get all the value that you can squeeze out of them okay so um that's most of the basics that I wanted to show you today um working with geometries with basic shapes animating them and so on now let's go ahead and start adding 3D models um and yeah like import 3D models that you can generate in 3D softwares like blender or other software that are out there and yeah like you can design any kind of shapes instead of working with simple cubes like what we're gonna do is we're gonna import the model of Nike shoes and yeah like that's that's opening uh doors to a lot of other opportunities instead of yeah displaying uh simple shapes like this uh so for that what we're gonna do is um yeah let's first of all go ahead and import our 3D models from the uh from the asset bundle so give me a second to find vested bundle here on my computer you can download the asset bundle in the description below and you're gonna get um this model so here is our asset bundle and I have a model of some Air Max shoes um let's go ahead and grab this Air Max directory inside the assets folder of our project just like that perfect now we need to take a couple of steps in order to tell metrobundler that okay besides images like PNG we also have some assets of some very specific types like MTL and OBG or other extensions that we might have our objects in so for that if you have Metro dot config.js in your project go ahead and open it in our case we do not have it so let's go ahead and create one Metro Dot config.js and here from the guide that I have prepared you you can simply copy the Metro config from here let's paste it here and basically what it does it specifies the additional asset extensions that we need in in this specific case we are interested in the MTL for the material and OBG for the object but yeah like there are other extensions for 3D objects as well so it depends on your extension make sure it's here once we do that we have to restart our server in order for the new configurations to take uh to take action so I'm going to go ahead and do Ctrl C to stop the server first and then I'm gonna do npm start then dash dash space dash dash clear and this will clear the cache as well so we start from scratch yeah we see here bundler cache is empty rebuilding now let's go ahead and press a tool reload our Android application and while that is happening in our app.js um I will close this box and we can start defining a new function for our shoe so let's do show here we're gonna have props and what it should return it should return basically a mesh with lower cut lowercase m let's do it like this perfect and let's go ahead and render instead of these boxes I'm going to render our shoe on Android I'm gonna refresh bundling and let's wait yeah on Android it's working because it's an emulator and not a simulator as it is on iOS it sounds similar but it's very different a simulator just simulates the operator operating system but the Android emulator is actually running the Android OS some things are still not working on Android but on the emulator things like depend on some sensors that we're gonna get into in a moment so what yeah maybe even like loading these assets will not work on Android hmm let me meanwhile try to load it here as well on my phone but yeah on Android it no no we we still have to to wait for it to build no that's building for iOS for Android that build us complete we see empty screen because we are not rendering anything here in the mesh basically if we would do a box geometry just to test yes we see the box there okay perfect but uh in this case our geometry like uh the object that we want to render will contain a very custom geometry and a very custom material for this um and they will be imported from our OBG file from our 3D model mm-hmm so um let's go ahead and start loading this object and for that from the react free fiber we have to import the use loader which is a hook that helps us load models textures and other assets and we also need to import a very specific type of loader that knows how to load this object and in this situation we want the OB G loader from free dot dash examples then loaders then OBG loader like that now in our show before returning let's go ahead and use the use loader function and this use loader function is going to give us our object so let's store it in the OBG equal use loader and for the use loader function we need to specify what type of loader do we want to use in this case it's an OBG because our file is dot OBG uh and then we need to specify the path there so the path we're gonna specify you are using the require so let's require uh assets than Air Max then shoe dot o b g dot OBG like that uh and and in order to render this object we're going to use a component called primitive and the object of this primitive is going to be our OBG variable if I do that obj loader could not be found definitely I mistype it so I'm gonna copy this import from our guide OBG loader yes it's GSM I skipped this one and what we see at the moment is an error saying a component suspended while responding to synchronous input what does that mean well that means that our shoe component was loading um was loading our assets and while visas happening uh we have not provided any fallback component to render on the screen basically at the moment while this task was happening loading a very heavy asset our application just stopped working so with react 18 what we should do in these situations is we need to wrap components that do this kind of imports inside the suspense component so let's go ahead and wrap our shoe because the shoe is loading some heavy assets and let's wrap it in a suspense uh put the shoe there and we need to provide a fallback component that will render while this one V3 is loading you can do a loading indicator here I'm gonna do a null component just to have an empty screen and just like that I see something on the screen it's a very little small dot there but it's there so if you go here to the Primitive and do a scale of probably 10 we already see some kind of shape and for the mesh if I do some rotation rotation rotation one zero zero yes as you can see it's it's it's taking shape it doesn't have any color because at this moment we simply imported the basically the geometry of our object only how um was the shape of it now what we have to do is to go ahead and import the material and as you can see the our Air Max component comes with an dot OBG file and with a DOT MTL file and this MTL file is very material but we want to apply to this object all right so we have to go ahead and load that material for that we're gonna need another loader to import an overloader called MTL loader let's change here as well MTL loader and let's import the material before we import the object const material equal use loader again using the use loader use loader we're gonna use the MTL loader because in this situation we we want to load the material file so let's go ahead and import it using assets air max van shoe dot MTL and the next app is this material we need to apply to the object and to do that what we're gonna do is then we're gonna add a callback function to the object loader specifying what should happen after the object is has been imported so the third parameter in the use loader is going to be the Callback function of a loader and what we have to do here uh uh come on like this yes OBG loader require and then using this loader what we want to do is after this is finished done we want to pre-load the material preload and we need to uh set this material to our object here using loader.set materials and then material okay so what we have done here is after we imported the object using the loader we pre-loaded the material but we want to add and we set it to our object there if I do save something is not working because shoe dot MTL shoe dot MTL mtel loader let's try to what MTL is here maybe we need to take the next step as well in order for this one to work but let's try okay let's wait it's loading okay it's working I see we see something so we see a very dark shade of our shoe but it's already um we see that something happened the material was applied the problem is that the material is made out of different textures okay one new uh concept understand and this one is where it was a bit confusing to me because there are different types of textures if we open the textures folder for our model the first one is the base color okay this one is a PNG it's a PNG or like a normal image that Maps basically the colors of our shoes this one is pretty simple to understand and by applying these our shoes will start having colors okay but besides this uh like color texture a material has also other types of textures for example a normal map which looks something like this will indicate um but this will indicate um the texture of our material and it doesn't change the shape however it changes how each pixel or how each individual part of our shoes will light up so we're gonna see this in action more clearly when we we apply them but yeah like this is simply the texture of our material and lastly the roughness we specifies how shiny is our material so is it when you put a light on it is it reflecting the light similar to what we see at the moment where is it very uh how's it called it diffuses the light okay a lot of Concepts but once we will upload them and apply them it's going to make a little bit more sense so let's go ahead and start loading these three textures and applying them to our material to import the texture we're gonna use texture loader from in this case it's not gonna come from the Free Library but it's going to come from Expo free because this one works as an image loader um so let's go ahead and at the top of our shoe let's get them something using they use loader using the texture loader if we send one URL here we're gonna get basically one texture but we want to load multiple at the same time so basically we're gonna send an array of um urls the first one is going to be asset Air Max textures and let's go with base color dot jpg then what we have is our normal dot this and the last one is our roughness roughness dot PNG okay so we use loader in this case will not return only one thing it will return an array of uh of textures and let's name them um in in a similar way so basically the base color the normal and their roughness the next step is a bit more complicated yeah because we need to kind of manually apply these texture textures to the material of this object so how we're gonna do this uh well whenever our object has finished loading um and we're going to detect this using a use layout effect this use layout effect as we can see in a moment is imported from react from react and it works in a similar way as a use effect hook would work the only difference between use layout effect and use effect is then use layout effect is called before our component is rendered on the screen so there are some changes for example we want to add the OBG here because every time our object changes we need to apply materials to it so every time the object changes but before things are rendered on the screen the use layout effect is going to be called and in this situation we can go ahead and uh and where where here use layout effect yes go ahead and um basically a loop through all the components of this object and we do that by calling vetiverse with reverse all the Childs and for every child of our object which can be different things what we do is first of all we need to check if this child is of type uh free dot material or three dot mesh so for all the data that the object contains we want to find them um the the specific child that is of type mesh because if it's of type mesh we can change things like child.material dot come on not add child.material Dot map for example and we can apply the base color to our map if I do that and refresh let's see doesn't work is bad because of Expo come on let's see let's see so yeah like what I I have done here is I I applied the the color material basically the base color to the material of our object and let's see if it will work no something is not right here and why uh I think it's because of this texture loader so we installed Expo free right yes let me check on iOS on the physical device if it will want to load or let's try to stop the server and start it with clear opening it on iOS come on let's go [Music] unable to resolve module X profile system from import wear import free something is off with our Expo Free Library so let's try again NP access tall Expo free and Legacy pure dependencies and still the same no way I'm gonna try one thing to import it from native it shouldn't be more at least on iOS something Expo file system let's go ahead and try to install Expo file system because it says that it's unable to find it so I'm gonna go ahead and do npx Expo install Expo file system you see that will solve it does it need pod install no because we are using an expo application and now I'm going to go ahead and start clear sorry and let's go ahead and run into Android and on my iOS as well together yes it's working so yeah what we had to do is to install the file let me let me just take a note uh to update them the documentation the guide so Expo file system was needed for this to work I'm not sure why before I didn't have to install it it was automatically there maybe yes I updated it now so yeah let's go ahead and continue we've started and what we see here is already our shoe is taking shape it has color because we applied the base color tool to it I will go ahead and probably try to rotate it more so we can see it better hmm 0.5 no minus 0.5 yes that's good and scale 12. 15. yeah so as you can see our um our object is loaded the material is applied the base color texture is applied the only thing is that at this moment everything is super shiny so that's not exactly how we want our um our material to look uh I think if I'm gonna remove the ambient light it's even going to be more shiny it's gonna be more visible like what I mean by that so what we have to do is to also apply the normal uh um the normal texture that will indicate like how what will be with the texture of our material so to do that in our use layout effect here let's go ahead and do child dot material Dot how is it called can anyone remember remind me this one is the normal map normal map and the normal map will be normal yes now as you can see like the top part is still shiny for some reason but where uh zero but on this part where we have of um how's it called like it's not well on the top part is the lever and it's expected to be shiny but on this part it's our uh canvas right of of a Nike shoes and that's why it's not shiny oh my God I'm so bad at explaining this like I have to explain how a Nike shoes is uh is made is created uh the last thing that we need to apply here is the um rough roughness map and this is going to be our rough image if I refresh to be honest this roughness mop I don't see any difference for it uh what it should do is it should indicate how shiny the object is and I don't see a lot of difference to be honest and I'm thinking that I'm not doing something right but I couldn't find what's wrong with this so if you know what's the problem with this roughness mouth maybe this is not maybe this roughness should be applied to a different map because I'm still new to 3D modeling and yeah I don't know how how the 3D models actually work I'm just figuring it out uh but yeah like this is supposed to indicate how shiny of a part of that object should look like and the thing is that now with this in place more or less our shoe is looking okay like it's not perfect uh it's still too shiny in some of the parts but I don't think it should be like that but it's it's already better the normal texture is for Applied applying shading to the object okay what does that mean it's applying shading uh shading okay that that sounds like a lot of 3D modeling for me super interesting like I really want to to have a time to go deep into this and to to to to know how everything works better but I imagine like cool so um all right so far we started with learning the basics of 3GS when we have loaded a 3D model which for me was the hardest part actually uh it is shiny all right yes it should be shiny that's how it's supposed to be so we have loaded this 3D model and the last tab that I want to do is to animate this object and not simply animate it in order to rotate because to do that we already saw how to do it on the box so we can replicate that here as well using the use frame so I can do use frame here and the only thing is that I need a reference to the mesh you can do that as well because we will need this reference to the mesh so let's do const mesh equal use ref in our shoe component and let's give it to the mesh here as ref mesh now if I have this uh I don't need the active State let's rotate it always come on we should animate it in a way if I'm going to start with let me start with a vertical position a vertical position not a vertical but to to be able to see it one that's going to no on this axis it's zero and this one it's one yeah something like this 0.7 yes perfect and what's going to happen with rotation I don't want to rotate it on the X only on the y-axis now okay that's that's better yes something like that did anyone figure out what the keyboard on the thumbnail is it's this one I don't know it's vortex poker I think I love it and my first and only mechanical keyboard uh okay so back to our code let's not get distracted um having a simple animation like this we saw it it's not very complicated we can change the rotation based on time this is a Time based animation basically it's time passes our object moves what's more interesting is the example that we saw in the beginning of this tutorial let me open it up here and this was my inspiration for this for me getting into free jazz and learning how to use it and this as you can see is an animation that is uh that is driven by the gyroscope sensor of your phone so as you move a phone in your hand the the model moves on the screen and I think this looks really really cool especially for this kind of application it looks like very realistic you can look at that model from different angles and yeah let's go ahead and see how to implement it because it's probably the easiest part of the implementation for this tutorial um so yeah without further Ado let's let's jump into this for getting access to them um to the gyrescope sensor and to animate based on that we're gonna simply use the reanimated library reanimated library that has a animated sensor hook which allows us to run animations based on different sensors of your phone so what we have to do is to install react native or animated in our application so let's go ahead and install npx xmo install react native or animated and I think we will have to pass here Legacy peer depths uh we need to apply a plugin to our babel.config so let's copy these plugins and in our folder let's go ahead and open babel.config and here under presets let's put the plugins and that's basically everything from the installation guide or before we jump into coding let's go ahead and restart the server to make sure that everything was installed correctly npm start clear and let's start it on Android at this moment uh I don't think I'm gonna be able to show it on the Android phone I'll have to use the physical device because it depends on uh like physical movement of your phone so let me run it on iOS as well QuickTime is still not working that's perfect very good very nice um so in our up.js let's import the hook use animated sensor but I was talking about use animated sensor from uh react native or animated besides this we will also need some the type of a sensor because there are different types of sensor vagaroscope the accelerometer the one that shows you the North and South and so on what we need here is the garage scope so let's go ahead and in our up.js uh we could we could potentially use that animated sensor in the shoe but I would recommend you using the animated sensor in a more Central way because we're gonna use the same data in all our components that we will need so in order not to subscribe to this data from different components okay let's go ahead and get the animated sensor using the use animated sensor and here we need to specify what sensor so sensor type Dot and here you can see the gravity the gyrus of the magnetic field the rotation so it's a lot of things let's go ahead and take the gyroscope and you can also provide some parameters to to this hook one of them is the interval and the interval will indicate how often do we want the sensor to update to to pull data from the sensor so every 100 milliseconds is fine for us and here if I'm gonna go ahead and console log animated sensor let me see if I can run it again there was a problem what's going on here animated sensor the sensor.value so yes we we see it already at this moment it's not gonna display multiple times just because this animated sensor uh is not re-rendering our application our component so that's why we see it only once because it was re-rendered only once but what we can do is we can take this animated sensor and we can send it to the shoe as animated sensor equal animated sensor now from the shoe because we receive it through props here in our use frame hook which is a function that is being called every single time our object re-renders basically every single frame not on the object re-renders every single frame so in this case if I'm gonna do that console.log props dot animated sensor.sensor dot value in this case we're gonna see it at every basically 60 times a seconds because it's running at 60 frames per second so if I start moving my phone in my hand you see the values move so it indicates that X Y and Z rotation of my phone as I have it here so what we can do is we can take these values and apply apply them to the rotation I'm not gonna uh go ahead and implement the formula here because I provided it to you uh here and actually I just simply copy pasted it from the GitHub repository over example that I showed you at the beginning uh so let's go ahead and take this formulas which are not overly complicated what it does it um takes takes the X and Y rotation from the sensor then uh what it does here it divides it by 5000 which means that it shrinks the the significance of that rotation down because otherwise a very small rotation in with your phone will uh lead to a very high rotation of the object so that's why we have to clamp it down uh and then we simply add it to the rotation of our um of our object layer so now if I'm gonna refresh the the web application if you're following along you should already see the your shoe moving here as you move uh the the phone so it looks really dope you can look at the show from different angles just by moving your phone around like this and yeah like it's it's that it's that easy and it's that powerful oh my God that was well I mean I'm saying it's easy but it took a lot of time to prepare this and uh hopefully hopefully you enjoy it because that's most of the things that I have prepared for today let me double check yes who so we can play a bit with our scale probably uh and now our shoe is animated based on them on the movement of my device and from when when I'm looking at it like it's awesome I hope you also managed to build it until this point um and you can play with it in your hands and see how you can improve it or what else you can build there as well alright guys so I'm gonna go make a make sure to upload this source code to GitHub so you can also follow along and compare it with yours make sure to follow the guide and implement this yourself and try to be curious and try to see what else is possible with 3GS this is only the beginning of uh my journey and hopefully your journey as well with 3D modeling and with 3GS in react native I have a lot of plans and maybe we're gonna do our tutorials with this one not saying that I'm gonna go all in on 3GS because uh at the core of node.js development is building functional applications and make solving real problems and I'm not sure how this cool 3D animations are actually solving real problems but I already saw very cool um use cases of applications that are using this kind of 3D animations and one of them let me actually find it because uh it's really cool and this might be something that I would be interested in uh in trying to build it as well uh where is it it should be here so this uh is basically the starlink application version free which was published uh yesterday or two days ago and as you can see they are actually using free GS to drive these animations uh and to to render all of this stuff so as we can see like there is opportunities to to use this in a real use case and to display data that otherwise you wouldn't be able to display for example the coverage map like this first animations are um like at the beginning here they're more to make replication look cool right but when you get to the coverage map here as I understand this one is actually a very good representation of the coverage map using 3GS that otherwise wouldn't be so clear so yeah like it looks really dope and as we can see from the creators it was built with react native with Expo and with 3GS awesome so if you enjoyed this video guys make sure to like the video if we get to 1000 likes we're gonna do the starlink Clone uh using free jazz and we're gonna try to replicate those animations that you just saw if you enjoyed this tutorial make sure to subscribe uh turn on the notification Bell we're going live every single Friday with new stuff with exciting new educational content every single week we're building projects so yeah I am waiting you also here next week next week we are continuing the Nike application thank you for being here with

Channel: notJust․dev

Views: 14,749

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, Nike, Sneakers, nike shoes, Nike app, react native for beginners, three.js, 3D, Animations in React native, Animations, UI/UX, CodingTutorial, 3D Models, 3D Animations

Id: 5WNoynmnEAs

Length: 104min 23sec (6263 seconds)

Published: Fri Feb 17 2023