Hi, everyone. Today, we are going to talk about how to 3dify your website using reactive fiber. So before we proceed, let me first talk about myself. So this is Alok, your friendly neighborhood, full stack developer. And I love JavaScript. I code, I blog, I write a box and give talks whenever I get a chance. So when I'm not coding, I'm mostly watching anime or jamming to music. Apart from that, I love cooking and a fun fact about me that I once tried to a mountain in slippers. Mostly people don't believe that when I say that. So I always carry a proof with me that I'm not lying. So let's move forward. And let's talk about, what are the things we are going to discuss today. So first we will see what are Three. js, React 3. 5, WebGL, and after that, we'll start coding, we'll set up everything. Then we'll create some 3d scenes. After that, we'll talk about environment and staging. Then we'll talk about models. And, at the end, we'll talk about deployment. So let's dive in. So firstly, an introduction to Three. js and React 3. 5. So before that, let's talk about what is WebGL. So WebGL is basically a JavaScript API for rendering 2D In any web browser and it allows, like it provides a low level access to the GPU, which enables us to render 3d graphics and WebGL, is the basis of libraries like ThreeJS. So three, as I said, ThreeJS is, made on top of WebGL. So it abstracts the complexities from WebGL, and it makes it easier to use those APIs. This includes graph, geometries, materials, textures, lighting, and etc. That we'll see later on. And it works in all modern web browsers. And Pages has a good documentation and support network. So let me show you some examples. So you will have a better idea of what I'm talking about. How threes can be used in live projects? What are the different things we can do? so let's first have a look at a website that NASA has created. So you can see here, we have one solar system, which we can interact with. You can zoom in and zoom out. You can also click on, like satellite and it'll take you to that satellite and like more, clear view. You can also interact with the satellite from all angles. So it is like now you have a way to interact with the solar system, which makes it, more. Easier and also more informatic and also a cooler way So also one more example that I can show you which is a very basic one that I created a portfolio of mine using React 3. 5. It's not much just a laptop, which is a waving through and It has my resume in it, which you can scroll down and read also you can interact with the laptop pretty much this much So there are a lot of ways, so you might have gotten a basic idea of what Three. js is, what we can achieve through it. You can use models like this laptop. You can add interactivity like this one. You can add animations, lighting, all other stuff. let's move forward. So what is React 3. 0 Fiber or R3F? So basically when Three. js started gaining popularity, So the React ecosystem wanted to integrate it, with the ease of, component based, you can say component based. So it, R3F combines that, React's declarative syntax with 3GS 3D capabilities. It uses JSX and React hooks to manage 3D scenes. Now it, allows us to make a reusable components of 3D objects and logic, and the best part is that it can easily integrate with existing React projects. So before we, proceed to code, let me first talk about what is Dray. So Dray is a community where people are creating help, helpers. revolving around three years, which they have hosted, and you can easily just import those helpers and use it in your project. We'll be also using some of those helpers today. Let's start and set up everything. So for that, we'll need, I'll be creating one Vite project, and then we'll integrate React 3 Fiber in that. So to save time, I have already started, set up one Vite project with React configuration. And I have installed the, packages. So if you have a look, we have three packages that I've installed. One is native three JS that we need. Another one is, react three fiber. And the last one is, that we'll be using, for help. That's pretty much the packages we need. rest of the folder structure is similar as any other react project. We have our, main JSX, then app. jsx. we'll talk about this code later on. I've also started our server and it is running in, port 5173 right now it's blank. So there is a blank screen. we'll start. the, how the talk will go is we'll talk about, topic then I'll show you some code here and, live, you can see the effects of those code. So let's move forward. So before we code, let's talk about some of the basic components of, three DC. So firstly, I've seen it, obviously. So a scene is something like a stage right where there are different objects, for example actors Lighting and everything. So a scene is something which will contain objects Then we have an object which is any object like cube or a model Or your lighting or anything then we need a camera so that we can see that stage So camera will be our point of view through which we'll be able to see the scene and the objects And at the last we need a renderer. So the use of renderer is to Combine everything and with the render it with the Viewpoint of that camera. So let's talk a bit in detail. So scene is basically, as I said, a container to contain a 3d object. And then a 3d object can be defined using, two things. Firstly, a geometry. So geometry is basically the shape of that 3d object, whether it is like a sphere or a cube. And then the material is the look and feel of that object, which is like the appearance. What is the color? What is the texture of that material? And when we combine a geometry and a material, it will create a visible 3d object, which we call mess. So let me show that with the help of an example, so we'll have a better idea. So right now here, right? So we have one scene, for example, this one, this whole, sky color area, right? So this is a scene and there is a camera placed in front of that, screen, scene. So with that, the viewpoint of that camera, we are just watching at the front of those, this scene. And then we have a geometry right now here. Which has a spare geometry and then we'll introduce our, material to it. So you can see we have a white color material, which has a smooth texture, which is reacting to a light source, which is somewhere around here. So you can see there's a light, illuminating this area and the area that is in the backside, it is like a bit darker. So this is now combining a geometry and the material right now. This ball is a object or you can say a mess. So this is the basic 3d, example of, what we can achieve using these four things. So let's move forward. Finally, we'll start coding and create our own 3d scenes. But wait, before we write anything in React 3, if I was, I would like to show you how it would have been done in native 3ds. Basically, how to, we have done it in like plain HTML file. So we'll see first how, how much code we need to create a small radius in native 3js and then we'll compare it with how much code we need to actually replicate that in React 3. So let's proceed. So firstly, we need a simple, a simple file where we'll have our body tag, there we'll add canvas, which is basically canvas is the, as the name sounds, it's like a. Empty paper where we'll draw our 3d scene and then, I have selected that canvas using document query Selector and I've stored it in a variable called canvas. Then we are adding one scene Then we have our object. So basically we are as I said object combines geometry and material So we have one three box geometry and then the material is basic mesh basic material we'll talk about this in detail in the next few slides You And then combining those, geometry and material, we are creating our mess. And then we are adding our mess to the scene. So next we need a camera. So there are different kinds of camera. So the perspective camera is similar to, like our eye, which says the objects which are in far will look smaller and the objects which are nearer to us, This will look, bigger than we are adding that camera to our scene. And at last, we have one renderer, which takes canvas as input. And then on that canvas, it render our scene with the viewpoint of camera. This is, the amount of code we need in order to create a small 3d scene. Let's see how this thing can be done in, React 3 Fiber and yeah, that's it. That's all the code you need in order to create a replicate everything that we have seen in the past three slides. So let's talk about this one by one. So canvas is a component that will be importing from React 3 Fiber. Canvas comes prebuilt with camera, renderer, and everything. You don't need to specify it again or, write it, add it to the scene. So it has seen your camera and renderer with some default settings, obviously you can customize if needed. Then, we have our geometry. So torus knot is also geometry that we'll see. And then we have our, mesh basic material. Once we wrap that around, mesh or we can, wrap it with mesh. So mace will automatically take this geometry and material and it can serve as an object. We don't need to like manually bind it, to mace. So let's see, using an example. So here in app JSX, I have already imported canvas. You can see right from React 3. 5 and I have For the sake of separation, I have, I'll write the rest of the 3d code in experience file, which is experience. jsx and I'm importing that in our jsx. Let's go to that file right now. It's empty. So as I said, we need, a mess firstly, the rest of the things are already there. So I will add one geometry, for example, Taurus not geometry, and then a material, which is right now we are going to use miss basic. And that's it. You can see here, we have our geometry, but right now we can't see it. Yeah, now you are able to see it. So we have one geometry, but it doesn't look 3d much. So let's talk about these things first. Then we'll add a few things in order to make it look more realistic and 3d. So let me take you to the documentation of 3js. So there are a lot of things like how to get started and everything. We'll talk about a few of things rest you can explore so we have cameras different kind of so This canvas component has perspective camera by default if I needed you can explore other Types of camera and use it as per your need then we have our geometries So there are different kind of geometries. So box geometry looks like something like this Then we have, capsule geometry, circle geometry, and similarly a different, lot of there. So what we have just right now use this, this one, torus knot geometry. So right now we are watching it from just one side. So it's not looks 3d enough, rather just a plain 2d figure. But we'll soon make it, more, 3d one. So let's talk about, lights. We'll see lights later on in detail. And then we have our materials. So there are a lot of materials like, simple line, basic material. Or the mostly the one that we'll be using, or you will be using later on is one is miss basic material, which is this one, a material for drawing geometries in a simple shade, flat, or where a wireframe way, then other one that you will be using is a standard material. So standard materials are those materials, which basically react with the light. So when we'll be adding light in our project, standard materials are those light, those metals, which will react to that, lighting. And, so we have one, miss normal materials, which is basically, which, material, which shows the normal vectors to RGB colors. It's like maps them. So that you'll have a, it kinds of look cool, but rather uses is for different purpose for basically, what we say, we need it for during, testing purpose or well development phase, we need, needed to, look into the vectors, basically. So we'll be using this materials, just for having a cool effect. So instead of mesh basic material, let's use a normal material. See now it's looking more 3d, right? So still right now we are not able to interact with it. And also still the camera is placed in front of it. So we're looking at the front of this object. So let's move forward and explore the rest of the things. So now we have, a small basic 3d scene where we have a canvas and we have added one object, which is not geometry and, with the material, normal material. So let's talk about XS helper. So XS helper is basically a helper. Which kind of gives you a visual reference of all the three x's we have which is x y and g in our 3d scene, so let's add it in our project and for that you can simply just add Access helper in your simply import it and just use it So there Is our access helper, you might be able to see it is behind our object. So let me just Comment it for some time See, let me increase the size of our access. And for that, it takes and a prop called arcs, which will take, the unit of how much you want to, keep the size of that access. So I'm giving it 10 right now. So you can see the size increase. So this green one is our Y axis, red one is our X axis and G is our, which is of blue blood. it is our GX, but right now you are not able to see that, because as I said, right now our camera is placed in just, vertical of this one, just at the front of it. So the, blue line that is coming as GX, it is like perpendicular to our camera. That's why it is not visible right now. So we'll see that blue line just after this slide. So the next one is orbit control. So our orbit right now, as I said, our camera is starting. For example, this one is our stage and our camera just placed at the front of it. So our camera is static right now. So orbit controls give you that, functionality that now you can move your camera from left to right or interact, zoom in or zoom out like you saw in that NASA website, right? Where we were able to like zoom in, zoom out, we can just playing with the scene. So let's add it to our project. And as I said, for to set up orbit controls, we need a lot of. But thanks to the people at Dray that they have created and bundled it and you can simply just import it from Dray and use it. So I'm adding orbit controls in our, project. So it's added. Now let's try to interact. earlier when I was trying to click on our scene or interact with it, it was not responding, but let's try now. So now you can see, I can interact with our scene. So now you are able to right now, I'm just moved my camera from front to this side. So now you can see, we have our Z axis, which is a blue color. Let's add our scene, our object back to our scene. So you can, just, see that our objects start at the origin, right? So from there we can, move it, which we'll see in the next slide. So now we have our orbit controls. for the next few slides or rest of the project, I'm just changing our, material, basically geometry, sorry, to some other stuff, the shape, which is easier to visualize and see, which is for now box geometry. Sorry. And instead of normal material, I'm using basic material here. You can see right as, the whole surface is plain or we can say, perpendicular. So it has the same color. But when, it has a, it had a curved surface, in torus nodometry. So for each of the, perpendicular lines, there were different colors. So it was, imitating RGB spectrum, but right now as all this whole surface is just a plane and all the perpendiculars on the similar line. So it is of same color. So now we have our basic material. Let's talk about properties of how we can add color to our material. So simply you need to pass color prop. And whatever the color you need, I'll go with, medium purple. So right now we have our box object, which is placed at origin. If you can see it is like at the center of our scene. So now let's move forward and talk about transformations. So for transformations, we have basically three things. One is positioning where like we can change the location of our object in our 3d scene. right now it is that you can see at the center we can move it like in any of the axis Also, we can rotate that object around it any of the axis and the last one is like scaling that object Okay. so let's see these with the help of some examples. So in order to change that, We can simply pass Position prop in our object and which takes three, parameters X, Y, Z respectively. So let me try to move it, on X axis, one unit and I'll keep the rest, as zero zero only. So now, just see that, this box moved one unit. On the x axis similarly, you can make it negative one and it will go to the other side of negative x axis Similarly, you can, add two other Axis and now you can see Our object is like at equidistant from each of the axis like one unit from z one unit from x and one unit from y Okay, similarly rotation So just instead of position, you can pass rotation and similarly, it will take the parameters for X, Y, and Z. So let me add. So if you'll see from this side, so our X axis is going that way. So I've added rotation of one. So our object was like, this one first and it rotated. On the x axis one so you can see the changes. Let me add it one by one like incrementally you add one and you will see the effect. So two, you can see it rotating rate. Similarly, I can rotate it backwards. So this is way on the way you can rotate or move your object in our 3d sequence. The last one is scaling. So as the name, as we did with rotation and position We need to pass scale prop which will take one, input Like how much you want to scale your object for let's suppose consider right now We have one unit so we can just make the size double or we can make it half of our original So that's how basically scale works. So these are the transformations Of positioning rotation and scaling next one is animations. So animations, like we all know the basic definition that, series of pictures when sewn together at like less interval of time, it looks like an animation. So that's the same thing here. We have a code which will execute on every frame render. So for example, our renderer is rendering some frames one by one after some certain, amount of time. So we have, we'll have a code that will render on each frame, which will give us an impression of animation. And for that, we'll be using a used frame hook, which will basically give access to each frame. And then we can animate any object using, by changing the properties of transformations like position, rotation, and scale. So let's, see them one by one. So as I said, first, we will need, useRAM. So this one, has two params. One is state and another one is delta. I'll talk about this one by one. next, in order to, now we have our frame. Let me talk, let's talk about state first. So state basically, contains the data. about the scene, right? So let me console log it and check it. So if you'll see here we have details about camera clock or you can mouse pointer so we have information about all the different things or objects in our Scene that we can use to modify or customize it And also you can see right now it is, this console dot log is being rendered on each frame, right? You can see it's still being rendering one by one, one way on after, in each frame it is being rendered. It will go on. so let me remove that. Okay. Bye. Or wait, let me talk about Delta. So what is Delta? Delta is basically, you can say that time difference between the last frame that was rendered and the next frame that will be rendered. So let me console look that so you can see that. So this is the amount of times, which is in a second 0 1 0 1 6. so this is the amount of time that is the difference between, let's suppose if I stop, take any two one. So this one was the frame rendered and the next one, the frame was rendered. So 0. 16 on average is the kind of like the difference between two frames, the time difference between two frames. And if we remove our console. log, so now we have a frame, a use frame hook, which will, which gives us access to each frame. But now we need to add some transformations in our object for that. We'll be using a reference. So we'll create one ref for our box, which we'll call box ref, and then we'll import user, from react. Now we'll attach that to our object. So now our reference has been attached to our object. Now, we have access to our reference and it will, it has one property called Which has, other properties, one is position, then we can just target any axis. For example, I'm taking X and what I'm going to do is that on each frame, I'm adding one unit to the X, position of our object in the X axis. So let's try that. So you can see that right now, our object just went in the x axis one unit. So let me just turn it this side. So you'll have a better idea. Let me refresh it and start our screen again. So it was too fast to see because one unit is too much for it. So let me reduce it to zero one, zero one. Let me refresh our scene. So now you can see that our object is moving. 0. 01 unit on each frame, right? Similarly, So there is a thing like a unit about unit side. So there are different configurations for example 30 fps or 60 fps So if we are going with, units, then we'll have a diff, different experience in, these, system. For example, let's suppose we have a 30 FPS scheme, a screen, and I'm adding one unit to our, Object on each frame, right? So after, we can say 30 frames per second. So after one second, our object will be 30 units ahead of its original position. And in 60 FPS screen, what will happen is that after the end of one second, now, as we are adding one unit and it has 60 frames per second, so it will be 60 units ahead of its original position. So these, the same animation will look different on, different configurations to, in order to make a similar, give a similar experience in all the devices. We use Delta. as I said, Delta is the time difference between two frames, right? But if you're taking, if you're going to use Delta, then even after one second, this object here will, the animation will not be that smooth in 30 FPS as like time differences greater in 30 FPS between frames, than the time difference in 60 FPS. Between the frame so the animation in 60 fps will look a bit smooth as the time duration is less So the object will go like tick but in 30 fps the animation will be not that smooth because the time difference is greater. So the object will move tick But at the end of the day means at the end of one second, the both objects will be at the same position. So now, even after, we have a different configuration, but the animation will look, the same, in different devices. For that reason, only instead of going with plain units, we'll be using Delta for our animations. So let me do it. So now you can see our object is going similarly. Similarly, you can target any other axis. Why let me rephrase my scene, right? similarly, instead of position, you can go with rotation. Okay. Or along x axis, right? And similarly, you can also target scaling. So let me. Okay. Since it's like scaling the object along the X axis and adding, Delta on each frame render. So now we have the monkey king stuff with us. So let's move, that's about animations, like how you can, use, use framework. To get access to each frame then using a reference we attach to our mesh which is basically our object and then we modified our Properties like rotation or position scaling in order to create an emission effect So let's talk about environment and staging. So till now we are only kind of playing with our object not with the Environment surrounding it So instead of object, now let's play with our environment. So first, lighting. So lighting is to give more realism and depth to our 3D scenes. Till now, we don't have any light in our, scene. We can say in our 3d scene, but still we are able to see the object because as I said Mace basic material don't need lighting rather my standard material needs lighting. So we'll see that There are different types of light Ambient directional point and spotlight which we'll discuss in the next slide. Mostly we'll be using today ambient and directional light rest, you can use and explore later. So there are different properties of lights that we can tweak with color intensity position, and then when we add light to our, all 3d scene, it now gives us access to add shadows to it. As when there will be lights, there will be shadows. So we'll talk about shadows separately later on. So let's talk about different types of light. Firstly, we have one ambient light. So ambient light is like a general enumeration that affects all objects equally irrespective. Then we have a directional light which is like a sunlight or a distant light. So directional light is as the name suggests it is somewhere As like sun and it is directing its light to our object Then we have point light, which is I said, similar to directional light, but a bit different. So it is it emits light in all directions from a single point. And then we have a spotlight. So spotlight is similar to flashlight. So imagine, keeping a flashlight in front of a wall. You will see a round, light, And apart from those and those around circle, the rest area will be on dark. So similar kind of effect you will get using spotlight. So let's see a few examples. So as I said, in order to, let me remove our. Okay. Now let me also remove our scale and rotation. So now we have our initial scene where we are, with our access helper and our basic box object. So instead of basic material, let's switch to standard material, which reacts to light. which needs basically light. so I just, converted our object from a MACE basic material to MACE standard material. Now you can see our object is there, but even I have assigned a color of medium purple, it's in black color because it's not black, it's actually dark. So as it is dark, we are not able to see the color of our object. Let's add lighting to our project. And for that, as I said, we can use ambient light. So now as I added light to our, environment 3d scene, you can see as the definition was embedded light, illuminates our, the whole scene, irrespective from all sides. So you can see, now we can see all the sides of our, object is illuminated. Let's see then directional light also, you can play with intensity. So if I add intensity on suppose four, you can see the intensity of the light is increased. So instead of ambient light, let's use directional light. So now you can see, as I said, the directional light is right at the top, like a sun. So the top surface of our box object, it is now illuminated, but rest of the sites, it is like still in dark. that's why it's like black color. So let's move our object, light, position off. So now, let's, I'm, keeping my light like equidistant at the positive side of our origin, which is, one unit. So let's imagine our light is around here. Right now. So that's why the light is coming from this side and you can see these three faces They are like being illuminated because our light is somewhere around At front right now. So these three faces are illuminated But the other three sides, which are away from the light, they are still in dark. So this is like how directional light works. So let's move forward and talk about shadows. So shadows as lighting, add more realism shadows, add more depth and realism to our 3d scenes by simulating, like how the light interact with objects right now. So we have a object and we have a light, but we don't have any shadows or other things right now. So it also helps viewers to understand the position and scale of objects related to other object and environment. And also one thing to keep in mind that adding shadows is like, more will take away some performance. So adding too much of shadows here and there, like in every object will make your website, a bit slower or laggy. So we'll have to keep in mind when adding shadows, which are the objects that actually need shadow in our whole 3d scene, or which are the things we can ignore. Okay. So let's add some shadow, in our project. So for that, firstly, you will need to enable your canvas to have the functionality of shadow and which is simply by just giving a prop of shadows. And now our canvas supports, shadows and next, so I'll be right now. We have one object. We don't have anything in order to capture that shadow. Okay. Oh, so we need something like a ground, below our objects. So whenever we'll have a sunlight, so when there is object, it will cast its shadow that ground. So let me add a plane just below our, let me add it first and I'll explain, which is not much actually. We are just using it in a different way. So right now we have a ground like thing. Let me refresh it and just okay So it is a like instead of box geometry. It is a plane geometry Then we have mesh standard material which supports lighting which is of green yellow color Okay and then I have rotated it along x axis, perpendicularly or Yeah Like it was firstly like this, and then I went, rotated it for like this. And then I have scaled our, plane and I have just moved it at the minus Y axis down a bit so that it is below our object. Okay. So now we have our plane. Okay. And our setup is ready to, add some shadows. So it is simply, all you need to do is that. Don't, Tag, which of the objects will cast a shadow and which has the object, which will receive us. So firstly, our light will cast a shadow, right? Then this box will cast a shadow and lastly, our plane that is the ground that will receive that shadow. So that's all you need. Let's see. You can see here, right? We have our light here somewhere one, one, one. So it is, like throwing a light in our object. And then that object is casting a shadow on the ground. But, what if instead of a static? Box, we have a a revolving or a moving object. So will that shadow will, react to that moving object? Or will it be static? so let's see that Let me add rotation so you can see right so on each frame render that Shadow is again being rendered so that is the that is the reason because of which it's eats away performance from your website So there are different ways, right now you can see the edges, right? Of the shadow. It's a bit, blurry. So there are different ways through which you can make your shadow sharper and, or more blurry in order to save performance. So you will, when you will be using shadows, so you will have to take care of these things. So that your website don't result into a laggy one. Okay. So next talk and let's talk about background. So till now we have our object, but the background is still dark. Or we can say there is nothing there. So we can add background to it. So first one is like normal, any color that you need to add. So end of the day, canvas is also one, HTML tag. So you can simply add any background color to it. Let's suppose I'm adding sky blue so you can see now we have our background color or you can add gradients or images or environment maps. So let me add one picture that I clicked on my last trip as an environment to our 3d scene and let's see how that turns out. Let me first remove this, background color. And let me, and to add environment you simply need to, as I said, some very good, helpful people in Trey have already created that for us. So you need that, you need to import that environment component from Trey. You need to label it as a background And then it will take a file which you will be adding it as a background. So I have placed one file here in public, pic. jpg Which is basically a mountain picture that we'll be using as our background So let me put that Okay So let me remove these things If we don't need any more, sorry. Okay, let me remove our box too and also our access helper. Let me refresh it. Okay. Somehow I messed up something. Okay. Yeah. So let's keep it this way and let's remove this access at least. So now we have our box. And our background. So you can see right now, It a 360 view of that image. but that picture was not made in order to support 360. So you can see that edges are just trying to take a paper and fold it and make it like a cube. That's why like the edges are like this way, but that's what you got the idea of how to use environment maps. You can easily download different environment maps from internet. Basically under licenses are free. So yeah, that's how we add environment to our 3d scene. Now let's talk about models. So basically the 3d scenes that you will use in live projects, which will not be only like you sand planes or any sphere or torus symmetry, right? You need models, for example, images, or like we saw in the NASA one, there was a satellite. So that is a model that we'll be using instead of just simple cubes. So models can be created using different ways. one simple way is using a blender, software, which using which we can create, models for our 3d scenes, and then we can import it and use it. So there are different, formats of, Models that are supported in 3js. the most popular one is GLTF or GLB. And then we have an OBJ or FBX. So as I said, models can represent anything from like characters to vehicles or entire environments. Let's add a model in our scene to have a more better understanding and for that Okay, we need to use a primitive component. Okay, so let me first remove the animation And let's firstly import our model first. So I have already downloaded one model Which is along with the license and everything. So we have our scene dot gl tf here with us Which will be importing and the rest of these are the like the supporting files of that, model. So for that we'll be using, use GLTFO. So let's suppose our model is here, which is again, importing from tray. And it will take the path to our model. So which is basically slash word. Last scene. Dot. So now we have our model imported. Now let's add that to our scene. And for that, as I said, we need a primitive component. Okay, which will take object which is our model dot scene Okay, so now I have added that but it is not visible right now. Okay, so let's see probably Yeah, so we have our model right now, but it is like too bigger to like Accommodate in our scene. So let's scale it down So as we already know about the properties that you can use So scale is one of them using which we can modify this. Uh size of our, model or any object. So I've tried with it with different, numbers, like when you will be starting to create or develop these scenes, we'll have to play around, use hit and trial method. To get the correct, size or another one is like you need to make your models in order to incorporate in your website, so you'll have to Make it of that size that you need instead of then you won't have to modify it here So i've tried with different units and one that I could find is like 0. 03 Okay, so now let's remove this box Okay. So now we have A scene where we have an environment, a model, right? Now, can we do everything that we did with box with this model? And that is absolutely yes So as we added a reference we can add here Let's name it as box ref Okay And similarly we can access it like rest of the thing Okay, so now you can see You We have this word, which is like how we used, animation in objects. Similarly, same thing we can do with this one too. Also, we can go with position and now you can see our bird is flying in the sky. So this is the way we can create a small 3d scene where like it's more interactive way. Instead of just plain, simple cubes and other objects. So let's talk about deployment. So I wanted to show you that, now this don't look like a simple HTML static site, right? So we have, we know the normal ways to deploy any site using Netlify or WordCell or other stuff. So can, so is it like a different process to deploy these kinds of websites, which are like. You can have 3d assets and interactive and, such stuff. And that is totally no, you can, as simply you created or deployed other as plain HTML, static website, you will can do this one also. So just, you need to create the build and you can deploy it as similar as like Universal or Netlify or GitHub pages. So as we all know, in a bit, we can create the build. using, NPM run build, and I have already done that. So it will create one test folder where you will have all the assets and like index. html and every code like compiled and ready to be served. And then you can deploy this folder anywhere like internet. So I've already done that in Netlify. you can probably. Take it if it's still live. Okay. Let's wait it for load. And yeah So this is the same thing that we just created in our local, right? So I just created a a dist folder and created a build and just deployed it in netlify And now you can just access it in your website. Yes, it's it threejs hyphen Dash talk dash demo dot netlify dot app. You can open it your system right now and can check it You And say it, and this is just a 3js. There are a lot of things to, you can explore on yourself. And there are a lot of creative ways you can use it. Maybe let's suppose you have an existing react project of airlines, right? You can add a small aeroplane, 3D aeroplane that is like flying around your website. Or in buttons or let's suppose you have one, hotel website. So you can add a small window, a small canvas and place it at your website at the top corner, small window from where a 3d safe model is coming on the window and waving. Sometimes it's coming with a different days or just saying hi. So there are a lot of creative ways you can think of. You can use 3js in your website. Either a new one or existing one. so that's it from my side. thanks. Thank you again for being a wonderful audience. And I hope you have learned something from this talk. you can reach out to me on the cool learning, which is my Twitter handle. I'll be always, love to interact with you and just talk. So thanks again. Bye bye.