Build a 3D Portfolio with React Three Fiber - Projects Slider

how to build a professional looking 3D portfolio with the react free fiber part 4. hello today we will finish creating our 3D portfolio by connecting all the blocks we previously created and by adding a cool port for your project slider here's what you'll be able to achieve at the end of those four videos [Music] together [Music] I didn't cover the responsive yet nor I did a loader let me know in the comments if it's something you need and I'll make an extra video that being said let's finish our project let's continue with the same code currently this is what we have what we are going to try to do is to move our character here falling to make him sit in front of the desk and looks like he is typing and moving the mouse the easiest way I found is to re-download the mix demo animation but this time you import the skin as well hit download then back in blender we will import that animation import fbx and the last typing now it's in lighting I will move it into items collection but I will create an empty spot where we will place our character empty plane axis okay and I will move our Armature here I take everything and move it to empty parent object perfect why this empty group because we don't want to modify the model itself but to have a parent container to use it in reactory fiber later so now we can try to move our empty group go to the right okay try to make it sit to the top rotate it positionated with g okay but here it's too high if I play the animation we can see that the mouse is too far and the keyboard might be too big let's position our character perfectly and now we can see the chair is too high so we will fix it but also when we type the correct the keyboard is too big and the mouse is too far so let's adjust this I recommend you to go to top view so you can move it without creating problem on different axes position it the right place and once you're fine okay now we will modify the chair so open the chair edit mode you can go into wireframe view select only the top decrease it to the correct spot have a look if it's nice not in wireframe if you're good looks it's better but maybe our character is wrongly positioned but take the time to do it I I won't do it again because I pre-baked for the tutorial if you're a good file export gltf with the same settings now reload your page and just verify that the chair is smaller and the keyboard and mouse are the good size by the way you need to rebate to have the proper Shadows because of your changes what we will do is run npx gltf jsx with our scene again but we used Dash K and dash K lowercase to keep the empty group because we will need the empty group recreated to position it our character now we can open scene and look for our empty group me it's easy I renamed it from empty to character spot just take this group and copy it now go to experience inside the office or next to the office you can add the group and inside inside that group we will put our Avatar so our Avatar currently is here we will get rid of the previous position go to office and put it here the animation will be by default typing now we can see our character is almost good but I don't know why we have a slight difference but we can adjust it let's try to adjust this position all right but because we moved the chair and items position we need to copy them so go to sin on the side open Office and just for those items let's copy paste other positions so we have the desk we didn't move the desk it's the chair we can copy paste position and rotation the keyboard same and the mouse oh he didn't have positions so oh where is it Mouse the number okay oh yeah yeah right now our character is correctly positioned what we want to do is to make him jump to the next section currently our Avatar is in a group uh containing the office that is already rotated but what we want is to have it more accessible globally we want to put our Avatar here in a new group so to get the position of this new group first we will put the Avatar inside to get the position of this group it can be this because it's relative to the parent what we can do is to add a ref and name it character container about a ref we will create this reference and we will log the position of that group so um const position equal new three Dot vector3 dot current dot get word position so we have the global position in the word but this method take a vector to copy the values in two so it's our temporary position vector what we will do is just log those values but with the syntax we like so position x y and C okay now if we look at the console it's constantly logging the real position let's copy now we can go to our group and paste the position it's better but we still need the rotation so we will do exactly the same here it's a quaternion because it's a rotation we will use get word quaternion to store it into our quaternion reference we will need a vector 3 to to set the rotation so we use set from quaternion and we log it like we did before but we will stop logging the previous one and save now currently it's displaying the rotation we copy it we go to our group rotation equal and we paste it we can comment this code and now it's way better the rotation is correct we still have an alignment issue but we will see later what it is to animate our character position and the only thing we need is to animate this group now so we will use motion dot group and we will use the variance we've seen before to animate our character position we just need to move this group we will use a motion group and the variant that we've seen before to define the variant we need to use animate and the name of the variant as it's a string we will use double double cut and use the section number so it will be the easiest way so the first variance we need will Define here we will use the zero one so it gets back to the original state we will use scale X to 0.9 Y and Z this is why we have this issue because the office container is scaled down but not our character our character so it will position back to the good position just let's have a look now the hands are correctly aligned to what we previously did now when we go to the second section the number one we will set the Y to minus viewport.hate plus press 0.5 X we reset 0 so it's centered and the Z position we want it to be close to us so 7. and the rotation because we need to set it back we set 0 4 both axes now what happens when we change from one to another the final position is good but the animation is way too jumpy and fast instead of the spring jumpy one we have we will use another transition and use a time frame base so just a duration of 0.6 now when we scroll down it's doing it more smoothly and slowly so now for the other sections I found some positions and rotation but of course play with it and find the good ones but if you try you will see that we don't have section 3 and 4 defined the only way it works is by clicking here projects and to contact this is because on our scroll manager what we did is when the section change it animates so we didn't call on Section change when we detect a scroll event so what we can do is not use the global scroll we have but to dynamically calculate it in the experience so it's not related to what happens outside of it to calculate it we will just use scroll from here then copy the code logic so curve section is equal to this so in news from do we have a use frame yes we can sell it here and if curse section is different to section we set section to curve section but we need to Define it so we have const section set section equal to state of zero now what do we have if we scroll down okay that mission is triggered but it doesn't jump then if we go down it moves here nice and then contact me is working but we have two problems the first one is somehow the mesh disappear and if we go two down it detects a section four so we need to fix this for the section 4 it's very easy we can do a simple check if curse section is a spiral to three cross-section is equal to three but about the model issue this is because of Frost from calling our mesh is animated and think is outside of the screen while for us it appears on the screen so we can just disable it even if it's not something good if you have a lot of materials and models but here because we have only one model and we always want to render this model it's not a problem so it's the is easiest and the fastest fix to do so go into Avatar and disable the frost from call here here here on all skin mesh then it will stop to disappear randomly here here and here now let's try to scroll down again our character is always visible we don't have some part of the head that disappear and if we hear don't it's still here section three let's change the animation when the character transitions from one section to another to do so let's store the character animation in a state and set character animation as we start with typing we will set typing by default then we attach it to our Avatar animation equal character animation and what we will do is a use effect to be triggered every time that the section change it will set the character animation to falling so once it change our character changes animation and use set time timeout to change the character animation to the good one I made it simple so either the section is zero then it's typing or it's standing but you can be more creative and do more stuff and then you need to decide the duration of the set timeout I use 600 milliseconds I found it good but still do what you like now if you reload you have the animation then it sits it's a bitter bug but I like this effect so I kept it you can change it if you want then you change the section and you have that nice falling animation time to create our project section that is currently empty in our experience on the bottom of everything we will add a new component we will create named projects then we will need to create this components the component new file projects that jsx export cons projects return a group for now then in experience don't forget to import it let's work on it I created an array of projects what it contains is a title a URL to the website you want to highlight an image it's local to our project a description and some different projects you can add your projects of course don't copy mine as it's only YouTube videos and then go to public folder create a new one named projects and put your images here magic it's here let's go to our project it's the container of each project what we will need is the viewport to position it our group it's in use Theory we already used it before and the best position I found is position Y is minus viewports.8 multiplied by two so it's just because it's the third section then you can slightly position it where you want so I added one to make it a bit on top of this section now in that group we will need to iterate over our projects so we use map we have if each project and an index what we will return is a project component that we will create but first we will wrap it in a motion group because we want to animate it later and a project component we will need to import motion from framer motion 3D be careful of the 3D add a key to the group we will use projects plus index and add the project as a prop so we have the information available in the project component here let's create it the project we get it from the props and we return our component we will use a group and pass the rest of the props if we want to position it individually then inside we will have a mesh to act as a background we will use a plane geometry with those Dimension I used 2.2 and 2. and use a mesh basic material with a black color transparent and an opacity of 0.4 then add an image component from react 3 dry what it will be it will have a scale of 2 1.2 and 1. the URL of the image is Project dot image and set turn mapped to false to avoid color issue we want the real colors and the position of the y-axis to 0.3 so far this is what we have we have all our project fighting here you can see in those black lines fighting with the image we can fix it on the plane set the Z position a little little bit behind so now it's not fighting anymore but we can only see one project we'll fix it later but first let's finish creating one project component we'll use some text the content will be project.title the max wave will be two because it's our container size we'll Encore it on the left for the x-axis and on the top for the y-axis we'll use a font size of 0.2 and set the position to -1 minus 0.4 and 0. we can add two uppercase on the title same for the description we add a microwave the same anchor a little slower slower font size and other position here is what it looks like it seems fine but they are all centered so let's spread them based on their index so go on projects for every project we will set the position based on the index on the x-axis we will use index multiplied by 2.5 for spacing them on the y-axis we will keep a zero and on the z-axis we will use minus three now it's starting to look nice but we will try to animate them and to handle the on click to handle the on click go on the mesh set on click and window dot open project URL and in blank to open in a new tab now if you click on a project it open a new tab with the project now what we want to do is to highlight one project and use a slider but we need to connect this project which is a 3D based with the experience the pro with the interface sorry which is the UI and they are disconnected we could use a context and do the connection but we can use a simple library that will connect it very fastly this Library we will use is from the same Creator as reactory fiber we what we will do is create an atom it's like a use state but Global to our whole project which is perfect open Terminal yarn add jotai and restart the dev server now into our project we will create a public atom so I export it current project atom equal atom so this is a method from jotai what we want is to take the middle element of our project so mat dot floor projects.length divided by two and to have access to it here we will just do current project atom equal use atom of current project atom so now we have the current project atom available here to check if it work we will add highlighted props if the index equal current projects by the way it's not atom here we just want current project now if we go on our project we have access to a new prop highlighted and we can for example change the background opacity so let's have a ref on the background which is this plane ref equal background we also have background opacity which will be a motion value with the default value we had so it's 0.4 in a use effect if highlighted change what we will do is call animate on the background opacity if it's highlighted we will set 0.7 if not 0.4 our default value and in a use frame we'll set background dot current dot the material dot opacity is equal the background opacity.get to get the actual value of our motion value now we can see here that 3D avatar the center item because we have five items is in the black while the other are black transparent before animating it let's go to the interface and create the slider instead of this oopsie we will create a project section here it is I made something very simple with a container centering our items we have a button previous projects in the title with the same style and then the other titles and the next button now we need to code the logic for previous project and next project so first to get the current project and Set current project we will use Atom from current project atom so it's the same but here it's the same connection it's a the global State we have now we will Define the next project method what it will do is Set current project with current project plus one modulo so if it goes too far it will go back to the zero and previous projects Set current projects same modulo thank you now we can see those buttons here we can hit previews and it go back and if we hit next perfect but let's animate it to make it looks cool go back to projects and we will animate it here on the motion group we will add animate and we will conditionally set the x position so what we want is zero that we will add the index minus the current project multiplied by 2.5 then on the y-axis if it's the current project is equal to our index we set 0 or minus 0.1 and for the z-axis the same logic but we want either minus 2 or minus 3. so far what it does is this but we can play further with rotations the rotates on the x-axis if it's the current project we will use 0 or minus math dot Pi on 3. and rotate on the Z current project it will be either 0 or minus 0 1 multiply by Mod Dot pi of course play with the variables and see if you have a better result now we have this when we hit next we have that nice effect with the animation because it's spring animation it's more fluid and realistic than just a timeline based animation if you scroll you have that nice 3d effect because project is on top while the items are in the back so we have real depth now what we will do is when we change a section that the background color change to do so we will create a new component that we will name background export const background equal and as usual we return a group inside let's put a sphere we will want to be inside a sphere so we set a scale it's not too important just not too small not too big so it's visible but like a background and use a mesh basic material we'll need a ref to it to animate it because we are inside that sphere we need to set the style of the basic material to three dot backside and we also want to make it tone mapped to force to really have the color we will decide in HTML let's see first if it works though in our experience we can go maybe on top of it and add the background component but we have an error because I didn't create the material reference now we have a white background because we didn't specify a color so it means it's work we just have to animate it for this we will use jsfp but first we need an object we'll name it color and use ref it will be an object because jsap works on object will set the color me I used B9 bcff but Choose Your Colors the way you like it and we will need the scroll but it's for later now what we will do is create a timeline so timeline equal use arrive this timeline we will instantiate it in a use effect to instantiate it what we do is timeline dot current for accessing the reference is equal to jsfp dot timeline then what we do is we set the different values we want so to color that current because we're working on that object and the object property we want to change it will be the color I chose 2121 so it's a black color and we Define all the other colors so I have this the currently this is the colors we have our timeline is this because the default value which is this so the first one is this then two we have this color then it will be this one and this one this is the seconds of colors our timeline contains so now in each frame we will go to the current score position in the timeline timeline.current dot progress and we'll use data dot scroll dot current so if we are at the end of the scroll it will go to the deepest animation so it's here it will be this color but if we are between those two it will animate it smoothly and find a color between those two and now what we need to do is material.current dot color equal 3 dot color with our new color now we have that blue color which is the first one then you can see it's smoothly transition to this dark color then we have this and this but for the skills we need to set it to a light mode jump to interface it's skills and change the color to white text white here we can use text white more text Gray 100 so it's almost White same here it's fine here text White and takes Gray 100. now we have one section in darkbot but maybe later we can make dark and light mode we are almost done let's fix the contact me button because now we can click on it but it doesn't scroll into the last section what we will need to do is to go to experience and pass down the set section to interface but we could use a jotai to do it it would be easier but we won't do it interface about section set section equal set section so we need to get it from the props and in the about section same here set section and the button is here on click set section and the number is three now I can go hit contact me and I can contact me let's add a final touch here we have a screen we can display a video texture over this screen first let's jump back to blender let's have a look at the screen if we go into edit mode go into a Vertex mod so hit one select the four points that means the screen is selected hit shift d to duplicate it Escape and then separate so now we have a second iMac go back to object mode select the other one and name it screen now if you are on screen go back to edit mode select all the point and hit f it will create a face containing other screen so you can go back to the iMac here and we can delete the screen okay so now we have the screen here we need to do two things the first one is to check if the normal is correct so the texture will be facing us we click here face orientation and we see it's red which is incorrect it's not facing us but backwards so go to edit mode select this face and type normals flip okay now it's blue it's correct okay and okay now if you are in UV editing or go to it edit mode here select it and do you unwrap and here you will have your texture but you can see it's taking half of the texture as we don't want to bother and take the full video hate we will make it full 8. so here go on the vertices click here if it's not the case so here select the first one and the Y you set it to 1. then here you set it to one so now the UV will take the whole texture heat as you don't want to create errors and kill your baking maybe go into shading and here remove the back texture or it will bake it into the whole texture you will make later and remove it from your items you don't want to bake it put it with the stage now if you export it and rerun npx jltf jsx you will have the screen mesh available here copy it and put it in your office because the order has no importance you can put it on top now we will need to create a special material containing the video texture but first we need a video go into public in textures and add a video texture it can be the video of your choice but just be careful it's not too big so it doesn't take a huge loading for nothing I found a vs code video very lightweight let's create our video texture let's name it texture vs code is equal to use video texture and the path is textures vs called dot MP4 and that's almost all what we have to do we just go to our screen instead of the material screen we will Define a new one on the mesh we'll use an edge basic material map is texture vs code and ton mapped to false now you can see we have it working but it's fighting with the previous geometry so let's remove it I know it's in iMac and let's try different one is it this one yes now it's not fighting anymore so now we have our video texture into our screen you can put anything that looks cool as you don't need it anymore you can delete it don't forget because we are done to change the title of your portfolio to your own name portfolio and maybe change the icon here [Music] foreign [Music] [Music] thank you for watching I hope you enjoyed this complete port for your course please hit the like button to help the channel grows and gains visibility based on the comments we'll see if I do an extra episode for the responsive loader dark mode and connecting the phone to a tool to receive or real emails I added YouTube membership to the channel if ever you want to support what I do I will be forever grateful but if you want to continue learning and improving your reactive fiber skills jump to the next video by clicking here

Channel: Wawa Sensei

Views: 17,591

Keywords: react three fiber tutorial, threejs tutorial, threejs portfolio, threejs portfolio tutorial, react three fiber portfolio, react three fiber scroll, threejs framer motion, react three fiber framer motion, react three fiber scroll animation, react three fiber tailwind, react three fiber, three js tutorial, three js, react three fiber video texture, threejs video texture, 3D portfolio, 3D portfolio tutorial, 3D slider threejs, 3D slider css, three js react

Id: LooODvrYXzE

Length: 38min 16sec (2296 seconds)

Published: Fri Jun 16 2023