Build and Deploy an AI-Powered 3D Website Using React | 2023 Three JS Course Tutorial for Beginners

AI has been taking up all our attention lately but we shouldn't forget about the metaverse vision that meta presented a year ago a vision of transporting humans into a 3D space today I prepared something special for you not only will we dive into the metaverse but we'll also fuse it with the power of artificial intelligence consider this jewelry website that allows you to customize and create the ring you want by customizing your own 3D diamond color as well as the ring color and the entire look and feel of the Ring likewise car visualizer allows you to look at different incredible detailed car models and change their color as well finally the showroom application allows you to customize your own living room in 3D you can move around to get a feel for the space and then click on elements to customize their color and material for example for this table we can choose from two different types of wood as well as granite and metal we can also customize other elements such as this great lamp on top and as you can see you can see the changes and Reflections in real time these web applications are incredibly impressive and have practical applications for product showcase several large companies have already Incorporated impressive 3D features into their products such as GitHub where we can see these commits move around the globe in real time versus hell with their version of the globe where you can move it around and see where the websites are deployed and Amazon with their 3D product view that's precisely what we'll do in this video you'll learn to create your own 3D product based website in react using 3js by the end of this video you will have built and deployed a product-based t-shirt website that is so impressive it is guaranteed to give you a job and you might be shocked at how easy it really is once you understand a few concepts related to cameras lighting and geometry this tutorial is beginner friendly and I'll assume you're completely new to 3js inspired by Anderson manchini's idea we have expanded this project with additional features complementing his exceptional work as one of the best creators in 3js recently Anderson launched a new course centered on this very topic where he will teach everything from creating these models to building the application so if you want to learn blender and create impressive 3D models we encourage you to check it out the link is in the description while the concepts and basic functionality might be the same we enhanced the project by allowing users to choose different colors upload any file they desire and even leverage AI to generate unique image logo for their model so please allow me to give you a quick demo of this fantastic application you will build today in the next two hours by following this course first you'll create a home page where you will tell your users what the site is all about then upon clicking the customize button your shirt will move and animate to the center of the screen you'll be able to change its color as well as upload your own logo or Texture or even better write a customized prompt to ask AI to generate the logo or the texture for you once you have both the logo and the texture you can toggle them on or off and once you're happy with the shirt you can even download it isn't that crazy overall in this video you'll learn 3js a powerful 3D Graphics library for rendering and animating 3D models react 3 fiber a popular library for creating 3D graphics with 3js in react Tailwind CSS a popular utility first CSS styling framework framer motion the most popular Library used to bring your react websites to life with animations you'll also learn how to load create and customize stunning 3D models and geometries with various lights as well as understand the 3D World with the camera and positioning of an object in the space you'll learn how to add custom color and file support generate and use images through Dali AI download the resulting t-shirt model image ensure responsiveness across all devices and improve your site's performance and you'll learn how to write clean code and maintain a proper code architecture we're going to start simple and then move to more complex Concepts I'll explain every step of the way if this video reaches 20 000 likes I'm recording the next 3js video alongside this video I've also prepared a comprehensive 3js cheat sheet that you can use for reference in all of your future 3js projects the link to download the resource entirely for free is in the description now let's begin foreign [Music] start building out our project let's first get the hosting and the domain name for our new website your portfolio or any site you'll create in the future hostinger is my personal recommendation and right now they're offering a crazy deal so I simply needed to show this to you the link to the website you're seeing right now on the screen with an extra discount in it is in the description let's visit it and click the claim deal button to see if it's really as good as it sounds we are getting premium web hosting for about three bucks a month you can host 100 websites you also receive 100 gigabytes of SSD storage unlimited free SSL certificate which means that you get https security and most importantly you get a free email but on top of that you get a free domain name hostinger has a great price to Quality ratio high speed servers 24 7 chat support and most importantly developers love using it as you can see by these exceptional ratings on third-party platforms we're going to create an entire 3D product website so we want to have a custom domain name to be credible for every industry standard application such as the One You're Building in this video we need it to be fast reliable and trustworthy and all the features you're getting with this plan such as a custom domain name email and speed makes all the difference since I've partnered with hostinger they decided to give you an even bigger discount you can find the link and a unique discount code in the description once you visit the link in the description click claim deal and then add to cart here we can choose the period of our hosting in this case I'm going to choose 48 months since that's going to allow me to save the most money and get free three months after that you can scroll down and select your payment method but more importantly you can add a special JavaScript Mastery coupon code that's going to allow you to get an even bigger discount after you complete the purchase you'll be redirected to the hostinger's dashboard I'll see you there as you can see I'm personally using hostinger for all of my company's websites if you purchased premium hosting then you should be able to see this yellow setup button here and then also the claim domain button to get your free domain let's go ahead and immediately set up our premium web hosting so that after that we can focus only on development you can click Start now skip we're going to create our own website claim a free domain you can do this at the end of the video too in case you want to spend some time thinking about the proper domain name in this case I'm gonna do three JS products that domain is available and it's quite a good one so let's go ahead and continue and our domain is being registered there we go it's done click control panel and there we go everything is set up now what's left to do is to build this phenomenal 3js AI powered application and then we're going to deploy to the internet at the end of this video using the file manager let's get started as we always do on the JavaScript Mastery YouTube channel we're gonna start from Bayer Beginnings by creating a new empty folder on our desktop called 3js once you have it you can drag and drop it to your Mt Visual Studio code window Visual Studio code is the most popular editor for a reason then it has a lot of great extensions Source control but it also has a terminal that you can visit if you go to view and then terminal it's integrated right here within our editor and we can use it to spin up our react application using a tool called Veet the only thing you need to create your react application is run the command npm create Veet add latest dash dash space dash dash template react and then say client this is going to create a new react application inside of the client folder as it did in just a couple of seconds before we go ahead and explore the file and folder structure let's first install the packages that we need for our front end of course we're going to install them inside of the client repository so first we need to CD into client again make sure that it says 3js client here great so the packages that we're going to need are going to be npm install first we need three which is the 3D 3js library then we're going to need add react Dash three four slash fiber and this is a react renderer for the 3js library we also need add react-3 forward slash Dre and this contains useful add-ons for react 3 fiber then we're gonna need maath or math and this is going to be used for useful math helpers and mostly math that's meant to be used with 3js then we're going to use a package called voltio and it is a new package that allows us to really easily manage react State no worries it requires absolutely no learning process you're just gonna immediately get to know how to use it we also need a react Dash color package which is a Color Picker and finally framer Dash motion which we're going to use for some cool animations let's press enter to install these packages this process is going to take just about a minute so feel free to pause this video and I'll see you right back there we go once the packages have been installed we can also set up Tailwind Tailwind is a utility first CSS framework packed with utility classes it's going to allow us to write classes in a quicker and a more efficient way so let's try to search for Veet to see if they have a starter guide there we go install Tailwind CSS with Veet we have already set up the project now we have to install Tailwind CSS which we can do by running the First Command npm install Dash D Tailwind CSS post CSS and Auto prefixer after that command we can also initialize Tailwind by running the MPX Tailwind CSS init-p as you can see this is going to create a couple of files right here such as both CSS config and detailing config next we need to copy the template paths so copy this go to tailwind.config.js and paste it right here finally we also need to add our Tailwind CSS directives to our CSS which we can do by going to source and then index.css and then adding them right here at the top great Tailwind should now be properly set up now let's discuss the file and folder structure of our new client application first we have the public folder that currently contains only Avid SVG soon enough we're going to add our awesome shirt 3D model here inside of the source we have some assets which we don't need the app CSS the appgs main and so on for now we can get started by running the application and seeing how it looks like in the browser we can do that by opening the terminal and running the mpm Run Dev command in a couple of seconds it's going to spin up a version locally you can hold Ctrl and then click this link and there we go the application is now running now we're going to do some modifications to our structure just so we can focus on what matters most and that is learning3js and creating a great application so for that reason down in the description I've already prepared a couple of files and folders for you don't worry they're not going to contain any logic you're going to focus on all of the most important Logic on your own today while watching this video but these are just going to be some assets and styles that are going to speed up the boring parts of this video so we can focus on what really matters and that is mastering 3js so with that said down in the description you'll be able to find a zipped public folder which you can download and add zip you can then delete this public folder right here and drag and drop the updated public folder right into the client it should contain the react PNG 3js logo as well as this special shirt baked file there's going to be one more zipped file which is the assets folder so again you can delete the current assets folder and then drag and drop the updated one there we go it's going to contain some AI icons download icon and so on we won't be needing this app.css so you can delete that but we will need our styling so down in the description this time inside of a GitHub gist you'll be able to find a complete index.css file which you can simply paste over here it contains about 90 lines of code but again it's just CSS and mostly just some Styles which we'll be reusing across the application all of the files that matter you're gonna write by hand using Tailwind on your own so once again no worries there and finally there is just one more folder that we need to bring in here and that's going to be the config folder so simply feel free to copy it unzip it and then paste it right here within the source folder keep in mind public folder is within the client folder and then the assets and the config are within the source so if we expand the config folder you can see that in here we have the config.js containing the place where we can put the links for our backend we have some constants which we're going to use simply to Loop over and to show different tabs we have some helper functions and don't worry this isn't any really complicated logic this was actually created by Chad GPT while creating this application so I'm going to show you how we can get that as well and finally we have some motion frame motion utility functions which will be able to use right within our application with that said we now have everything we need to start development of our great application inside of the main we're creating the app and then inside of the app we currently have the boilerplate that was created for us by Veet but for now we can remove most of that stuff and simply keep the app that's going to return something like a div within which we're going to have an H1 it's going to have a class name equal to head Dash text if we save this go to view and then terminal it was already running from before so if you open up your react application you should be able to see a huge react text right here and that's because we applied this headtext property by Tailwind so that means that it is working as well with that said we have our app we have our main and we are ready to start developing our great application hopefully you are excited you managed to go through this setup part so from now on it's going to be much more interesting and we're gonna dive into 3js in no time now to be able to see the changes that we make live in the browser let's put our editor in the browser side by side there we go now we can actually see what we're doing let's change this to 3 JS as that's what we're focusing on today now we can immediately start by creating the file and folder structure of our great 3js application we have already created the assets folder and the config folder but we're gonna also have the components folder and the pages folder inside of the pages we're going to create two different pages the first one is going to be the home.jsx this is going to be our main page inside of there you can run rafce this is going to create a new react Arrow function component and if what I've just done seemed like magic to you you most likely don't have the es7 plus react react native Snippets extension installed so simply search for it and install that extension and try to run that command again great so now we have the home page as well let's repeat the process for creating the second page which is going to be the customizer.jsx page and we can repeat the process there as well these are the only two pages we'll have the entirety of the app's functionalities is going to be contained within those two pages there is something else we're going to have as well and that's going to be the canvas folder inside of the canvas folder we're going to have a couple of files and folders first we're going to have the canvas itself which is going to be under index.jsx so there we can also run rafce and that's going to create a new function we can rename it to canvas in canvas here as well great so now we have these three pages which we can import inside of app.jsx so inside of there let's import the canvas coming from dot slash canvas and let's also import the customizer coming from dot slash Pages forward slash customizer and let's also import the home coming from that slash Pages forward slash home great and now we can utilize them within our application so that's going to be instead of div we can use the HTML5 semantic main tag and we can give it a class name equal to app and transition Dash all and ease Dash in this is going to be useful later on once we Implement transitions within there we can render the home page we can also render the canvas and finally we can render the customizer now if we save that you can see our three grade Pages well in this case they're all on the same page but you're gonna see how we're gonna make them all come together really soon so of course let's get started with the home page we can do that by closing the app and going within the pages home.jsx inside of here we're going to import a couple of things let's first import something known as a motion coming from framer Dash motion we're going to use this to apply some animations later on from there we're gonna also need something called animate presence this is a component that enables the animation of components that have been removed from the tree next we can import something known as a use Snapshot from this great new react State Library called walshio yep it's pronounced volcio but voltio is fine as well you're gonna see really soon how easy it is to use it so no worries there at all and finally to make our framer motion animations work we can import a couple of things coming from dot dot slash config forward slash motion and the things that we need are gonna be head container animation also head content animation also head text animation and finally slide animation we're getting all of these up front so it's easier to utilize them within the code later on but if you're wondering how the code for these looks like you can see it's just gonna slide in specific pieces of content by a specific number of pixels now before we actually start creating the jsx for our homepage let me quickly explain how vulture works because it's so simple to use for it to work we need to create a new folder right here in a source folder called store and then inside of there you can create a new index.js file there you can import something known as a proxy coming from volsio and then we simply need to initialize the state by saying con state is equal to proxy we call it as a function and then provide in the initial object and then you have to export default dot state so you can think of this as react context whatever you define in here you'll be able to utilize within your entire application it is that simple so what are we going to have there well we're going to have one flag called intro meaning are we currently on the home page or are we not we're gonna have our default cooler which we can use later on that's going to be efbd4e but of course you can use any other color as well we're going to have something known as is logo texture which we're going to use later on meaning are we currently displaying the logo on our shirt we're going to have also is full texture which is going to be set to false at the start and then just for the initial load of the shirt before we upload any of our own logos or textures we need to have the initial logo decal that's going to go on the shirt and that's going to be the path going to that slash 3js.bng and also we need to have the initial full texture shirt decal which is going to be that slash 3js.png same thing so far you can just think of these as some empty default values and what is this 3js well it's nothing more than a simple 3js logo so now we have set up our state and now we can go back to home and we can simply import it the only thing you have to do is say import state from data slash store and we can immediately use it within our application and how we use it we use it by saying con snap meaning it's one current snapshot of that state and we say use Snapshot and we pass in that default state that is it so we didn't have to set up any react context or anything else we simply immediately specify the default values and we can use them within our application while we go through the application it's going to start making even more sense so no worries there great now we can start with creating the jsx of our application we can first wrap everything with something known as an animate presence this is a component by framer motion that's going to allow us to enable the animation of components that have been removed from the tree inside of there we want to see if we are currently on the intro page meaning on the home page so we can say if we are on the snap.intro in that case we can render the home page data and that's mostly going to be the motion.div meaning it's going to be a regular div but it's going to have some animations attached to it and it's going to have a class name equal to home and for the animations we can provide a new object and we can spread dot dot slide animation and we can say it's going to slide from the left so it's going to look something like this there we go and this should have been a motion section if we're going to be more precise that's a new HTML5 semantic tag so we can put this just a bit more to the side so everything fits in one line there we go now within there we're going to have emotion header this is the first time while we're actually going to see something appear on the screen so that's going to be a motion header and within there we can have an image that image is going to have a source equal to dot slash 3js.png it's also going to have an ALT tag equal to logo and it's going to have a class name equal to w-8 h-8 and object Dash contain if we save that and reload the page we cannot see anything on the screen yet so what we can do is go to inspect and go to console and we can see that Source config motion.js does not provide an export name head T content so it looks like I have a typo right here it's supposed to be just head content animation so if we reload we are good and we can see this great 3js logo appear on top wonderful this motion header is also going to have a slide in animation so we can dot slide animation and we can say this one is going to slide down so now if we reload you can see how it slides from left but also from Top there we go this is looking great now below that motion header we're going to have a motion dot div and this div is going to have a class name equal to home Dash content and we're gonna also spread all the head container animation inside of there we're going to have another motion.div and we're going to spread the head text animation finally inside of there we can display our H1 that's going to have a class name equal to head Dash text and it's going to have a text of something like let's all uppercased then we can add a br or a Break Tag that's going to just be visible on larger devices so we can give it a class name equal to XL is block usually it's hidden and we can say do it let's do it and there we go you can see how nicely it slides right in below that we can create another motion div and this motion div is going to contain a P tag and in there I'm going to Simply paste the text I already have and you can also type it out so we're going to say something like create your unique and exclusive shirt with our brand new 3D customization tool we can then add a strong tag and say Unleash Your Imagination space and Define your own style there we go this is looking good and let's also style it a bit by giving it a class name saying Max Dash wmd this is going to make it take it a bit less horizontal space font is going to be normal and text is going to be gray 600 that's the color and it's going to be text Dash base and now to make this animate as well we can spread the head content animation and also give it a class name equal to flex Flex call and gap-5 to the div wrapping RP tag now if we reload the page you can see the text appears there as well great and the last thing we need is a button to lead us from the home page to our customization page so to implement that we can create a new custom button self-closing component if we save it it's gonna break of course because we haven't yet created it so let's go to our File Explorer let's go to the client side and source and inside of the components let's create a new custom button.jsx inside of there you can run refce and we can also create a new file within the components folder called index.js there we can import the custom button from that slash custom button and we can also export it right here within an object so what this allows us to do is now go back into the home page and we can simply import custom button from dot slash components and there we go our custom button is here now to that button we're going to want to pass some props so we can utilize them within the button so the props we can pass are going to be a type we want this button to be a filled filled in button we want to give it a title something like customize and we can give it a handle click so what should we do once we click it and that's going to be a callback function that's going to update our state so this is the first time that I'm showing you how to update the voltrio state well you simply do it state that intro is equal to false this no longer breaks react rules you can just do it manually and it's going to work and finally we can pass some custom styles to this button so that's going to be a w Dash fit padding X of 4 meaning padding horizontal padding y of 2.5 fan Dash bold and text Dash small now if you're wondering what any of these class names or styles do simply visit tailwindcss.com click this magnifying glass and type it in and let's search for something like w Dash fit and if we go to sizing here you can see that that's going to update the width and there are also a lot of options you can do it by fractions you can do fit you can do full so whatever you're wondering about regarding Tailwind you can simply search it right here be that padding spacing whatever you want it's going to be right here Tailwind is pretty simple to use essentially the only thing it does is it takes regular CSS properties and then it shows you how to do them with class names great with that said we can now control click into the custom button and implement it to develop our custom button we can start straight with the jsx by turning this div into you can guess it a button let's apply some class names such as let's give it a px of 2 meaning padding X and within there let's simply render the title that we have passed through the props and there we have customize it which is our title now let's also get all the other props such as the type the title the custom Styles and the handle click as well now we can continue styling it by giving it a class name we can give it a padding y of 1.2 a flex of one and then a rounded Dash MD Now this still doesn't look like a button and that's because we haven't applied the custom Styles right here there we go and even when we do we're missing a color we need to have our app theme color which is going to be changeable so what we can do is we can create a new style property and there we can call a generate style to which we pass a type we're going to have two types of buttons in our application so let's create a function called cons generate style which is going to accept a type then we want to see if the type is triple equal to filled in that case we want to do something and yes our button is filled so we can return an object that's going to contain a background color for now can be set to black as you can see and then we need the color of the text which is going to be set to White now we want to make this Dynamic if you remember correctly within r valcio state right here in the store we have a caller and this is the default color so let's retrieve that color right here at the top by importing the state coming from that slash store so we can now utilize that store right here at the top by saying const snap is equal to use Snapshot and pass in the state and then we can change the background color to be equal to snap dot color and if we save that everything of course breaks and that's because we haven't imported use Snapshot so we can import use Snapshot coming from valsio and there we go we have a nice yellow color that's looking great for now this is going to be everything we need to do to this button just one more part is to pass it on click which is going to be equal to the handle click function so now once we actually click it we will no longer be on the home page because the snap that intro is going to be set to false as you can see right there so let's click it there we go that means that we want to focus on the customizer we just moved from the home page to the customizer page so let's go to the file explorer let's go to client Source pages and then customizer this is going to be the main part of our application inside of here we're going to have a lot of imports we want to import react but we also want to import the use State and use effect hux after that we want to import something known as animate presence which we have used so far animate presence as well as motion coming from frame or motion and we want to get our use Snapshot coming from ballshio we also want to import something known as a config coming from da.config forward slash config we're going to use this later on to set up the URL of our backend we also want to import that state we have created coming from data slash store we want to import an icon called download coming from assets and we want to import some helper functions such as download canvas to image as well as reader coming from dot slash config forward slash helpers and finally we need to import a couple of things from our constants such as editor tabs filter tabs and decal types and this is coming from config forward slash constants and you can control click any of these things to see what it is these are just some default values such as Color Picker file picker AI picker and so on which we can use later on within our application we can also import some predefined motions such as fade animation and slide animation and this is going to be coming from config forward slash motion great now inside of this page we'll be using a lot of components so what do you say that we take some time now and create the empty files for all of these components let's do them one by one first we're going to create the AI picker .jsx and we can run refce inside of there this is where we're going to pick the AI image then we're going to have a Color Picker .jsx inside of here we'll be able to pick the color of a shirt we already have the custom button so the next one is going to be the file picker.jsx and we can run ref CE inside of there inside of here we can simply upload the image and finally we need to add a tab.jsx and we can run ref CE we're going to use this to switch between different tabs such as Color Picker AI picker and file picker and now that we have all of these components we can simply export all of them from the index so we can first import them so let's duplicate this a couple of times AI bigger Color Picker file picker and then tab and finally want to export all of them to so we can put them in new lines like this and let's export them one by one we have the AI picker Color Picker file picker and tab and if you're wondering how do I get all of these recommendations they're coming from an extension called GitHub copilot so it's really helpful and I've been using it a lot recently great now we can go back to our customizer and we can import all of these components so we can say import AI picker Color Picker custom button file picker and then a tab coming from components I know we have a lot of imports but now we can focus on what really matters and that is creating our customizer first of all the jsx but then also the logic for this great page we're going to first wrap everything in the animate presence so we can allow for animations and inside of there we want to check are we in the home page or are we on the customizer and for that we'll have to get access to our state so we can say cons snap is equal to use Snapshot State see how simple it is and there we can say if not snap dot intro or the home page then we want to show the rest of the code with just a regular parenthesis so we can put everything inside of there first of all we can start with an empty react fragment and we can say something like customizer now if we save this and reload the page you can see that we have an error so if we go to inspect and then to console you can see that Source config helpers.js does not provide download canvas to image it's possible we mistyped it so let's see down there we go there is a typo so as soon as we fix the typo and reload there we go we're in the home page we click customize and we are on the customizer that's great so let's delete this and let's actually start developing it this right here is how the finished version looks like and first we're going to focus on the left side right here these tabs that you can switch from and then make some adjustments to the shirt okay so let's do that right away by creating a new motion dot div that's going to have a key equal to custom it's going to have a class name equal to Absolute top Dash 0 left 0 2 and then z-10 so we're going to position it absolutely on the screen and we can also make it slide from the left by doing dot dot dot slide animation from the left and of course we have to put something into it so what are we going to put in there well that's going to be a div so div that div is going to have a class name equal to flex items Center Min Dash H dash screen so that's taking off the full height of the screen and then we want to create a div that's going to have a class name of a class that we predefined which is the editor tabs Dash container and then tabs and now if we save this you can see just barely right here a div instead of which the tabs will go so now we can go through the editor tabs which if you scroll up is going to be the constant for those three tabs and we can say the map we want to get each individual Tab and we want to return a self-closing tab component to which we need to pass a key equal to tab.name a tab equal to Tab and a handle click which is going to go to a callback function and for now we can make it empty and there we go you can see these three tabs so for now I simply wanted to create this to give you an idea of where this is going to go on the screen we're going to continue working on this later on but now I want to make sure to do the rest of the layout really quickly so we can sooner rather than later jump onto the main part of the application which is creating this wonderful 3D model in the center of a screen so let's go below this motion.div and let's create another motion.div this one is going to be for the back button so see on the top right we want to have this back button so that motion div is going to have a class name equal to Absolute z-10 top Dash 5 and write-5 meaning we want to position it on the top right of the screen and we want to give it a fade animation inside of there now it's pretty simple the only thing we have to do is utilize the already created custom button component the type is going to be filled the title is going to be go back the handle click is going to be a callback function that's going to call the state.intro and it's going to set it back to true meaning we want to go to the home page and we're going to set the custom styles to be equal to W Dash fit padding X of 4 padding y of 2.5 font bold and text Dash SM and there we go on top right we can go back to the home page and we can go back to the customizer this is already more functional now below the shirt on the bottom we're going to have some toggles some filters so first we can turn on and off the logo then we can turn off and on the actual decal on the shirt and then we can download the shirt so let's quickly create those three buttons as well we can go below this motion div right here to another motion div this one is going to have a class name equal to filter tabs Dash container and they can also have a data dot slide animation but this time it's going to slide from down to up so it's going to be slide animation up inside of there we can do a similar thing what we have done for the previous tabs so let's go ahead and copy the editor tabs paste them right here and instead of editor tabs we want to go over the filter tabs we want to give it a key a tab a special property called is filter tab also special property called is active tab which for now we're going to leave as empty as an empty string and then a handle click and then you can see that we're going to have two tabs right here at the bottom three tabs on the left the canvas right now at the top left but that's going to be a shirt in the center and then we have a go back button great so you can see how nicely the tabs on the left slide in from the left side and tabs on the bottom slide in from the bottom side check that one more time looking great but now that we have the basic layout of our application not yet the functionality just the layout let's focus on what really matters and that is going to the canvas folder and then to index.js already we're going to dive into what 3js is and how to implement it in the specific canvas using lighting Shadows camera and 3D models we're going to cover every single aspect of 3js react fiber development right here so with that said let's get started with the main part of our video as we always do we can first import a couple of things first of all we're gonna need of course the canvas coming from at react Dash 3 forward slash fiber and you can immediately notice that we cannot have the two instances of a variable named canvas so let's change our component name to Canvas model and then we're going to keep the original canvas coming from fiber now we can also import something known as environment and Center coming from at react-3 forward slash Dre now we'll have to use a couple of 3js components inside of our canvas so let's go ahead and create them the first one is going to be called backdrop.jsx and there for now we can run rafce backdrop is going to be this backsplash of yellow color that you can see behind the shirt right here then let's create another one and that's going to be called a camera rig.jsx and we can also run rafce inside of there of course that's going to be the positioning of the camera and finally we can create the actual shirt model by saying sure.jsx and then running refce inside of there and now inside of the canvas we can of course import all of these components by saying import shirt coming from dot slash shirt we can also import the backdrop coming from dot slash backdrop and finally we can import the camera rig coming from dot slash camera rig and now we can slowly start utilizing all of these components so first of all we can click customize it to go into the customization page and you can see that we have the canvas here at the top left now instead of just a text of canvas let's actually render a canvas component this is where everything will go first of all we're going to apply some ambient lighting so we can say ambient light that's going to be a self-closing component with the intensity equal to 0.5 if we save that you cannot see anything yet because we are on the light screen then we also want to add something known as an environment and environments except different presets so in this case we can give it a preset equal to City if you hover over it this is going to add the effect on the whole screen finally we can enter the camera rig right here and then inside of there we can leave that backdrop as a self-closing component and then in the center we can create a shirt now if we save this you can see nothing seems to be working so let's go to inspect and then let's open up the console and as you can see it says the div is not the part of three namespace which says that some of our components which are using right here like the camera rig or the backdrop and the shirt are not displaying 3.js properties and components rather just regular divs which is causing it to break so for now we can comment out the camera rig and the backdrop and we can control click into the shirt and turn this into a real 3D model so we can see it on the screen so to do this we first have to import a couple of things and that's going to be import something known as easing coming from MMA TH or math we can also import the use Snapshot coming from volsio we can also import the use frame coming from react 3 fiber and then we need a couple more things from react Ray that's going to be a decal meaning some kind of a mesh or a texture we need to use gltf to be able to use the 3D model and then the use texture to be able to apply that texture and all of that is coming from at react-3 forward slash tray and finally we can import our store to so that's going to be import state from the store great now we already know how simple it is to use that state we just have to say const snap is equal to use Snapshot and then we pass in the state now finally let me show you how we can import a 3D model you just have to say const you get the nodes as well as the materials and you specify that to be equal to use gltf hook and then you point it to the path where that shirt is stored so that's shirt underscore baked Dot glb so now if you go to public you can see this shirt baked glb which is the actual 3D file great now let's create two textures that we're going to apply to that shirt that's going to be const logo texture which is going to go in the middle of the screen so we can say is equal to use texture and that's going to be equal to snap dot logo decal remember that snap is just the store that we stored here and currently it's a path pointing to a regular PNG image and now we can duplicate that and we're gonna also display a full texture which is going to go over the entire shirt and that's going to be equal to snap dot full decal great finally let's display that shirt model we can close the console just to have a clean working slide and instead of rendering a div we're going to render a group inside of that group we're gonna have a mesh element and that mesh is going to have a couple of properties it's going to have a cast Shadow property meaning that it is going to cast Shadows it's gonna have a geometry equal to nodes dot T underscore shirt underscore mail.geometry it's going to have a material equal to materials dot Lambert one that's the material used for this shirt and then we can specify the material Dash roughness and that's going to be equal to one and finally this pose is going to be equal to null I'm not really sure what this one does maybe if we hover over it or if you Google it we can figure that out but we needed it to make this work now if we save it there we go as you can see we have our shirt and it is right in the center of the screen because we use this Center property so that is great although it is really small at this point no worries because we're gonna make it bigger and how can we make it bigger well that's going to be with the camera rig we need to kind of point the camera a bit closer to our actual model so what do you say now that we have our mesh and the shirt we can go back and we can turn on this camera rig that's wrapping the shirt and we can go into it and now of course it's going to break because the camera ring is not the actual camera but once we implement it it's going to actually work so the first step we have to do is of course get some imports such as import use frame coming from add react-3 fiber we can import the same easing coming from math and we can import the use Snapshot coming from full show we can also import that state which is equal to or coming from dot slash store now within our camera rig we're passing some children components specifically the center containing the shirt so to be able to display it we have to get it from the children react prop and then we can render it out we can do that by returning a group and that group is going to render the children like so and there we go our shirt came back means that we are properly following all the 3js rules but with that said we want to modify it a bit we want to move the camera closer so what we can do is we can create a new ref const group is equal to use ref and we're going to use this ref later on to update the state so we can simply connect that ref to our group right here by saying ref is equal to group now as soon as we do this you can notice that it breaks again but no worries we're here to fix it so it says that the use ref is not defined so the only thing we have to do is we have to define the use ref right here coming from react great and we have our shirt again now in the final model the shirt is much much bigger but it also rotates which is the whole point of 3D models so what do you say that we Implement that rotation next first we can get the state by saying con snap is equal to use Snapshot and then we pass in the state and then we can set the model rotation so I'm going to even add a comment right here set the model rotation smoothly and we can do that by using the easing property easing.damp e like this we call it as a function and now we're going to pass a couple of properties to it we're going to pass the group that current dot rotation then we're going to need to pass a couple of variables you can see the target the X the Y and the Z axis so let's create a new array first we're going to position it at state DOT pointer.y divided by 10. then the second one the y-axis is going to be minus state DOT pointer.x divided by 5 and then the z-axis is going to be 0. now this is going to break it one more time because we also have to provide the smooth time which in this case is going to be set to 0.25 and finally we need something known as a Delta meaning the difference and how are we going to get that well we need to call the use frame hook so right here we're going to call the use frame and this hook allows you to execute code on every rendered frame so we can run different effects update controls and so on so we can use the frame it accepts a callback function right here like this and then we can put all of this code the easing inside of the use frame like so and there we get the state and we get the Delta meaning the difference from the last frame that happened and we can pass the Delta right here as the last parameter to easing now if we save this we are again good but we cannot move the shirt yet no worries we're gonna fix that really soon we want to make this shirt look good on all different screen sizes right now we're looking at it from the mobile view but we still want it to be responsive so that's why we can create some breakpoints we can say const is breakpoint is equal to window dot inner width is lower than or equal to 1260 pixels and then we also have the mobile so const is mobile it's going to be equal to window dot inner width is lower or equal to 600 pixels so this is going to ensure that we can make the shirt the proper size on all different screen sizes now let's set the initial position of the model and we can do that by saying let Target position is going to be equal to I found the value minus 0.4 0 and 2 to work best right off the bat but now we can modify it so we can say if snap that intro meaning if we are in the home page remember here then we want to reposition it we want to say if is breakpoint then we want to set the target position to 0 and then 2. if we are on the snap intro and if we are on mobile so if is mobile then the target position is going to be 0 0.2 and then 2.5 and finally else if you're not on the intro if you're on the customizer page then we can check if is mobile in that case the target position can be almost the same we can have it here 0 0 2.5 and then we can also have an else where we're going to set the target position to be equal to zero zero two so these are just some values to make the shirt work on all different screen sizes and now is the time that we set the camera position so set model camera position to do that we can call the easing again dot damp but in this case damp three we can pass the state.camera dot position this is what we have been changing here the second parameter is going to be the target that's going to be the target position then we have the smooth time which is going to be 0.25 and then we pass in the delta and if we save it you can see how the shirt now moves and it also got a bit bigger and now check this out if I click customize it moved to the center again but really smoothly and slowly so now we have some interaction with the shirt you can see it is moving but still it doesn't have a lot of texture and nothing interesting is going on so we cannot really see how great it is but so far so good our camera is now fully done we can jump out of the camera and we can go back to improving our shirt model right here inside of the shirt's mesh we need to know if we're currently showing the logo on the shirt or are we showing the full texture so this is it currently showing the logo not showing the logo and then showing the full texture and not showing the full texture so to do that we can first call the snap which is our state and then check if is full texture then we're gonna apply a decal that's going to be of that full texture and we can do the same to that decal we can pass a position that's going to be equal to an array of zero zero zero we can also pass a rotation that's going to be equal to zero zero zero we can pass a scale equal to one which is going to take the full space of the model and then we also need a map which is going to render that full texture right here if we save that you won't be able to see anything yet and now what if we have the logo well that's easy we're gonna simply duplicate this below we're going to say snap is logo texture we're going to change the positioning just a bit I found the value of 0.04 and 0.15 to work best the scale is going to be much smaller it's going to be 0.15 and then the map is not going to be the full texture is going to be the logo texture right here and there we go you can see the logo in our state is currently turned on so that's why it showing if we switch it off here you can see it is gone and if we switch the full texture on you can see we have the texture so right now we can change these statically but soon enough we're going to add buttons right here below so we can change these dynamically but it's good to know that we can see the logo on our shirt now we can change the quality of the texture by changing the property called map anisotropy and we can set it to 16. we can also change something known as a depth test which is going to ensure to render on top of the other objects in the scene and that can be set to false we want to show it on the shirt and then also depth right which we're going to set to true there we go so I figured these work best while displaying that logo on there and believe it or not that's mostly going to be it for the shirt but we're gonna just play a bit more with the actual easing to apply the color smoothly and not dramatically and we can do that by using the use frame hook we already used before we're going to get a callback function with the state and the delta and then inside of there we can simply say easing dot damp C we can pass in the materials so materials dot lambert1 dot color so first we pass the color then we pass the current caller snap that color we pass the 0.25 for the smooth time and then the Delta value so essentially we're just ensuring that we apply the color smoothly and now there was one interesting thing that I figured out while creating this project and that is that the shirt sometimes would not update and to fix it I needed to provide a key to this group right here and the key can it simply be a state I had to recreate a string of the current state that we can pass in so const State string is equal to json.stringify and then we pass in the current state so this tracks State changes and then we pass in the state string this way react will render the model whenever the state changes great so now if we save this this is looking good we have our model and now we can go back and we can focus on the backdrop that's going to ensure that we have those cool lights showing behind the shirt so if we bring back the backdrop it's going to break again because it's a regular div but soon enough we'll be able to change it to a real 3js property so inside of here let's import something known as easing coming from math let's import the use ref hook coming from react let's also import the use frame from react 3 fiber we used before and this time we're going to work and play with shadows so we can import accumulative Shadows and randomized Light coming from react 3 Dre you can see Dre is quite useful because it gives you a lot of these helper utility functions we can use on our 3D models so let's play with those Shadows let's render a component called accumulative Shadows inside of there we can render the randomized light and you know what for good measure let's do two randomized slides but first let's add some properties to it now if we save this you can see this is good but short is nowhere to be seen so what we can do is let's add an amount to this randomized light and that's going to be four but I'm wondering where is the shirt so maybe we have to change the position of the backdrop to be able to see it let's set the position to be equal to an array of 0 0 and then minus 0.14 and even though that's positioned right we still cannot see the shirt what if I comment out the backdrop and reload the page nope shirt is still nowhere to be seen let's go ahead and open the inspect element and the console too and we can see we have an open loop saying reading color on shirt line 16. it cannot read it so that's happening right here I'm guessing and we need to fix this quickly because it's just ramping up the errors so to fix that I misspelled the Lambert right here which is the material so it's Lambert Not lamber and with that we do get the color of her shirt which makes it look so much better that's looking great so now if we go back to here and uncomment the backdrop there we go you can see what we meant when we added this randomized light or Shadow but of course we have to play with it to make it so much better now if we expand our browser a bit you can see the shirt is going to expand but it is still a bit too small so let's make the shirt just a bit bigger before we finalize the backdrop and we can do that by playing with the canvas inside of the canvas we can turn on the shadows and we can also change the camera positioning so we can say camera position is going to be set to zero zero zero and then most importantly the fov or the field of view is going to be set to 25. this is going to bring the camera closer now if we reload the page you can see the shirt now just looks so much better but of course these backdrop and the Shadows are not collaborating with us so far no worries we're gonna make that work soon before we do that let's apply a GL property right here that means to preserve the buffers later on and that's going to be preserve drawing buffer is set to true finally we can give it a class name equal to W Dash full for full width Mac W-4 so this is going to be the max width 100 percent H dash full for full height and transition Dash all as well as ease Dash in great now our canvas is done our shirt is done and their camera rig is done we just have to focus on that backdrop to have this nice looking backsplash of color and Shadow behind our shirt so to make that happen let's focus on these shadows and lights first of all this randomized light let's see how it looks like what if I remove the amount you can see it is still here because we have the shadow so instead of focusing on the light first let's get rid of this Shadow let's make that work first because this is not really looking good so first we need to create a ref by saying const Shadows is equal to U's ref because we need to reference to that specific Shadow later on so let's give it a ref equal to Shadows we can also set the temporal variable which means it's going to smooth out the edges of the Shadow over time then we can set the frames to be equal to 60 meaning the frames are going to render in 60 frames we can also add the alpha test which is going to set the transparency of the Shadows to 0.85 we want to give it a scale equal to 10 and a rotation equal to math dot pi over 2 and then 0 0 and we can leave the position as it is now if we save this you can see everything became dark which is good it really makes our model pop but now let's bring back those randomized lights let's give it the amount of four and you can immediately see how it just flashed but we want to keep it there so let's spread the radius a bit to something like 9. let's set the intensity to 0.55 let's set the ambient to 0.25 okay it's already just a bit lighter and let's set the position of that light to be an array of five five and then minus 10. okay there we go so you can see now that light is not centrally hitting the shirt it's coming from somewhere on the top right and it leaves a great Shadow on that shirt that is looking great so this is a light source in a 3D scene now we can duplicate that right below and we can have the other one with the amount 4 radius 5 maybe a bit of a lower intensity you can play with this as much as you like we can set the ambient to 0.55 and we can change that to come from the different angle so let's do -5 five and then something like minus 9. and if we save this you can see now they're coming from two different sides and they cast different shadows but of course feel free to play with the lights as much as possible feel free to play with the camera rig as well and feel free to play with the shirt model most importantly you can also change some things right here in the canvas maybe the fov can be set to something like 50 if you reload that's going to make the shirt smaller you can make it something like 10 to come really close with the camera onto that shirt so right now you can see the full power of the texture appearing on the shirt and you can see this is like a sticker on that shirt looking great but of course let's bring that back to 25 as with that value the full shirt fits on the screen so this is looking great already and with that we're done with our camera we're done with our backdrop and we are done with our shirt now we are ready to move all the way back to our app and then to our customizer now we can make all of these tabs work in the ones on the bottom too so we can start adding uploading different materials different textures and different colors to the shirt of course we're going to start with the tabs first so the first tab on our list is going to be the color tab so let's dive into the tab and here we're going to implement all of these different tabs such as the file input color input and then also the AI image upload input which is quite an interesting one so let's first start with the overall look and feel of the tabs to start implementing our tabs we can import the use Snapshot hook coming from volcio we can also import the state coming from store as we always do we can now get the snapshot of that store by saying can't snap is equal to use Snapshot State and if you remember correctly inside of the customizer we passed a couple of props to our tab here and also here so we have things like a tab is filter tab is active Tab and the handle click so let's get those props right here tab is filter tab filter is the one on the bottom we have is active tab and then finally the handle click great now let's actually change this from just being tab to the actual jsx of the tab we can do that by giving each div a key equal to tab.name we can give it a class name equal to a dynamic template string of tab Dash BTN and then if it is filter tab so if is filter tab in that case we can render the rounded Dash full as well as glass morphism and if it is not a filter tab then we can simply do something like rounded Dash 4. now if we save that you can see that now we have this glass on the left side and we have nothing on the bottom side now we can also give it an on click which is going to be equal to the handle click and now we have to give it Styles depending on if it is currently active so we can create a new property at the top const active Styles and there we can say if is filter tab and is active tab in that case we want to give it a property a style of background color which is equal to snap dot color and opacity equal to 0.5 if it is not an active tab then we want to apply it not active Styles which is going to be a background color equal to transparent and we want to set the opacity to one and now we can simply apply those class names so rather styles to our div and you can see nothing is currently active so we cannot see anything now let's actually render something within that div that's going to be a self-closing image tag with a source equal to tab dot icon and there we go immediately this starts looking so much better because we have our colors our files the AI generator and then we can show or hide the actual shirt and the logo great we can give it an ALT equal to tab that name and we can give it a class name equal to it's going to be dynamic if is filter tab in that case we want to give it something like W-2 thirds and H dash two thirds like this and otherwise we want to set the width to be 11 out of 12. and H 11 out of 12 as well and object Dash contain I found these values to work best there we go so now this is looking good these on the bottom are just a bit smaller and that is it for the actual tab layout but now we have to create a model for once we click on a specific tab for it to be marked as active and we also need to open up the corresponding picker so to do that we can go back to customizer and there we can see that we have our actual tabs but once we click them nothing actually happens so what we can do is scroll all the way to the top of the customizer and create a new function and this function is going to show tab content depending on the active tab so that's going to be const generate tab content and it's not going to take anything as the parameter because we're going to keep track of the active tab within our state so right here as the local state of our application we can create a couple of use States the first use state is going to be a file later on we'll need to upload files so we're going to have file set file at the start set to an empty string then we'll also be working with the AI prompt so we need to create a new use State field for the AI prompt set prompt at the start set to an empty string we also need a loading state are we currently generating the image or not so we can create a new use State field called generating IMG and also that's going to be set to false at the start but then most importantly we need to have two additional active States so let's create a first one use state is active editor tab set active editor tab at the start set to an empty string and then use state active filter tab set active filter Tab and that's going to be set to an object containing logo shirt set to True at the start and then stylish shirt set to false so this is going to be able to trigger are we currently showing the logo are we showing the full texture and then also the active editor is going to show us which one are we changing the caller the file or the AI image generation prompt so now we have everything we need to implement our function generate tab content so how this is going to work is we're going to have a switch statement and that switch is going to look for the active editor tab if the active editor tab is Color Picker then we want to return a self-closing Color Picker component the case is a file picker in that case we want to return I think you can guess it a file picker and then if the case is the AI picker in that case we can return the AI bigger and the default is going to be just a return of null great so now we're going to display those additional components on top of our current layout of course using the absolute positioning once we click on them the first one on the list is going to be the Color Picker but of course for that to happen we have to call the generate tab content somewhere so we're going to call it right here below our editor tabs so they're going to be here editor Taps and then we want to call the generate tab content so immediately it's going to show it on top once we actually activate a specific tab so now on the editor tabs we can call the set active editor tab to tab that name great so now once we click on the color we can see Color Picker is the currently active one and if we click on the file picker an AI picker you can see these are changing but right now they're just displaying the text of that specific picker but of course we need to show it right here like we do on the finished application right next to it so let's focus on the Color Picker first by going to components and then Color Picker implementing the Color Picker is going to be incredibly straightforward as we're going to use a package called sketch picker or rather the react color package and then one of their Pickers is called a sketch picker implementing the Color Picker is going to be incredibly simple because we're going to use the sketch picker coming from react color package that's going to allow us to really easily have a wonderful looking cooler picker after that we can import the use Snapshot from volsio and we can also import the state coming from dot slash store you already know how we get the values that's going to be con snap is equal to use Snapshot to which we pass the state and then we can start with creating our Color Picker so we can turn this from just being a regular div to being a div that has a class name equal to Absolute left Dash full and then margin left three now if we save that and click here we cannot see anything because that div is currently empty so inside of there we can render the self-closing sketch picker component and to it we can pass a couple of things we can pass the default cooler which is going to be snap dot color that is that color that is coming from our state right here and of course you can change it to some other color in this case we have this yellow one and with that immediately we have this wonderful looking Color Picker although you still cannot change the color so let's make that work as well we can say disable Alpha that's kind of the opacity that we have so if we save that now we have only the colors then you can add the on change that's going to be a callback function where you get the color and then we can just modify the color in the state by saying stay that color is equal to color dot hex and that's going to allow you to modify it it is that simple you can change all of the colors right here I think you have a couple million colors to choose from maybe even more so just go wild this green color is a is a cool one and you also have some preset colors in case you want to add some of your own preset colors you can just say preset colors open up an array and then start typing some values in there so if we do this you can see we have different colors of course you can add your own variance in this case I'm just going to paste some that I found to work the best there we go so now we have these great looking colors at the bottom but of course feel free to play with these and add your own preset colors or just turn this off and let the Picker suggest you some colors automatically this is looking great and with that said the Color Picker is now fully implemented now we can go back to the customizer to the generate tab content and we can focus on the file picker where we'll be finally able to upload our own images to display them as the logo but also as the entire gradient background for that to work we'll have to pass in a couple of props first of all we'll have to pass the file equal to file set file equal to set file and these are coming as you might already know from the state but now we'll also have to create a special function const read file which is going to take in the type of the file and then we have to pass it to the reader function to get the file data so we can say reader to which we pass the file then we do a DOT then where we get the result and then we want to pass that file to the decals of the shirt depending on the type of that image so that's going to look like this handle decals to which we pass the type and the result and once we do that we want to set the active editor tab to be equal to an empty string meaning we want to reset it but of course that handle decals function hasn't yet been implemented so we can say const handle decals and this is going to take in the type and the result and then based on this we want to update our shirt so first of all the type as you already know can be a logo or can be a full texture we even Define that in our original state if you look right here is logo texture is full texture so if you reload the page and go back in here you can see that we have the logo and the full decal so these are the two different options just to show how that looks like on our finished side you can toggle the logo on and off but you can also toggle the full texture on and off great now with that said we can scroll down and we can implement the function we can first get the decal type by saying cons decal type is equal to the Cal types and then we pass in the type then we need to update the state by saying State decal type dot State Property is equal to result so in here we're updating the state right here that I showed you so if we go into the store we're updating these values right here and then we want to say if no active filter tab to which we pass the decal type dot filter tab meaning we want to figure out if that decal is currently active be that the logo which now breaks or the texture in that case we want to call the handle active filter tab function to which we pass the decal type dot filter Tab and this is yet another function that we don't yet have so we can create it right away it's called const handle active filter tab to which we pass the tab name so once again we're doing this to keep in mind are we currently showing the logo or not or are we showing the texture or maybe even both so we need to be able to handle that with these functions so what can we do there well we can create a new Switch statement that's going to take in the tab name if the case is logo shirt then we want to add the state that is logo texture to be equal to not active filter Tab and then we pass in the top name so we want to toggle it on or off and we want to break then if the case is stylish shirt in that case we want to change the state DOT is full texture to be equal to non-active filter tab tab name and then the default is going to be state DOT is logo texture is true and then state that is logo texture is false or no I think we had it the other way around is logo is true is full is false so his logo is true is full is false there we go so I know this might be a bit confusing but now that's going to allow us to actually toggle on and off are we showing the shirt are we showing the texture are we showing both or are we showing neither great with that said we were left in the read file function we were trying to read that specific file and now we're doing that successfully and we're handling the decals based off of that so now we can utilize this read file function and we can pass it over to our file thicker read file is equal to read file which allows us to now control click into the file picker and we can finally start implementing it and unlike using the package for implementing the Color Picker we're going to implement the file picker entirely from scratch so the only import we're going to need is going to be the custom button component we have created before and don't forget inside of there we're getting the file the set file and finally the read file great so our file picker is going to be a div with a class name equal to file picker Dash container now if we save it and click the file icon here you can see we have the file container right there or no we don't this is already the finished version because I was on this URL we're going to move to the current version and there you can see an empty div I was wondering why all of this is here even though we haven't implemented yet there we go so this is how it should look like and now we're going to have a div inside of there that div is going to have a class name equal to flex of one flex and then Flex Dash column to be able to show all the elements one below another and inside of there we want to render a self-closing input component that input is going to have the ID equal to file Dash upload it's going to have a type equal to file it's going to accept only the image properties meaning all images and it's going to have an unchanged property equal to a callback function where we get the event and then we set the file to be equal to e dot Target dot files zero so it takes the first image that we pass and then we can pass the label that label is going to say upload file and it's going to be connected to the above input by giving it an html4 file Dash upload and a class name equal to file picker Dash label and there we go there's the upload file button now below that we want to show which file have we uploaded so we can say instead of curly braces if file is triple equal to an empty string then we can say no file selected else we can show the file name there we go currently no file has been selected let's also style that a bit by giving it a class name mt2 to divide that bit from the top text Dash gray Dash 500. text Dash extra small and truncate in case the name of the file is a bit too long great finally below the speed tag and below this div we want to create a wrapper for our buttons so let's create a div that's going to have a class name equal to Mt of 4 margin top of four to divide it from the top Flex Flex Dash wrap and gap-3 inside of there we want to show a custom button this button is going to have a type equal to outline we haven't had this before it's going to have a title equal to logo a handle click equal to a callback function where we call read file and pass in the logo and then a custom styles equal to text Dash Xs there we go you can see this logo right here now we want to duplicate that below we're going to have a full button this time or filled button it's going to be for the full texture we're going to update the full texture I hope that now you can see what I meant when changing the type of the decal on the read file function and then the text XS is going to remain so if we save it now we have two different buttons but they look a bit off and that's because we haven't yet implemented the custom outline button you can see we have only generated the styles for the filled button so if we go back to the custom button component right here we can say else if type is triple equal to outline in that case we can return an object with border width of 1 pixel a border collar of snap that color and also a color of the text equal to snap dot color there we go so now we can see this button right here although it disappeared a bit so there is this really cool thing we can do we can read the background color that we have specified right here and then based on that we need to apply a proper contrast for the actual color see this full button at the bottom we can see the text clearly because it is written in white on black but if I change the color to white and go back the text disappears that's because we don't have proper contrast so instead of Simply setting the color to wide we want to be able to generate the contrasting color and this is something that I have asked chat GPT to do for me so we can import a function called get contrasting color from config forward slash helpers so if you go into it you can see this is how that function looks like it takes in the colors figures out the brightness and then returns either black or white depending on that brightness that's cool that Chad GPT can do that kind of things so now that we have that instead of Simply rendering the FFF we can get contrasting color and then pass in the snap that color and immediately you can see that this turns to black as does the text on the top right so now if we change it we have really light red but if we go darker it's good but as we move towards the lighter color at one point it's going to switch there we go it's going to switch back the text to Black so it is better contrasted great with that said our buttons are now done but something still seems to be out of the place because this is how it should look like they should be one next to another but in our version they're looking like this so if you go back to our custom file picker I can see the gap of 36 but the Gap was supposed to be just three so if I fix that we have those two great looking buttons so far this is looking great keep in mind even though it's hard to see on some colors right now it's going to be much easier if you're on a desktop device right now we're looking at any mobile view but this is looking great now the file picker is fully done it is reading the file and then these functions that we have created inside of the customizer should actually update the file and set it as a decal to our shirt so let's go ahead and give it a try I'm going to click upload file and as you can see I have downloaded some of the JS Mastery logos of course you can download something else in this case I'm going to try this white PNG JS Mastery logo upload you can see white dot PNG here and then you can choose whether you want to apply it as a logo or as a full texture let's go with the logo first and there we go it's looking great but it wasn't in a square format so it looks a bit off but if I go ahead and go to upload and use a square logo from JS Mastery Pro this time you can see this looks so much better now we can expand it to admire it in its full Glory we have a wonderful looking shirt with a great logo right here and of course we can change the colors too since we have a white logo of course darker colors are going to look a bit better on this one such as this great looking bluish or reddish one but already this is looking great now that I'm seeing a JS Mastery logo on a shirt it gave me an idea of creating JS Mastery merch so what do you say let me know down in the comments if you'd want me to create the first ever JS Mastery merch for real fans if you're watching this video later than it was published then there even might be a special discount for the first ever JSM merch right in the description of this video with that said let me know down in the comments if that's something you would be interested in great now what would happen if we try to upload a file and then make it a fool right now that doesn't work and that's because of these filters at the bottom so let's collapse our browser and let's look into how we can fix the turning off and on the logo and the texture that's going to be right here with the filter tabs and as you can see the handle click is currently just doing nothing so what we need to do is we need to handle active filter Tab and we need to pass in the tab.name and also we need to change the active tab to be equal to active filter Tab and then the tab name that way we can see the logo is currently active but we can toggle it off unfortunately not on so that's something we need to look into and we can also do this which brings back the logo this is currently not working as it's supposed to so let's go into the handle active filter tab and there we can see that we have logo shirt so state is logo texture not active filter tab tab name this is looking good then we have stylish shirt this is also looking good and we're toggling on and off the full texture and then in here we have islogo true is full false but now we're missing a really important part and that is this switch is just changing the state but now after setting the state we need to set the active filter tab to update the UI so what we can do there is we can set active filter tab since we'll be working with the previous state we need to create it as a callback function containing the prep State and there we need to return an object that's going to spread the previous state but then it's going to update the tab name to be equal to previous state and then that same tab name but then we're going to take the tab name and then we're going to set it to be equal to not previous state tab name meaning it's going to toggle it on and off so now if we do it and if we click you can see it's actually toggling on and off the logo and if you click the texture well that apparently seems to be broken right now because it just brings back the logo so that's definitely something we need to look into that's going to be that second filter tab that we have which is the stylish shirt so if we go back to where we're setting it that's going to be stylish shirt and that's going to set the full texture so far this is looking good to me I don't see any reason why this wouldn't be working but that's definitely something we can explore later on for now the most important part is that we can see the logo well let's try to upload another image maybe this one and let's try to update it as a full and nope still it doesn't want to apply it it's still applying just the logo so for now we can let this be and then we can revisit it once we actually Implement one of the cooler parts of our application of course alongside this cool 3D model and that is the AI bigger component allowing us to tell AI what we want to add to the shirt and it's immediately going to add it so let's start focusing on that right away first we need to pass it a couple of props that's going to be the states we have already created such as prompt equal to prompt set prompt equal to set prompt generating IMG to generating IMG which is the loading State and then we're gonna also need a handle submit so what's going to happen once we submit our prompt and this function we haven't yet created so we can do it right away right here below const handle submit is equal to an async function that's going to take in a type do we want to create a logo or a full texture and then we can check if there is no prompt we can simply return alert please enter a prompt and if there is a prompt then we can open a new try and catch block and just to be precise we're going to also add a finally part to that try and catch block so if we have an error we're going to Simply alert that error so we can see what's happening and finally we want to reset the loader so set generating image is false and then set active editor tab is going to be set to nothing and then in the try we're going to actually call our backend to generate an AI image isn't that great so let's get started with that part right away but of course to make that happen we have to close all of the currently open front-end files we have to collapse it and we have to create a new folder right here called server so we're going to create an entire backend node.js server to be able to call that API and then deliver the generated image all the way to the client so to initialize our server we can open up the terminal press Ctrl C to stop it from running CD dot dot and then CD server to move into it there we can run npm in it Dash y this is going to generate all the files and folders meaning just the packet Json that we need to start creating our server inside of that package Jason you're going to see that we have some scripts we want to add a new start script in there that's going to call the nodemon index meaning it's just going to keep this index file running so it looks into all of the changes we also want to add a new type equal to module that's going to allow us to use the modern import export syntax like the one we use in react and then we'll have to install a couple of dependencies so let's run npm install once again make sure that you're in the server directory and let's install cloudinery which we're going to use to save images let's do course to allow for cross-origin requests dot EnV for storing our environment variables Express of course Mongoose nodemon and finally open AI these are going to be all the packages that we're going to need to spin up this fairly simple but also incredibly powerful backend that's going to allow us to generate all of the images we want and put it straight on the shirt and immediately these packages got installed and now all that we have to do is create a new index.js file which we can do right within the server folder let's create a new index.js and inside of there we'll have to do the usual stuff of setting up a regular Express server so to do that we can first import Express from Express we can also import everything or Star as dot EnV coming from dot EnV we can import the course for cross origin requests coming from course and to set up environment variables we have to call Dot env.config finally we need to set up the express application by running const app is equal to express we need to set up a couple of pieces of middleware by calling the app.use command and we need to pass course otherwise we're going to have that cross-origin problems as we usually do we also need to set the app.use to specify the weight of the payload that we can send so we can say the limit is going to be 50 megabytes finally we can create a demo route by saying app.get that's going to be just forward slash and then there we can simply rest that status of 200 and then dot Json where we can pass a message equal to hello from dally this is going to be our backend and immediately now if we run our server by running the npm start command while in the server it should run it well not yet because it's not going to spin it it's running it but we're not hosting it anywhere so we also need to be able to listen on a specific port and we can do that by saying app.listen that's going to be port 8080 or you can use 5000 as well and there we're going to Simply console log server has started on port 8080 and that's going to be inside of a string so now if we save this you can see that we can open up a new tab and simply go to localhost 8080 and there you're going to get a new hello from dally message right here as a Json output that's great but now we actually have to create some file and folder structure but trust me it's going to be fairly straightforward the only thing we need is one folder called routes and inside of there we're going to create a new dally dot routes.js inside of which the logic for the interaction with the Dali API will go so inside of there we can import Express coming from Express we can import everything as Daddy and V coming from dot EnV and we can import a couple of things from the open AI package such as configuration and open AI API that's coming from open AI as we said to be able to use environment variables we need to specify the DOT env.config and in this case we're gonna create some new additional routes so we can specify a router by saying const router is equal to express.router and let's create a couple of routes such as router.rout just forward slash dot get we're going to have a callback function with the rec and the res and there we simply want to rest that status of 200 dot Json message we can do hello from dally 2.0 or we can do hello from dally routes so we know that we are in this specific file and then we have to export default router and now where is this going to be what is this route well we have to connect it to our index.js so inside of there we can first import dally routes from dot slash routes forward slash dally dot routes and don't forget we're in node here so you have to add the dot JS we have to also add the file extension then we have to use those routes or consume them as a middleware by saying app.use forward slash API forward slash V1 forward slash Valley and then we can reference those daily routes so what's going to happen now is if we go to localhost 8080 forward slash V1 forward slash API forward slash V1 forward slash dally we can see cannot get which is not good but no worries usually the case is that we just have to reload our terminal so if you terminate it and then restart it one more time and then reload on the API V1 dally you should be able to see your Dowdy routes so that's great that means that we are now in here and we're properly reading it but we don't want to Simply send the message saying hey everything is good from our routes we want to configure the use of the dally API so for that reason right here below the router we can create something known as a configuration so cost config is equal to new configuration and then in here we have to pass the API key now the question is how do we get one well you have to go to platform.openai.com forward slash account forward slash API keys and there you will have to sign up or log in I already have an account so I'm going to Simply log in and once you do you can create a new secret key as you can see I already have a couple so you simply need to create a new key copy it and then to keep it secure we're going to paste it inside of a new DOT EnV file make sure it is within your server directory we can call it open AI underscore API underscore key is equal to and then you paste your key right there so inside of here instead of the daily routes the only thing you have to do is say process open AI underscore API underscore key and that's going to connect the two now the only thing you have to do is utilize this config and merge it with your instance of the open AI API by saying new open AI API pass the config into it and you'll be able to call its API to generate images for you isn't that great now of course we have to create a new route through which we'll be able to pass the prompt from the front end to the server so we can say router.rout it's going to be a forward slash route but this time it's going to be a DOT post route so we can actually pass the data through it it's going to contain an async callback rack res function and then in there we can open a new try and catch block in the catch we can simply do something like console.error and then pass the error as well as send a restat status of 500 with a message something went wrong inside of the try we can actually get the prompt through passing from the front end so we can say prompt which is going to be coming through rec.body so how do we get an AI response well we say const response is equal to a weight open AI dot create image as you can see that's a special function that allows you to create an image based on a given prompt you have to call it and then pass in an object as the first and only param to it you can pass the actual prompt that we're getting from the front end the N is equal to one that's the number of images to generate the size in this case it's going to be 1024 by 124 that's fine for us and then the response underscore format in this case it can be a b64 meaning a base 64 underscore Json just a format in which we're going to receive our image now once we get a response we can get that image out of it by saying const image is equal to response that data dot data 0 and then dot b64 underscore Json and once we have it we can simply pass it over to our front end by saying rest that status of 200.json and then we pass the photo equal to this image and that is it so we have the daily route completed that Dali route is connected right here and our server is up and running so now that our server is done we can keep it running as you can see it is currently running we can reload it just for one good measure to ensure that our new routes are there but this time we can click this plus button to open up a new terminal and we're going to open it so we can run our client side one more time so we can send the prompt from the front end to the back end which is then going to talk to the open AI API and then it's going to return as the final image so to do that let's CD into client and let's run npm run Dev that's going to re-spin our local development server on the same port there we go and don't forget where we were we were in the customize it and then this AI bicker so now we need to go back to the client side source components and then AI picker this is where the magic will happen at least when it comes to the front end because the backend magic has already been done or will be done by dally which we just hooked up to our backend the AI picker itself is not going to be anything more than a simple form and two buttons that then calls are backend so implementing it is going to be pretty straightforward we can just import our custom button coming from that slash custom button we can get all of the props that we passed into it such as the prompt set prompt generating IMG and handle submit it's going to be wrapped in a div that's going to have a class name equal to AI picker Dash container and within it we're gonna have a text area so it's not going to be an input because you can type a bit more stuff in that text area is going to have a class name equal to AI picker Dash text area if we save it immediately you can see that we can start typing text in here let's also give it a placeholder we can do something like ask AI let's give it a rose equal to five I think that should be enough value equal to prompt and then on change equal to E a callback function where we have the event and then set prompt e.target.value great if we save that you can see we have the placeholder ask Ai and now below that exterior we want to create a div with two buttons so that's going to be a div that's going to have a class name equal to flex Flex Dash rap and GAP Dash three inside of there we want to know are we currently loading so are we generating an image if we are in that case we only want to show one button so one custom button that's going to have a type equal to outline a title equal to asking AI and then it's going to have a custom Styles equal to text Dash XS so you can think of this as a loading button but then if we are not currently loading we want to show a react fragment with two different buttons it's again going to be a custom button one for the type outline where the title is going to be equal to AI logo the handle click is going to be equal to a call to the handle submit function with the type equal to logo and then finally the last property is going to be custom Styles where the text is going to be extra small we can duplicate this button below change it to filled instead of outline and instead of AI logo we can say AI full and change the submit to full so one is for generating the logo and one is for generating the full image and with that our actual AI picker is done so we can go back to our customizer component and we can ensure we do the right call to our newly created backend now that we have the buttons so to do that we first have to set generating IMG to be set to true meaning we want to start the loading and then we want to get the response by saying const response is equal to a weight fetch that's going to be backend URL so we're trying to fetch from the backend URL and this is coming from our config if I'm not mistaken let's look into it a weight Fetch and for now this is going to be localhost 8080 and I think that's going to be it yeah we want to make a call to 8080 but then API V1 and then Valley if I'm not mistaken let's see just to be sure it's API V1 Dali but it has to be a post request because we have to pass some data into it so as the second parameter we're going to pass in an object with options such as a method equal to post headers equal to content type application Json and then the body is going to be equal to json.stringify where we pass the prompt and we finalize it so once again let's look into this we have a request through making to localhost 8080 API V1 dally and that's a post request of a type Json Passing Over The Prompt keep in mind that is calling the server that we created this specific route the post route that then generates the image from the dally API and then returns it as photo so once we have the request or the response we can now say const data is equal to a weight response dot Json and we can call the handle decals function where we pass the type do we want to update the logo or do we want to update the texture and then we need to pass the actual photo that's going to be data image forward slash PNG semicolon base 64 comma and then data dot photo that's how we can actually render that base64 string great and if we save it that should more or less be it let's give it a shot so let's try to ask AI to generate let's try with something interesting first let's try with something like design a simple and modern logo icon using geometric shapes and a minimalistic color scheme without any text or lettering let's try something like a cool simple logo if AI is really that smart it should be able to generate it just based on that one single sentence so in this case it cannot because we get failed to fetch so that's an error coming from the back end and that's a response to this request we are making it's coming here so let's see if our backend is still running it seems that it is and if we open up the inspect element and go to console we can see cannot load localhost 8080 API V1 dally localhost is not supported I think we need to add HTTP colon forward slash forward slash to be able to make that request so now we can close this and we can try one more time a cool simple logo and let's try it out there we go it says creating or asking Ai and immediately the logo is there now as you can see this logo is interesting and simple but yeah we definitely need a bit more Direction so I recently asked chat gbt to provide me a prompt for a logo and that looks something like this design a simple modern logo icon using geometric shapes and a minimalistic color scheme without any text or lettering so let's give that a shot maybe AI can tell another AI what to do better okay this is definitely an interesting logo as well now keep in mind that AI generated logos are not going to be good because they are not transparent even if you try to do something like design a simple transparent logo I don't think it will be able to do that as it just creates an image and not a PNG so there we go you can see how that looks like but hey you can always keep uploading your own images but what AI is going to be exceptionally good at is generating gradients for the pattern of the entire shirt so let's try asking it to design the entire pattern create a gradient pattern that goes from Blue to red and we can do AI fool now he's generating the full image background and it looks like it breaks if you can remember we still didn't fix that problem where we're not showing the actual texture of the shirt before you go ahead and play with the API logo generation a bit let's just fix that texture because it's going to be so much better when you can actually create your own texture of the shirt and the color of the shirt and then Implement your own logo that you want to upload to it in a PNG format so let's collapse our terminal and let's look into why this button doesn't work or why is it not adding a full decal so we can go to the state and the store and here we can see is full texture at the start set to false and if we manually set it to true it actually applies a decal over the entire shirt so maybe whenever we're changing the is full texture maybe we're not changing it properly so let's see where we're doing that we're doing that in the shirt itself where we take the snap is full texture and then we apply the full texture over it that's just where we're applying it but where are we actually setting it we're doing that here if we have the stylish shirt and I can notice that I forgot to add a break here whenever you don't have a return statement in your switch you absolutely need to add a break so now if we bring this back go back to customize it and you know what let's expand it to be able to see it in its full Glory we should now be able to generate that gradient using AI because now full texture should be working and there we go this is a great looking gradient now we can hide and show the logo and we can hide and show the texture as well or we can mix and match the two this is great let's try to play with the AI a bit more on creating some other textures this one was also generated for me by cha GPT it says create a smooth gradient pattern texture in shades of orange blue and green that can be used for a t-shirt design let's give that a shot okay that's looking pretty pretty cool let's try a couple more options create a unique t-shirt texture that has a vintage and distressed look the texture should be designed to cover the entire front okay that is great it looks so good that I feel like I can touch the shirt through my screen and I'm not over exaggerating here let's try a couple more options maybe we can create a tiger skin shirt pattern so maybe some stripes let's see how that should look like okay there we go not bad not bad at all we can also try to do one for the logo maybe create a unique style icon or logo that represents a technology company futuristic and high tech let's see if we can do that okay that's cool but definitely doesn't look good on the uh tiger pattern so maybe a bit white on black looks a bit better great overall as you can see AI can now add real logos or we can upload the logos ourselves that immediately get attached here we can then add AI patterns on top of the logos that we have added so now we can have this crazy JS Mastery tiger striped shirt and we can also keep changing the colors and even go back the home page this is looking great and with that the entire functionality of our application has been implemented we can just do regular color of the shirt which can be changed by the Color Picker we can do AI image upload for the logo as well as the full texture and then we can do the AI prompts to add the logo or to generate great gradients and textures such as this one so with that said our application has now been fully developed with all of its great functionalities the 3js models 3GS camera and 3js lighting and shadows and also AI dally functionalities isn't that great now if you've been watching JavaScript Mastery for quite some time then you know what's coming and if you're new then definitely feel free to subscribe so what's coming is going to be the deployment process of our entire application where I'm gonna show you how we're going to deploy this application to the Internet so prepare for that as that is our next and final step to deploy our great application we first have to publish it on GitHub so go to GitHub click this Plus on top right and create a new Repository we can name it something like project underscore 3js underscore Ai and set it to public after that let's first add a new DOT get ignore file and ignore the node underscore modules as well as the dot EnV files we don't want to push those to GitHub and now we can open up the terminal create a new instance ensure that we are in the root of our directory not in the client or the server folders run get init git add Dot and then we can follow the steps git commit Dash M first commit git Branch Dash M main get remote at origin and then git push U origin master and as soon as you reload the browser you'll be able to see your code appear right there now I did encounter some issues while deploying the server so let me show you how we can mitigate them to start with you have to remove the package.log Json and then also in the packet Json instead of nodemon index we need to say nodemon index.js finally we can do git add git commit we can say something like fixed deployment and then get push with that said we are ready to start deploying our backend and then our front end to their respective platforms let's expand our browser and first we can focus on the render.com that's the tool we'll use to deploy our backend click get started for free sign in or sign up on top right click new and choose web service go back to your GitHub repository and copy the URL ensure it is public and then paste it right here below and click continue choose the service name such as project underscore 3js underscore AI choose the root directory in our case server and the start command to npm Run start finally choose free and click create web service while it is being set up you also need to add your environment variables so go to environment add environment variable choose open AI key and then copy the value from your dot EnV paste it here and click save changes that's going to re-run the deployments so you can see another deployment is going to start and we can wait a bit until it is successfully published so let's give it a few minutes and we'll be right back and there we go the deployment is live and if we look at the logs we can see that the server has started well not on port 8080 but rather on our newly deployed URL now just a quick note the initial deployment didn't work for me because I chose the renders Frankfurt server which was closest to my location and apparently there seems to be some issues with that region so I had to redeploy it using another region and with that if we now copy and visit this URL you can see that we get hello from dally which means that our API is now published great now we can go back to our client source and then search for where we had localhost 8080. if you search for it you can notice that we have it right here in the config but we can also hard code it right here in the response so simply replace the https localhost 8080 with your newly deployed backend URL and with that the front-end side of our application is ready to be deployed as well so what we can do is open up the terminal CD into the client side and then run npm run build this is going to generate an optimized production build of our react application and there we go the build has been created and we can find a new disk folder within the client folder now we can go back to hostinger's Great dashboard where we initially created an account and purchased the hosting and the domain name we can expand it just a bit and you can go to their file manager while it is opening we can also right click this folder and reveal in File Explorer or in finder if you're on Mac that's going to open a folder that looks like this we can go back to hostinger enter the public HTML and delete the default PHP now we can enter this folder and simply drag and drop all of the files from there to our deployment server this is going to take just a moment we can go back to the dashboard and click the domain name that you chose and there we go in just a second our application is deployed and live on the internet we can close all of the currently open tabs and just keep the one tab running which is our application on hostinger's Fast server as you can see we immediately have SSL certificate without having to do any extra work whatsoever and we are ready to continue customizing our application right here on the internet now of course we can keep uploading some different files and that works as you can imagine and let's give AI a shot too let's do give me a red to Green gradient and let's do a full there we go that's working as well it looks like a sports Jersey which means that we are good to go the entire application is now live deployed to the internet you learn 3js as well as how to implement the daily AI great work and thank you so much for coming to the end of this video huge thanks to hostinger for making this video happen and even more thanks to you for improving your web development knowledge and investing in yourself now with this video you invested two hours of your time and you managed to learn 3js and AI integration if you're happy with what you learned today imagine what you can learn with the JS Mastery Pro platform here we have a couple of Great Courses such as filmfire and nft Marketplace but we also have our Flagship bootcamp program the JSM masterclass experience if you want to get personalized mentoring from senior developers myself included you can get that right here the link is going to be down in the description so apply while you can and let's not forget if you want to get some official JS Mastery merch comment down below and we'll make it happen with that said that's gonna be it for today and I'll see you in the next one have a wonderful day foreign [Music]

Channel: JavaScript Mastery

Views: 226,108

Keywords: javascript, javascript mastery, js mastery, master javascript, 3d animation, react three fiber, 3d website, react three fiber tutorial, three js tutorial, three js portfolio, three js react, react three js, 3d react js, three js 3d website, 3d product website, React js three js, react js three js course, three js course, react three fiber course, three js 2023, dalle, dall e 2, dall e 2 react, react js dall e

Id: ZqEa8fTxypQ

Length: 140min 16sec (8416 seconds)

Published: Fri Mar 31 2023