Creating an Animated Phone in Three.js & Blender!

today i'm gonna be showing you how to do this within 3js blender and gsap look at that [Music] what is up everybody gary simon here so today we've got a good one we're stepping back into the world of 3js and if you haven't been following along uh within the past month or two i've been covering a lot of 3js so this is a part of a playlist here on youtube definitely watch the at least the first one before you jump into this i i would recommend watching them all and then getting to this point because today we're going to be hopping into blender which is a free 3d software for creating uh 3d environments and we can mix the two we can build our geometry and our textures and stuff in blender which is what we're going to do and then we're going to import them into the web via 3js and we're going to be able to put them on a web page so just real quickly once again to show you the project here i this phone was completely made here in um blender i'm going to show you how to do that it was a little bit tricky in some areas um and i had to redo a part but that is you know it is what it is i'm not by any means an expert i'm more of a beginner when it comes to blender i used to teach it years ago um but then stepping back into it i'm a newbie especially with uv unwrapping uh and you'll see some hiccups and stuff but eventually i do figure it out and we'll all learn together that way all right if you haven't yet make sure to subscribe and let's get started now wait one moment you're about to watch me work with front-end development techniques now if you're new and you're an aspiring front-end developer you should definitely check out scrimba's front-end developer career path they've recently launched their front-end development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so check out the first link in the description below to get 50 off all right so the first thing we're going to do is we open up the youtube description click on this github link to go to 3js web webpack starter and we'll go to code copy this or just click that button and then go to view terminal and i have visual studio code open here without you know there's no folder open just yet we're gonna hop into my code folder wherever you wanna store your projects we're gonna get clone right click to paste that and we're gonna put it in um just three js awesome phone okay whatever that's gonna be the name of the folder that this all gets put into so cd um 3gs awesome phone and then we went to npm install npm i rather and that is going to install all of the dependencies all right and then after that we are going to hit code wait no no yeah code open that'll just open up in another one so we're we're in this folder now and then we can go to view terminal once again and npm run dev and once this eye gets done running it's going to open up your default browser and this is our default 3js starter i highly recommend if you're new to 3js watching my previous videos in this playlist and that way you can understand what's happening here i'm not going to go into details about the boilerplate that makes all of this work all right so definitely do that so we're going to hop into uh our script.js this is where all of our 3js work is going to be completed we're going to come back to this but for now we're going to switch focuses to blender all right so i already have blender installed and i'm going to load that up and we are ready to rock okay so real quickly if you're brand new to blender this is a massive program with a million features um i'm just going to go over maybe 0.01 of them that would be necessary for you to follow along so navigation controls you need to know how to move around in this space this 3d space so i've changed some of these uh default keyboard shortcuts in in the mouse you know controls um but so i'm not and i don't remember what the default ones are so just go ahead to google there's a million tutorials on like how to pan zoom rotate and you know basically you're able to rotate around the scene for me i have it on my fourth mouse button it might be middle mouse button by default you can try that um you can hold shift in that same um keyboard or not keyboard but mouse i key or is that a key no it's a button um and and you'll be able to pan and then your mouse scroll will you can zoom up those are the three things you need to be able to do essentially so we want to make a phone and a phone is kind of like a cube right except it's in a rectangle format and it has you know we could use this but i don't want to use this um because i want to have like rounded corners so it's in a sense it looks like a rounded rectangle right like for the for the four corners of the phone um and so to do that we're going to hit we're going to make sure this is selected just left click and delete it now we're going to shift a and we're going to add a mesh and you give you have all these default primitives that you can use we just want a plane all right now also when you're interacting with objects you need to know how to move them rotate them and scale them so to rotate them we're going to hit r on our keyboard and you can move it like this or you can constrain it to a specific axis which is x y or z um i can never remember which is which so i'm always experimenting let's do x 90 no i want to do y 90. there we go we want to be facing like this notice how it's in the middle of this i forget what that's called but basically it's the origin point yeah um we want to scale this because obviously a phone is not square so we want to scale it though on the z up and down axis so s for scale and then we're going to constrain it to z there we go and this i'm just going to eyeball it you know we don't have to be 100 accurate this looks like a pretty good width maybe i'm gonna do a little bit more right there and that's our phone see how easy that is okay so now another thing you need to understand is right now you're in different modes you have modes we are in the object mode where you can just select an entire object if you want to get access to the vertices and the edges and the faces as they're called you go to edit mode all right and now we can see these little dots these vertices and right now they're all selected by default and that's good that's what we want i we want to hit a specific keyboard shortcut to round these corners off i think it is ctrl shift b yes it is okay and so now notice how it's doing that in conjunction maybe right around here we're going to use our mouse scroll wheel to round off the edges slightly we'll say right around there and that's good okay so now once we have that we'll also notice these little icons we're in vertex select mode so we can select individual individual vertices we can also select edges so if we select that middle one we can select these edges right here and then also we could select an entire face which this there is a face so with the face selected we can hit e to extrude and it's going to constrain us automatically on the eye i think it's the x-axis and just give yourself the thickness of what you think a phone should be that's pretty thin and i think that that's going to work just fine for us now with that same face selected we're going to hit e again to extrude it once more but this time we're not going to extrude it we're going to scale it so hit s and the reason i'm doing this is because we want a or i personally want in like the the inner portion of the phone um because usually when you have a phone here you can see this you have an edge around here right and and for for most modern smartphones they don't go all the picture doesn't go all the way to the edge all right so right there looks pretty good right there to me um never mind all this craziness that's occurring right there um and then what we can do actually i'm gonna i'm gonna undo that we're gonna extrude that again s there because i think something funky was happening um so now we've uh took taken that in and i want to have a little bit more white space so to speak on the top portion of the screen um and so what i'll do is first we will move it and g is move on off for uh what do you call what is this app blender so g is move um and we want to move it only on the z axis so i'm going to come down here i think right there is good so we have a little bit more white space up here and it's pretty much even all around on the left right and bottom all right so that is good um one thing that we want to do with that face currently selected is we want to split it or separate it into its own object so right now we're only dealing with one object that plane right there we wanted to separate this into its own and that way when it comes to uv unwrapping which i'll explain later we could just deal with that one object itself because we only want the texture to be placed onto this face right here so you sort of separate it make sure the face is selected still we hit p by selection so now we have a plane zero zero one and a plane um if we go back to object mode we can select just this portion and hit don't do this but i'll just show you g and like x you can see now it is separated from there all right so undo that and now at this point if i want to add just a couple buttons on the side and so to do that we'll shift a mesh cube now we're going to scale this down quite a bit we're going to g and then on the y axis move it and then we'll go to g on the z axis and move it up and then we're going to g x s for scale on the x axis now it would be funny if we had a phone with buttons that stuck out that large so we're going to scale that on the y-axis all right that's looking pretty decent and then we're going to scale on the z-axis all right so what's duplicated shift d and then put z because by default when you duplicate something it puts you into move mode so you don't have to hit g already and that's fine right there all right now i'm going to take both of those and we're going to join them into a single group or a single object rather so with both of them selected you hold shift um just like both and we can go ahead and hit i i think it's is it j yeah ctrl j now that puts him in the single and we could take this and just rename it to buttons um eventually we're just going to merge everything together so i guess that doesn't even matter so now we have three different uh objects at this point and now we're going to go to the portion where hey we're done with the modeling let's go ahead to the to the uv unwrapping so let's come up here uv editing just click it and we'll have this little grid that shows up so this is uv unwrapping is one of those things it's difficult um it's a difficult concept to explain but basically we can look at this phone as individuals and we can say hey we know exactly how i you know a a like a user interface like jpeg or png or whatever should look or fit onto this um but the computer doesn't know exactly how to do that and so uv unwrapping is kind of the process by which you achieve that so what we'll do is let me open up or show you adobe xd we're going to use this example right here and i'm going i'll try to remember to include this jpeg that i'm about to create um basically we want to get as large actually no we can um just export this right here so if i go to file export selected i'm going to choose um jpg you could use png but i'm gonna use jpg because i know it works with that i don't want anything funky happening because i haven't done this yet we're gonna change this folder um into code 3js awesome phone static i'm just going to put it there um and then i'm also going to copy this uh url or the the folder location and by the way that was at 2x so it's going to give us two different images and now what i'm going to do is i'm going to open up right here the 2x version so now we can kind of see what's happening over here now in order for us to see it on on this phone we're going to switch over here to viewport shading and then with this object let's go to object mode with this selected make sure that that inner phone face is selected we're going to come over here to materials we're going to hit new and under base color we're going to hit this button and we're going to put in image texture i know this is a lot of steps but if you do this a few times it becomes second nature and we're going to hit open and we're going to paste that in again and we're going to choose phone x now this is the part of the uv unwrapping um that can be frustrating because clearly this is not the correct uh you know manner in which we want things to happen so if we go back to edit mode we can now see these vertices these vertices are represented the representative of the vertices on this portion right here so if i just take these top ones for instance and i hit g and you can still you can move these vertices in the uv mode just like you do in the 3d space um and then hit z or not z it's only x and y that you can do this so just y um and then move these over take these ones at the bottom g um y and then we take all of them hit r now we can rotate it to the correct orientation so r what would it be 90 just hit 90 on your keyboard and then we can take um these top g y left ones g x the right ones g x something's funky funky is happening though g um i see in the preview there's something weird happening i'm not sure if that is going to remain a constant because i did not plan on that let's see here well we'll go ahead and we're going to see if it ends up actually doing that um there's like a distortion that's occurring right through here so if if that's the case i'll have to not good let's see maybe i can back up i'm going to select all i'm just going to rotate from this point all right and then we'll try it again um gx yeah it's still occurring shoot shoot shoot unfortunately it did not do this to me when let's select this and i'm going to right click i i'm going to hit u to unwrap let me have been what i needed to do so now i forgot that step if i guy looks like it still might be doing that i'm not sure um well we'll see now i'm going to take all of them and then rotate them 180. yeah it's still doing that well we'll see if that's something that will not be an issue when we go to do this normally because i could tell it's a guy just going straight through here either way we're going to continue on and just ignore that unreal i'm new to uvn editing unwrapping rather so now we're going to take this phone here we're going to hit new um we're gonna change the base color if you wanted to go light it's perfectly fine or you can go dark actually i think we're just gonna go dark and then we'll take these um we'll make those dark too okay so now at this point assuming it's how you want it to be which it's not because it's doing that annoying thing for me we're going to go to file we're going to export and we're going to use gltf and then we're going to also come down we want a gltf separate because we want the textures and then we're going to select we're going to copy into our static folder and under include we want to select up we didn't do the i didn't select the object yet yeah i forgot i forgot a step let's choose all these all three and then just um ctrl j and that will join them let's do this again export gltf separate and we'll go in here include selected objects and this is all good all right so let's see what ha ends up happening here once we tried to actually uh import this thing okay so now um we have to import a few things uh in order to to make this all work um and i guess the first thing we'll do is we'll get rid of that spinning um little uh what do you call that geomet that sphere thing that ring so we're just going to get rid of this oh no we're going to get rid of this all these three things and then we're also going to get rid of the thing that makes it spin which is down here we'll just uncomment that and now when we save it we don't see it anymore okay now we need a way to actually import that uh gltf file so there's um in the examples there's something called a gltf loader so i'm going to import that so this is the line that you want right here and then we also i from that are going to create a constant called g ltf loader and then new gtf gtl gltf loader right there so i guess under right here our phone whatever we'll go ahead and i get that imported so the first thing that we need to do is to reference our gltf loader and we're going to load and then the location of it so if we go to our static folder we'll see we have um i should have renamed that or named that something better at least than untitled unreal so what we'll do is just put in um untitled.gltf and then in the second parameter we pass in uh gltf and in here we're going to put in um scene.add gltf dot scene all right so that should add it to our scene so it's there but we can't see it because it's black uh in the background's black so what i'm gonna do is a transparent background so i'm going to go to our css which is the style.css we're going to just do background gray for now um actually we'll just go real light and then we're going to come over here and we're going to go to the renderer and we're going to put alpha true hit save and now we can see a side of a phone right now i but we can't we can't move it around yet so we're going to use our dat.gui to move things around so we can see what exactly is happening so in order to do that of course if you don't know what data goi like i mentioned you should watch the other videos first in the series so let's go back to our portion right here and what we'll do is we're going to add um the ability for us to rotate that phone um on the x y and z axis so gui dot add gltf dot scene dot rotation in the first parameter and the first one will be um x and then we'll put a minimum of zero like a max of nine and then we'll replicate that shift alt down x y and z and we'll save so now we can start to move this thing around let's refresh that let's refresh that let's do y and um we can see it is still doing that issue i i'll try to figure it out down the line anyhow now right now it's extremely dark we're also really close up to it so i'm going to take um our camera xyz we're just going to put this at one and let's see here so what did i have that at yeah it's at one okay um and we're also going to scale it down that's the issue so we're also going to come over here and we're going to before we add to the scene we're going to specify gltf dot dot scene.scale.set um we're gonna set on the x y and z it's gonna be 0.3 0.3 0.3 so let's take a look at that all right um we're also going to uh by default change the scene rotation so the y we kind of wanted to be we'll just set it like i've we'll set it at five or so so to do that um this is going to be rotation.set 0 5 or 4.9 let's just put 5. and 0 here oh that's not what we want so that's the helpful utility of uh this this dot gui so it's like somewhere in the neighborhood of like four point i is it that way let's see four point well i guess it's okay it doesn't have to be perfect like 4.7 or so so we'll change this to 4.7 and there we go now why is it so dark and black we can't see it because of the strength of our uh our light now right now we have a point light but i'm gonna change this to an ambient light so i'm just gonna change this ambient light and for the ambient light um we're going to specify a strength of one right here so now we can start to see a little bit better our um our light all right so at this point i'm going to see if i can fix and figure out why this distortion is occurring here uh in the texture itself all right so what i'm going to do i'm just going to i'm going to delete this interface uh so i'm in edit mode i have just the inner portion selected and by the way in order to do that you can just um you just alt and left click on one of the vertices i'm in vertice mode right here vertex mode and select all of them i'm just going to hit delete um let's see we're gonna delete actually we can just select this face and hit delete there we go um now does that still give me that inner portion um yes it does we can also delete that so alt left click in face mode all right so now we just have this empty portion um let me switch back to um let me see here there we go we're a perspective mode now all right so um now i can do is take edges and then just alt left click so we have all the edges and we can create a face out of those and then to do that we hit f and now that gives us a face we're going to do the same thing we did before and hope to god it works e to extrude s to scale and if it does it again i'm going to be quite frustrated um let's gz there we go we moved it down all right and then at this point we're going to separate it so to separate it we hit p by selection all right so now we have that uh let's go to edit mode make sure we have all this selected we're going to write or we're going to hit u rather unwrap that and now let's see let's see here let's usually i thought um it would show up here on this portion oh yeah we'll go ahead yeah that's right we'll go to um over here we have our this selected let's select um there we go well for now i'm just going to delete that oh and edit mode i need to go back to object mode and that's not what we want we want to make sure we select that there we go there now we're gonna see if this works this time so um one thing i'm not certain about is why it's not showing up um the vertices over here oh there they are okay so let's try this again we're going to select all um let's select all of them yep then r 180 no just 90. get these moved back over here g y i guarantee you somebody is um who's much better at blender is thinking what am i doing and hopefully that person or those persons will let us know in the comments about why this uh how this could be so much better it looks like it fixed the issue though there and i can't really tell you why it fixed or how it fixed the issue of course all right so we'll go back to object mode um we will control j i will export this all right let's go back here and see if it actually worked let me get rid of that now i'm not sure if it's using the right eye file here because i know oh was it selected there we go now once i did that it is now working oh thank god that worked okay so what's cool is now we have the ability to transform and move this thing all over the place uh you can add extra lights to highlight other portions of it like you know the um let's see like these buttons and stuff like you can have light shining so you can add point lights and ever and all that other stuff for now that's that's a little bit unnecessary what we'll do now is um i'll show you how we can animate this and make it move upon browser load so let's go ahead and go back here we're going to use gsap for this the green stock animation platform if you haven't yet used uh green sock i have a bunch of videos and even courses on uh green socks so we're going to import gsap from gsap we're going to go to view we're going to go to terminal we're going to create a new terminal and we're going to npm i oops stupid me mpmi gsap rather all right so now we have gsap installed as a dependency and we're going to create real quickly a timeline so let tl equals gsap timeline now we can reference it inside here after scene add and we can put tl actually let's do it after this so tl.2 and we're going to go and specify gltf.c dot rotation and inside of here we'll put in y um and then to determine these values we'll go ahead and work over here so where do we want our animation to start at all right so let's make it come in from the side and be like this so 3.3 that's fine so y um will be 3.3 uh duration will be one oh wait no no no it's gonna start off here um at 3.3 so scene rotations uh let's see right there all right and then where is it going to it's going to be like 4.7 which is what the it was before so now 4.7 let's see if that works refresh there we go let's also do a scale one um so same thing scale we'll put in um we'll make it pretty we'll make it larger so we'll just put scale x um let's put 0.2 because it's at 0.3 so y is going to be 0.2 and z 0.2 duration 1. we'll have this start also with an offset at the same time so we put negative equals one so that should scale it as well look at that all right and then maybe we'll make it move over to the side or something like that so then we'll put tl.2 gltf dot scene.position and we'll put x we'll move it over 0.5 units all right after that all right so you can see what kind of happens there um let's do two more so let's do rotation just copy this rotation will be um y let's do like five point i had my reference code five point uh four with a duration of one let's see what that does wrong way let's see 4.1 so we'll put 4.1 there and then also we'll do a scale just to scale it up slightly tl.2 gltf.scene.scale we'll do x 0.25 y 0.25 and z 0.25 and then duration of 1 and we'll make this offset negative equals 1. all right so now and perhaps this could show you know you could have some text here i think i'll do that but just as my own little exercise um just because we're kind of already quite far into this and so yeah awesome stuff all right i'll hopefully you enjoyed that you learned something new i i i warned you at the beginning it was a little bit iffy in some parts but fortunately i got it to work and i'm not sure why it created the issue in the first place like i mentioned if you're a little bit better at the uv unwrapping process and 3d in general let me know what the issue was uh in the comments i'm very interested personally to know anyhow if you enjoyed that make sure to subscribe and i'll see you soon goodbye [Music]

Channel: DesignCourse

Views: 39,144

Keywords: threejs, threejs blender, blender and threejs, blender threejs, threejs import blender model, phone, gary simon, designcourse, frontend development, 3d websites

Id: 9UukUyXqBCg

Length: 36min 17sec (2177 seconds)

Published: Thu May 13 2021