3D Web Development with Blender and Three.js – Create a Cozy Café Portfolio

[00:00] Take your creative web development to [00:02] the next level by building a stunning [00:05] interactive 3D cozy cafe portfolio from [00:08] scratch using Blender and 3JS. This [00:12] course covers professional workflows [00:14] covering everything from subdivision [00:17] modeling and texture painting to [00:20] implementing a robust singleton [00:22] architecture in your code. You will [00:25] explore cutting edge techniques like AI [00:27] assisted scripting for Blender, TSL [00:30] shaders for dynamic lighting, and mobile [00:32] responsive raycasting to create a truly [00:36] immersive user experience. By the end of [00:38] this tutorial, you'll be able to [00:40] transform your unique ideas into [00:42] high-performance play ready 3D web [00:45] projects. Andrew Wan developed this [00:48] course. Hello everyone. Welcome back to [00:50] another video. So, I'm just going to [00:52] demonstrate it a little bit and then [00:53] talk about some of the things we'll [00:54] cover. So, we'll cover the basic [00:56] interaction over here where I scroll and [00:59] there's like some things animating as I [01:01] scroll. Also, hover and pop up a Gab [01:04] animation model over here. And these [01:06] just go to external links and things [01:08] like that. There are a lot of other [01:10] features I don't cover step by step, but [01:13] I do talk about them like this slider [01:15] over here and converting between scenes [01:16] as well as night and dark mode and some [01:19] of the interactions and how I set that [01:21] up. So, we're going to model a single [01:23] cafe together. And by the end, you'll [01:26] know how to model everything. Everything [01:28] else is just a combination of the same [01:30] techniques. And yeah, that's pretty much [01:32] it. So, without further ado, let's get [01:35] straight into the video. Of course, all [01:38] source files are here. Blender files [01:39] here. You don't need to model if you [01:41] don't want to model. And all the credits [01:42] and everything are here as well. So, [01:44] there are some prerequisites. You can [01:45] read them here. I will say if you don't [01:47] have any knowledge of 3GS, you can watch [01:50] the intro course that is also on the [01:51] free code camp channel as well as my own [01:53] channel. And I go about I would say I go [01:56] about two or three times faster in this [01:59] video compared to the intro course. So, [02:00] if you ever find anything too difficult [02:02] in this video, definitely give the intro [02:05] course a little bit of a watch. I I go [02:07] significantly slower in there, but it'll [02:09] give you all the prerequisites you need [02:10] to watch this video. So, this course is [02:13] a completely standalone course, but I do [02:15] consider it quote unquote part two [02:17] because I kind of want to build upon [02:19] this sort of project over here from the [02:21] intro course. But as long as you have [02:22] these prerequisites, it's fine just to [02:24] watch this one. You don't have to watch [02:26] this one at all. If you ever have any [02:28] issues, come join and meet me on Discord [02:30] or my just feel free to email me as [02:33] well. So, in the first series of this [02:36] intro course, we worked primarily with [02:39] hard surface models that are very, very [02:41] blocky and have like sharp edges. Now, [02:43] all of those techniques definitely carry [02:45] over and we're going to keep a lot of [02:47] them in this video, but we're also going [02:49] to add what we also called subdeling or [02:52] subdivision modeling, which is basically [02:54] the idea. You kind of just model like [02:56] you would model one of these, but [02:58] instead you add a subdivision surface [03:00] modifier that will basically cut up your [03:02] mesh into a bunch of other squares. And [03:05] because you have so much more topology [03:07] or so many more squares to work from, it [03:09] gives it a sort of bendy and wavy shape [03:11] that you can play around with. Now, that [03:13] might sound a little bit scary, but [03:14] don't worry about it. I'll go slow and [03:16] if you don't get anything, feel free to [03:18] reach out anytime. Okay, so I just want [03:19] to talk a little bit briefly about idea [03:21] conception and analyzing models to help [03:24] you kind of get unstuck in that like low [03:26] motivation point and like what am I [03:28] doing sort of thing going online? Uh [03:30] this probably will make sense in [03:31] retrospect more so than now, but I feel [03:33] like little bits and pieces would pick [03:35] up along the way. So, when you're [03:37] looking at models online and you like, [03:40] for example, on Sketch Fab, which might [03:42] be Fab in the future, if you come over [03:43] to model inspector and you go into like [03:46] wireframe, what you'll actually notice, [03:48] it looks really intimidating, is that [03:50] there's a lot of different patterns [03:51] here. You can see that if I look at this [03:54] sort of object over here, it actually [03:56] does look like it has the same exact [03:58] pattern as this head over here. There's [04:01] like this kind of wavy corner to each of [04:03] them. like here. This it it's more [04:06] stretched out, but you can also see kind [04:08] of like a wavy corner here. And then [04:10] same with this one. It has less squares, [04:11] but there's also kind of like this wavy [04:13] corner over here. And that's because all [04:16] of them are actually just cubes. Same [04:18] with this one over here. This is also [04:20] just a cube with a subdivision surface [04:22] modifier on it. And then over time when [04:24] you go on to other things, you'll see [04:27] these patterns often everywhere, even on [04:29] more quoteunquote complicated models. So [04:31] if we go to wireframe here, you can see [04:33] even on the bottom over here, it kind of [04:34] looks like a subdivided cube almost. The [04:36] artist added some extra topology, of [04:38] course, but but the whole idea is you'll [04:40] see these patterns a lot. So I guarantee [04:43] you probably this mouse or something. [04:44] Well, yeah, here you can see it's a [04:46] stretched out subdivided cube. And I [04:48] don't think these Yeah, these are not [04:49] subdivided cubes, but again, you don't [04:51] always have to use subdivided cubes. You [04:53] could totally make this exact same exact [04:55] shape with a subdivided cube, but but [04:56] what the artist did here is also [04:58] perfectly fine. So when it comes to idea [05:00] generation for a particular style, I try [05:03] to look for everything that is very [05:04] related to that specific sort of style [05:07] and then also other ones that maybe I [05:09] could potentially bring in from another [05:11] style into this style just to make it a [05:13] little bit more unique and tangential. [05:16] So this one is probably the most biggest [05:18] outlier out of the ones that I'm showing [05:20] over here. Um, I'm not sure why I opened [05:22] this other than just to show the [05:23] subdoming, but anyway, when I look at [05:26] references for a particular style, I try [05:28] and analyze the different variations and [05:30] moods and commonalities between all of [05:33] them. So, like what are some of the [05:35] things common within the style? It's [05:37] like the way they handle outlines, which [05:38] I'll talk in a little bit later in the [05:40] video. You can see all the outlines are [05:42] handled in very similar ways across the [05:45] different styles. And then also the [05:47] proportions of emotions that are trying [05:49] to convey in each single one. So let's [05:51] say I want to analyze this scene over [05:55] here. I'd probably give this like a [05:56] whimsical score of like um relative to [06:00] the other ones probably like 80 out of [06:02] 100. And then humor. There's definitely [06:05] some sense of humor over here in the [06:07] fantasy realm of like having oranges in [06:09] your backpack. So, I would probably give [06:11] humor like 50. It's not like the main [06:13] driver. I feel like whimsical is like [06:15] the main driver here. But humor is [06:16] definitely up there for sure. It's not [06:18] like an out of your belly laughs sort of [06:20] thing. It's kind of just like chuckle [06:21] like wow that's really cool. So, this [06:23] one if I had to give whimsical, I think [06:25] whimsical would probably be like a 70 [06:28] out of 100. And then humor is probably [06:30] also like a maybe like a 80 out of 100. [06:33] Same thing with Oh, well, I'm going to [06:35] skip this style. This one over here. I [06:37] feel like um we could probably introduce [06:40] like a fantasy component, which is also [06:42] kind of whimsical, but I I'd consider it [06:44] different. So, this is probably like [06:45] fantasy relative to other ones, not like [06:48] in general or whatever. And of course, [06:50] these are just so arbitrary to what I [06:52] feel and what I think about them. You'll [06:55] have your own internal mode of working. [06:56] And that's exactly how you develop, you [06:59] know, your own unique style. So fantasy, [07:02] a little bit of whimsicalness cuz her [07:04] mouth looks open like, "Wow, I'm [07:06] discovering a fox for the first time." I [07:08] think it's just a bad angle where you [07:09] can't tell on this side, but it [07:12] definitely gives off that vibe. So like [07:13] intrigue, familiarity, whimsical, a [07:16] little bit of humor probably. I I [07:18] wouldn't put that front forward, but the [07:20] style itself is also kind of like humor, [07:22] but it's not like I want to make you [07:24] laugh humor. It's more just like, "Wow, [07:26] that's kind of cool." Um, if you look at [07:28] it sort of thing. And then this one is [07:30] very very similar to this one as well. [07:32] So I'd probably give a very similar [07:34] score here. Uh these two. Anyway, once [07:37] you have like your proportional [07:39] breakdown of what you feel and your [07:41] emotions of each scene, you can use that [07:43] to shape the way that you want to create [07:45] your your yours. You can use that [07:47] proportional breakdown and change those [07:49] values and shape your modeling based off [07:52] of the values that you start. So, if I [07:54] want to start with like 80 humor, 80 out [07:57] of 100 humor, and then maybe like 20% [08:01] absurdity, [08:03] and again, it doesn't matter if they go [08:05] overflow or whatever, like 70% [08:07] whimsical, like just have your emotional [08:10] breakdown of what you want someone to [08:12] feel. And then work your way up to all [08:14] those design patterns that you see in [08:17] other people's work that can help you [08:18] shape your emotions that you want to [08:20] convey in your artwork. And this is kind [08:22] of just like how I approach every single [08:24] one of my projects intuitively. Now, [08:26] this is a very intuitive process. So, [08:29] you might not be able to articulate a [08:31] lot of your decisions verbally, but over [08:33] time, the more you do it and depending [08:36] on how strong you are in a particular [08:37] emotion or particular style, you just [08:40] develop the ability to articulate it [08:42] over time. Other commonalities in design [08:44] decisions you'll notice is a lot of [08:46] stars and particles in all them. So, [08:49] here you can see stars over here. Well, [08:51] this one doesn't have one. Um, but these [08:53] sort of bubbles in the bushes kind of [08:55] act like those background stars and it [08:58] already has a lot of detail, so it's [08:59] probably not really needed for the [09:01] composition. Here you can see these dots [09:02] are kind of like the background. And [09:04] same with this one. We also have like [09:05] pluses and a lot of background elements [09:08] over here and then circles as well. So [09:11] that's a commonality to look out for as [09:13] well. And also if you go to base color, [09:16] you'll notice that most of these are [09:17] hand painted. Yeah, this is also hand [09:19] painted. Same thing. Probably this one [09:21] is probably also hand painted. Yeah, [09:23] also hand painted. So, all the [09:25] highlights, all the lighting is hand [09:26] painted. If you want to hand paint and [09:29] paint the highlights, like for the hair [09:30] and everything, you can totally do that, [09:32] but I'm not going to be doing too much [09:34] of that in this video. But yeah, now [09:35] that we got a good starting point, we [09:36] got our emotional breakdown. And [09:38] actually, whimsical is probably going to [09:39] be like 10% and then I would probably [09:41] also put satire for this video. Uh, I [09:44] think satire is probably at 70%. So, we [09:47] got my emotional breakdown and we got [09:50] our references and inspirations. So, we [09:53] could probably start from there. So, I'm [09:55] in a new Blender file here. On the left, [09:57] you'll see all the hotkeys that I'm [09:59] using. Well, not all of them show there. [10:01] So, I'll try and speak out loud what I'm [10:03] doing and thinking at the same time, but [10:05] if I ever miss something, just feel free [10:07] to drop a comment and I'll get back to [10:08] you or send me an email, reach out, [10:10] however. But you might be able to pick [10:12] it up on the bottom left over here. [10:14] Okay. Okay. So, the first thing I want [10:15] to do is just clean up the viewport. So, [10:17] there's a lot of ways. You can come to [10:18] the divisor here, hit rightclick, and [10:20] you can see you have a bunch of options [10:22] over here. You can also hover over and [10:24] hit F3 for the global menu and search [10:26] for area. And then you have a lot of [10:27] options here like close area and so on [10:29] so forth. Now, you can also do that like [10:31] vertical split, so on so forth. Right [10:33] click. You can also do the typical way, [10:35] which is get come to the corner, wait [10:36] for the the crosshairs, and then just [10:38] drag over there like so. That way, it'll [10:41] just replace that area and so on and so [10:43] forth. So, lot of lots of options there [10:45] to create the viewport that you want in [10:48] Blender. So, there's a running joke to [10:50] delete the cube and just read the cube, [10:52] but we're not going to do that. We're [10:54] just going to delete the cube and start [10:56] with a plane. And I'll show you why I [10:57] like to typically start with a plane. [10:59] And the reason for that is because the [11:01] origin point is at the bottom. That way, [11:03] whenever I scale it, I don't have to [11:05] worry about it like going through the [11:07] floor and things like that. You can [11:09] always adjust the origin point, but it's [11:11] just faster just to start with a plane. [11:12] So, I'm going to start with a plane just [11:14] like so. And we will be adjusting the [11:16] origin point a lot. So, don't worry [11:17] about that. And now I'm going to go into [11:19] edit mode. By the way, I have the extra [11:21] tab menu items. If you don't have that, [11:23] you can come over to edit preferences [11:25] over here. Go into key map and do tab [11:28] for pi menu. You'll definitely get used [11:30] to it. If you are on regular Blender, [11:32] you'll just hit tab to go back between [11:34] edit and object. Or you can come up here [11:37] to change modes as well. But I like to [11:39] use the pi menu here. So, I'm going to [11:41] go in edit mode. Hit A to select [11:43] everything. Hit two to go into edge [11:45] select. And I'm just going to hit E to [11:47] extrude upwards. And it'll lock by [11:49] default on the Z-axis, which is really [11:51] nice. And now you can see when I scale, [11:52] it's going to scale from the bottom [11:53] there. Oh, and sorry, I should just [11:55] clarify. We didn't have to be in edge [11:57] select. I was just thinking in terms of [11:59] edges, but if you're in vertex or face, [12:01] it would also work as well because we're [12:02] selecting all of them. Now, [12:04] traditionally, when we go for a cutout, [12:06] people like to use the boolean modifier. [12:09] So, if I shift right click to move my [12:11] cursor on the front over here and then [12:13] shift A and start typing for a cube and [12:16] add a cube and then scale it, you know, [12:18] wherever I want to cut out my cafe. You [12:21] do you for sure though. And then I come [12:23] over onto my original body object over [12:26] here. Come over here and add a boolean [12:28] modifier. So, we can search for a [12:30] boolean modifier. Sorry, not a boolean [12:32] modifier. Use the eyedropper tool over [12:35] here and select our cutout cube. Now [12:37] typically what happens when you use a [12:39] boolean modifier is this. This will show [12:41] a wireframe. But since it's not we can [12:44] go into object over here. We can come [12:46] into viewport display and instead of [12:48] textured we can change this to bounds. [12:51] And now you can see that this is [12:53] typically the traditional way to make a [12:56] cutout. Now this is perfectly fine for a [12:59] lot of use cases especially in simple [13:01] modeling. I'm just going to duplicate it [13:03] and apply the modifier just to show you. [13:05] But the reason I don't like doing that [13:06] is because it creates a little bit of [13:09] what we call bad topology. It's nothing [13:11] you really have to concern when you're [13:13] first starting out, especially with [13:14] simple models, but it just looks a [13:16] little bit worse than keeping everything [13:18] as quads or having four vertices. So, [13:21] let me show you some other ways, some [13:23] really other common ways to create that [13:25] as well. So, I'm going to select this [13:27] cube. I'm going to delete it. The other [13:29] way is just to select the face in edit [13:31] mode, hit I to insert and hit E to [13:34] extrude it in. If you ever have like [13:36] weird proportions, it's likely because [13:38] the scale is wrong. So, we can hit N, [13:40] come to item, and here you can see the [13:42] scale is a little bit off. So, we can [13:44] control A, apply our scale, and now do [13:46] inset. And now you can see it's going to [13:47] be even on each side. And then we can [13:49] just scale that down, and then hit E and [13:51] extrude it in. So, this is going to be [13:53] perfectly fine for us as well. It really [13:55] depends on your needs. The way I'm going [13:58] to do it is actually with loop cuts. So, [14:00] we can use control. It might be command [14:02] R on Mac. And I'm just going to add two [14:05] loop cuts. And then I'm just going to [14:06] rightclick to cancel movement. And I'm [14:08] going to hit S Y. And it'll just scale [14:10] evenly across however wide that I want [14:14] them. And I'm going to do that for the [14:16] same on the Z-axis. So, control R, [14:19] middle mouse button up, or you can just [14:21] hit two on your keyboard, right click [14:23] the movement to cancel the movement, and [14:25] then S and just move it up. Just like [14:27] so. And then actually, I think this one [14:29] I'm going to hold alt to select that [14:30] whole loop right there. And I'm just [14:32] going to GZ and move that one maybe [14:35] probably about right there. And of [14:36] course, we can always just shift alt to [14:39] select both these. S Y and keep [14:40] adjusting until we need to finish. And [14:43] instead of deleting this, I'm going to [14:44] hit P and separate by selection. Just so [14:48] we might be able to use this later. I'm [14:50] not sure, but for now, we can keep it [14:52] there. Let's just keep organized. So, [14:54] I'm going to hit M and create a new [14:56] collection. And I'm going to call that [14:57] hidden. I'm going to create that. And [14:59] I'm just going to hit this check mark [15:01] over here. So, we no longer see it. So, [15:03] now we have the start of our cutout [15:05] cafe. And here you can see we have a [15:07] little bit cleaner topology here with [15:09] all quads. Now, as we take a look at [15:11] some cafes over here, they typically [15:13] have like some of these overhangs over [15:16] here. So, there's quite a few ways to [15:18] make those. I'm going to show you some [15:19] of the two easiest ways for beginners to [15:22] make those. So the first one is adjust [15:24] to create a plane from itself. So we can [15:26] actually start from this one right over [15:28] here. So we can do E and we can lock it [15:31] on the X-axis. If you want to go to an [15:33] ortho or orthographic view like the side [15:35] view if that helps, you can totally do [15:37] that as well. Make sure you're in [15:39] wireframe. So you also select the one in [15:41] the back. If you don't like wireframe, [15:43] you can also do alt z to enter x-ray [15:45] mode, which you can also come up here to [15:47] do as well. And this way we can also [15:49] select all them. If for any reason you [15:51] ever see it like acting like this, it [15:53] means you probably didn't select the one [15:54] in the back or you select the one in [15:56] back but not the one in the front. So [15:58] just be aware of that. Then we can [16:00] select it and we can just bring it down [16:02] just like so. And then we can select [16:04] this face and face select and let's just [16:06] P separate that by selection so it [16:08] becomes its own object. Go into edit [16:10] mode. Add loop cuts as many as you want. [16:13] Maybe something like so. And I'm going [16:16] to right click and just cancel the [16:18] movement. If you ever need to adjust it [16:19] after, you can come over to this menu [16:21] over here and adjust the number of cuts [16:24] here as well. So, that is really [16:26] dependent on you. And I forgot to get [16:28] rid of the modifiers. So, we can just [16:30] get rid of the modifiers right now. [16:33] Okay. Let's turn off X-ray mode for a [16:35] little bit. And let's just go into edit [16:36] mode here. And what I'm going to do is [16:37] hit two to go into edge select. Select [16:40] this over here. Hold control or command [16:42] and select this. And it'll pick the [16:44] shortest path between your two [16:46] selections. If you want to, you can also [16:47] do vertex select here and just box [16:50] select just like so. It'll do the same [16:52] exact thing if you wanted to. And now we [16:53] can just hit E and extrude and lock it [16:55] down on the Z-axis. It might be a little [16:57] bit offset IRL. So, we could probably do [17:00] like GX or something just like so. Now, [17:02] still in edit mode and in vertex select, [17:04] we can come up to select over here and [17:07] we can do checker deselect. And it'll [17:09] just select every other one. And then we [17:11] can do GZ and just move it up just like [17:13] so. And there we have the beginning of [17:14] our cafe hood. Of course, it looks a [17:16] little bit jaggedy for the style that I [17:18] want to go for. So, we can add a [17:20] subdivision surface modifier here, like [17:22] so. And we can crank that up to two, but [17:24] there's a faster way to do that. You can [17:26] just do control 2 or control 1, two, or [17:30] however many you want to adjust the [17:32] amount of subdivision here. I'm going to [17:34] do for two for now. And if we ever need [17:36] to change that, we can change that. Now, [17:37] one issue here though is that it looks a [17:40] little bit off. Now, the hard edges are [17:42] kind of bending and it doesn't really [17:44] work. Well, there's quite a few [17:46] solutions to that. So, if we go into [17:48] edit mode and I select this edge over [17:49] here, hold control, select this edge [17:51] over here, and do Ctrl +B to bevel it, [17:54] and use my middle mouse button to add a [17:56] little bit of bevel like so. You can see [17:59] that kind of resolves this portion over [18:01] here. But what about this portion over [18:03] here? Well, we can actually do this [18:05] thing called called creasing. If I hit N [18:07] and come over to crease, you can see [18:09] that's over there. So, I'll do control [18:11] and same thing over there. Now the hot [18:13] key for crease is shift E. Now it's not [18:15] doing anything because we need to crease [18:17] some other edges along there. So we will [18:20] just select these two and do shift E and [18:23] just move our mouse button to the right. [18:25] And now you can see that we have this [18:27] perfectly flat. So similarly if I undo [18:30] all of that and come back here. Let's [18:33] undo the bevel as well. Like so. If I do [18:36] shift E and crease over here, you can [18:38] see it's going to do the same exact [18:41] thing over here. So definitely multiple [18:43] ways to handle that. You can also [18:45] totally add manually bracing or guard [18:47] loops or edge loops. There's a lot of [18:49] terms for these. And basically you just [18:51] control R and slide it along the verticy [18:54] and just bring it up like so. Same thing [18:56] here. And you just bring it up like so. [19:00] You might want one here as well just to [19:02] adjust it like so. And that's another [19:04] way to do it. You can totally manually [19:05] play around with it. The shortcut to [19:07] dissolve one is Ctrl + X alt controll X [19:10] alt controll X just like so alt just [19:13] selects the entire loop right so this is [19:15] just a line but it does effectively the [19:17] same thing crl x so I could have just [19:19] been using alt instead of control as [19:20] well but I just wanted to show the [19:22] shortest path selection as well okay [19:24] before moving on I just want to show you [19:25] the other really common way to do it and [19:27] that's with an array modifier so I'm [19:29] going to hit H to temporarily hide this [19:31] and I'm going to do the same thing that [19:33] we did last time e X GZ 3 select P [19:38] separated by selection and I'm just [19:39] going to control R maybe type 12. I [19:41] don't remember what I did last time. [19:42] Right click cancel movement. If you ever [19:44] click and can't find that menu back, you [19:46] can actually hit F9 to get it back. But [19:48] that's only if you never did anything [19:50] else. Otherwise, it won't show up [19:51] anymore. So, click hit F9. You can see [19:54] the menu comes right back where your [19:56] cursor is. We can just select all these [19:58] in face select control shortest path and [20:00] delete those with X. And now we're just [20:03] left with this over here. And we can [20:05] just give it an array modifier. This is [20:07] going to be in the Y-axis. And we can [20:10] get rid of the Z-axis. And then we can [20:12] just bring this up. Or we can come over [20:14] here in Blender 5.0 and just drag that [20:16] up there to 13, I guess. And that's like [20:19] So just select this one, E, scale it [20:21] down like so. Maybe S Y. Do something a [20:24] little cool like that. Maybe add a like [20:26] a loop cut here with control R and G and [20:29] adjust it like so. Whoops. Sorry. I [20:31] should probably select this one too and [20:32] do SY or something like that. And this [20:35] is another perfectly valid way to do it. [20:38] And then if you control 2 to add a [20:39] subdivision surface modifier. Yeah, you [20:42] probably want to shift E and shear those [20:44] up just a little bit. And for the style [20:45] that we're going for, I think it's [20:46] actually okay if you have a little bit [20:48] of overlap. I don't think there will be [20:50] any Z fighting issues, but if there are, [20:52] you can always resolve that later. But [20:55] again, that really depends on you. But [20:57] you can also actually just only apply [20:59] subdivision to this over here. So we can [21:02] get rid of the crease and everything. [21:04] And we can just select these, hit P, [21:06] separate by selection. And then for [21:08] these, we can get rid of the subdivision [21:10] over. And then over here we can do the [21:11] shift E crease just like so. And now we [21:14] have this separate one from this over [21:16] here. Pretty similar. So here we can do [21:18] like, you know, sy and so on so forth. [21:21] So we kind of have some that's [21:22] independent of this one. So, if you like [21:25] that method, you can totally do that as [21:26] well. I'm actually going to delete that [21:28] and go back to our original method. And [21:31] here, I'm going to do the same thing. [21:32] I'm going to shift E just one more time [21:35] just to do that. And then here, I think [21:37] I'm going to manually add some bracing [21:38] edge loops rather than a bevel. I'm [21:41] essentially beveling here, but I'm just [21:43] going to manually place them just so now [21:45] typically it's not very one-dimensional [21:47] like this. It's a little bit spread out [21:48] just for a little bit realism. So, what [21:50] we can do, I think, is add some a little [21:53] bit more loop cuts over here. I don't [21:54] know, maybe about four. Again, it's [21:56] really up to you. I encourage you to [21:59] explore on your own. And I might just go [22:01] into front orthographic view. You can [22:02] click here. You can also see the [22:04] shortcut there, control numpad 3 if you [22:06] have a numpad. And maybe I'm just going [22:08] to do like SY. I'm going to turn on [22:10] proportional editing and choose smooth, [22:12] I think. And then let's do SY. And I'm [22:15] going to use my middle mouse button just [22:17] to adjust it a little bit. So again, [22:19] it's really up to you. And that'll just [22:21] change your sphere of influence, like [22:23] how much it impacts your other weird [22:24] sissies. I'm probably going to adjust it [22:26] off camera as well. So, but now we have [22:28] a little bit just like so. And if it [22:30] looks a little bit odd, you know, always [22:32] undo it. And S Y. You might have to [22:35] increase your include increase your [22:38] sphere of influence just a little bit. [22:39] Just like so. Yeah. And that looks a [22:41] little bit more better. It's just a [22:43] little bit expanded outwards. Cool. Now, [22:46] one issue I have with this, if we go [22:47] into side view, it's really easily to be [22:50] edible. Sorry. Let me go into wireframe [22:52] or X-ray. You can see we can edit it [22:54] pretty well. So, it's not terrible. Now, [22:56] one thing I don't like about this though [22:58] is when I scale it, it's going to scale [23:00] from the original origin point that it [23:02] was separate from. So, we can fix that [23:05] by going into edit mode. And I think [23:07] this is the center. So, we can just [23:09] select this shift S cursor to selected. [23:11] We have to go back into object mode. And [23:13] we can come over to object set origin [23:16] origin to 3D cursor. And now if I go [23:18] into side view and I scale this, you can [23:20] see that it's going to scale from there. [23:22] And if I hit R, it's going to rotate [23:24] from there as well. So that's just [23:26] really nice way of adjusting that for [23:28] later. Oh, I just remembered one thing [23:30] before I move on. I want to talk about [23:31] that array method one more time because [23:33] there's something that is I think new in [23:35] Blender 5.0. So let me just quickly [23:38] duplicate this P separate by selection. [23:40] You don't have to go back into object [23:42] mode and go into edit mode to go into [23:44] edit mode for the next object. You can [23:46] just hit alt Q and you can see now I'm [23:48] in edit mode for my separate object over [23:50] here. So I can just do alt Q to keep [23:53] going back and forth just like that. [23:55] Anyway, this looks a little bit [23:56] distorted. That is beyond the point. We [23:58] can also just hit O to get rid of [24:00] proportional editing rather than [24:02] clicking up there. I'm just going to [24:04] make it a little bit more even. Um but [24:06] let's also just hit H to hide this. And [24:09] basically when you have an array here [24:12] and let me just do that again. Sorry. [24:14] Instead of having to crease the edge to [24:17] make them work, you can actually come [24:18] over here and see turn on this merge [24:21] thing over here. So now when there are [24:23] overlapping, you don't have to worry [24:25] that when you apply it's going to be [24:28] okay. So let me just come over here and [24:31] change all the creases to zero except [24:33] this one. I think this one we probably [24:35] still need to crease there. But yeah, if [24:37] we change this up to, I don't know, [24:38] maybe like 05, [24:40] you know, the edges are going to merge [24:42] and it's going to fill up that gap. That [24:44] way, you won't have to worry about Z [24:45] fighting anytime later. So, when I apply [24:47] that array, you can see, oh, I probably [24:50] should apply the subdivision first. [24:52] Sorry, I'm going to apply subdivision [24:54] and then array, you can see that it's [24:56] pretty much what we had originally and [24:59] there's nothing overlapping here. They [25:01] all are shared there. So, that's just [25:03] something I want to mention about the [25:06] array method, which again, if you want [25:07] to go for, you can totally go for it as [25:09] well. Okay, so I'm going to go back to [25:11] the other one. I'm going to hit F2, and [25:13] I'm just going to call this roof cover. [25:15] Uh, I don't know what to actually call [25:16] that. And if you ever want to use this [25:18] method, you can totally do that as well. [25:20] So, you know, don't don't definitely [25:21] don't limit yourself at all. I'm just [25:24] going to drag that up there. And I'm [25:26] going to move this one into hidden if [25:27] you ever want to use this one. Cool. And [25:30] then let's reshow our original one. [25:32] Sweet. Let's be a little bit more [25:34] organized. Let's select our camera and [25:36] hold control to select our point light. [25:38] Let's hit M and create a new collection [25:40] here called LCA for lights camera [25:42] action. You know what the drill is. And [25:44] let's just hide that for now. Now, if [25:45] you ever want to adjust these, don't [25:47] hesitate to adjust both of them at the [25:50] same exact time. You can select both of [25:52] them with a shift, go into edit mode, [25:54] like a side view here, wireframe, and [25:56] just select all them again. or go into [25:59] Alt Z for X-ray. Make sure you're in [26:01] solid view. If you go into wireframe [26:03] with X-ray, it's going to show a little [26:04] bit of a glitch here. But other than [26:07] that, it doesn't really matter. Just [26:08] make sure you select everything. And [26:10] then now you can just like GZ and just [26:12] move it up just like so. And hey, if you [26:13] got a delete, you got to delete. Like [26:15] let's say you want to delete something [26:16] like so, you can make sure it's like so. [26:19] Just make sure to control and deselect [26:21] those back ones just like so. And then I [26:23] think I also want to delete this. Maybe [26:24] that's a little bit too much. And we can [26:25] just delete those vertices. Select this [26:28] and we can do gy and move it over here. [26:31] Now I don't like eyeballing here. So [26:33] what I'm going to do is come over here [26:35] and turn on snapping. So if I turn on [26:38] snapping here, you can see we have this [26:39] thing called vertex snapping. So I'm [26:40] going to hit vertex just there. Go into [26:42] edit mode. And if I do gy and with this [26:45] on, you can see that when I hover over [26:47] the other vertex, it's just going to [26:48] snap directly to that vertex along the [26:51] y-axis. And it's just going to lock it [26:53] directly there. Super super cool. Now, [26:55] the hotkey for this to toggle it on and [26:57] off is shift tab. You can see it [26:58] toggling it on and off. But when it's [27:01] off, you actually don't have to hit [27:03] shift tab. You can just do G Y and then [27:06] hold control on your keyboard and it [27:08] will toggle it on as if it was off. Even [27:10] though it doesn't show that it's on, [27:11] it's actually activating right now. So, [27:13] it might be command on Mac, but that is [27:14] the shortcut there. So, now we just made [27:17] our cafe a little bit smaller. But [27:19] again, that is also totally up to you. [27:21] So, I think we can just have fun a [27:23] little bit with like the composition. [27:24] And so you already know what I'm going [27:25] to do. Probably add some loop cuts over [27:27] here. Maybe another one over here just [27:29] so we have like a little bit of a [27:31] window. Something like that. Again, I'm [27:33] going to P separated by selection. And I [27:36] don't want to I'm going to move that [27:37] into a hidden collection. Just hit M to [27:39] quickly open that. That way in case we [27:41] ever need it, we can always come back. [27:43] Then maybe I'll come over over here and [27:46] instead of selecting a corner and [27:48] control shift and select the other [27:49] corner, which is a really quick way to [27:51] select all the faces in between. Or you [27:54] could go into top view and box select [27:55] which would also do the same thing. You [27:57] can also just select a face shiftG and [28:00] select slimmer co-planer and all the [28:02] faces that are on the same level will [28:05] also be selected. So you have multiple [28:07] ways. Again that is a box select and [28:10] then hold shift just to select the rest [28:12] of them. Select one corner control shift [28:14] to select the others or select one. [28:16] Shift G co-planer just like that. Shift [28:18] GC if you want to do the hockey way. And [28:20] then maybe I'll just extrude upwards. I [28:22] think we can hit alt to select this. Hit [28:24] alt e to extrude along normals. Hit s to [28:27] make sure it scales evenly. If you need [28:29] to reply your scale, make sure to do [28:31] that. Then you can just hit alt s if you [28:34] ever want to scale it in or out. Then [28:36] hit s again to make it scale evenly. [28:38] Hold shift to make it go a little bit [28:40] slower. Just like so. Cool. And I think [28:42] there is the start of our roof there. [28:45] Might add one over here too. We'll see [28:48] in a little bit. But that that's there [28:51] for now. Let's start setting up our [28:53] scene as well. So I'm going to shift S [28:55] and let's just set our cursor toward [28:57] origin. Shift A and add a plane. And I'm [28:59] just going to scale that up temporarily [29:02] just so we can have a frame of [29:04] reference. Kind of try getting our [29:06] composition in a little bit. Now I want [29:08] to make one of those quick floor signs [29:10] that a lot of cafes have. I'm just going [29:11] to shift A somewhere and I'm going to [29:13] add a plane just like so. I'm going to [29:15] bring it up. I'm going to add two loop [29:17] cuts just like so. I'm going to do S Y [29:20] and kind of just bring it like so. And [29:22] then SX and stretch it out. Then I'm [29:26] going to select these into edit mode [29:28] with a shift select. Hit E. Lock it on [29:31] the X-axis over here. If you're working [29:33] from the other axis, you might have to [29:34] lock it on a different one. I'm going to [29:36] do control period. It might be command [29:38] period on Mac. Do GX and snap it. Hold [29:41] control to snap it to this vertex over [29:43] here. That way we can move our origin [29:46] point very easily to the edge there. And [29:48] then control period just to confirm [29:50] that. And I'm going to do go into side [29:52] view and R Y and try and get an angle [29:55] that I like for the sign, which is all [29:57] I'm doing right here. And that looks [29:59] pretty good. And now what I'm going to [30:01] do is add an mirror modifier to this. [30:04] Now it's taking in account its local [30:07] axis. So what we need to do to make it [30:09] go to the other side appropriately is [30:11] apply our rotation. And now you can see [30:14] that is now on the side there. And now [30:16] we should just be able to command period [30:18] again. And then this time I'm going to [30:20] do GZ and snap it down to this bottom [30:23] vertex over here. Control period to [30:25] command that. And now we just have this [30:27] over here. And now what we can do from [30:28] here is hit A to select everything. E [30:31] just extrude it out just a little bit. [30:33] Now I'm just going to hold control and [30:35] select the shortest path and hold shift [30:37] to select that last one. I'm just going [30:39] to hit E one more time just to bring [30:40] that out a little bit. Now we kind of [30:42] have our sign there. Let's model some [30:44] stools so we got a little bit more stuff [30:46] to work with with the composition. You [30:48] might see a lot of stuff moving around, [30:50] but anyway, let's shift A plane. Scale [30:52] it down maybe like control 2 to add a [30:55] subdivision service and E and extrude [30:57] upwards. Ctrl R to add two bracing edge [31:00] loops over here. And then SD and scale [31:02] it up to your liking. I'm going to right [31:04] click and shade smooth so those faces go [31:06] away. That's pretty cool. If you ever [31:09] want to make it a little bit more round, [31:11] you can like bring those down with SC as [31:13] well. Sweet. Now, we need the legs. So, [31:15] I'm just going to come down over here. [31:17] I'm actually going to go into local view [31:19] for this. Now, local view is numpad [31:21] slash, but if you don't have a numpad, [31:22] you can come over to view over here and [31:25] go into local view and do toggle local [31:27] view over there. Same thing. I'm going [31:29] to select this over here. I'm going to [31:30] shift D to duplicate that. I'm going to [31:32] hit P separate by selection becomes its [31:34] own thing. I'm going to S and scale it [31:36] down. Let's go into top view into [31:38] wireframe just to see where it's going [31:39] to start. I'm going to go into edit mode [31:41] and let's actually go out of local view [31:43] here. I'm going to hit A to select [31:45] everything. Now I'm going to do is E and [31:47] snap it to the ground. Now we can't snap [31:48] it to the ground. We have to snap it to [31:50] a vertex that's on the ground or the [31:52] ground of the vertex itself. [31:55] So instead of switching only to vertex, [31:57] we can hold shift and select edge and [31:59] face. That way we can also snap to face. [32:02] So now when I do GZ, remember I already [32:04] extruded it. So, make sure when you hit [32:07] E and right click, cancel the movement. [32:08] Make sure you don't have an extra face [32:10] there. If you do, you can always just [32:12] hit A, hit M, and merge by distance. Set [32:14] it to something like 01. You can see I [32:17] moved eight vertices, which means I [32:19] accidentally extruded twice, I think. [32:20] But that way, now you know you don't [32:22] have any extra overlapping phases. Let's [32:24] do it again. A E and then and then hold [32:26] control just to activate the snapping. [32:28] And now we can just snap to the face. [32:30] Cool. We're going to do the same thing [32:32] here. We're going to add two loops. SZ [32:34] just like so. [32:36] And now on the top here, it's going to [32:38] be covered. And we want to save on [32:40] memory. So, because we'll never see it, [32:42] we can actually delete this face. And [32:43] now we kind of just have a leg like [32:45] that. And let's just bring these up just [32:47] a little bit more inside. A little bit [32:49] of overlap here is okay. And now we [32:51] should just be able to select this over [32:53] here, give it a mirror modifier, select [32:55] our stool as our base, and let's also do [32:58] it along the Y-axis. [33:00] And now we should just be able to RX and [33:04] R Y our way into how we'd like it. And [33:07] if it helps, you can go in up here, do [33:09] RR for the full rotation cursor amount [33:14] if that floats your boat. And once [33:17] that's done, instead of having to select [33:19] each of these every single time to move [33:20] them, we can actually just add them to [33:22] an empty right now. So I'm going to [33:23] shift right click. I'm going to shift A [33:25] and search for an empty. Now, it doesn't [33:27] really matter what kind of empty you [33:28] want to go for. or if you want to go for [33:30] a cube empty, if you want to go for [33:31] plane axes. I think it's more [33:33] traditional to go for plane axes. So, [33:35] I'm going to use that and I'm just going [33:37] to keep it at that origin point, which [33:38] is nice. I'm going to select both of [33:40] these, select the empty, and then do [33:42] Ctrl + P, set parent to object. So, now [33:44] when I click on the empty and move the [33:46] empty, it'll move both pieces while I [33:48] can still also both move each of these [33:50] independently as well. And that's a [33:52] really handy way just to manage multiple [33:54] objects. For some variety, we might as [33:56] well create some other kinds of tools. [33:58] So, I'm going to shift select all these [34:00] and I'm going to shift D and G Y and [34:03] just move it out just so we can create a [34:05] little bit of variation. And here I [34:07] think I'm going to hit A to select [34:08] everything. Do alt S to scale it along [34:11] the normals just a little bit. Just make [34:13] it there. Again, make sure to hit S to [34:15] scale evenly. Just like so. We might [34:18] have to reposition this a little bit [34:19] more. And then we can probably do GZZ [34:22] just to move it down a little bit. It's [34:23] okay if it intersects with the floor a [34:25] little bit or if it's slightly above. So [34:28] this way we just have a little bit more [34:29] variation. And maybe we can make this a [34:31] little bit taller. Who knows? And yeah, [34:34] mainly just have fun. GZZ. Going to move [34:36] that up a little bit. Then I'll maybe [34:38] I'll make this one a little bit more [34:39] square than the other ones. So I'm going [34:41] to add like two loop cuts here. S Y. And [34:44] just keep scaling it up. Maybe we need [34:47] another one two over here. SX, [34:51] you know, something a little more round. [34:53] It's really up to you and what you want [34:55] to play around with. But maybe it's a [34:56] little too thick. So we can make like a [34:58] thinner version over here. Maybe we can [35:00] turn this down. Maybe we can do it one [35:02] more time. And this time what we can do [35:04] is add a little bit of a ring. So let's [35:08] make this a little bit smaller here. [35:11] Maybe SX. That's all I'm doing. And here [35:15] I think what we can do is maybe move [35:16] these a little bit closer. So let's go [35:18] into top view just to see where that's [35:19] looking. Cool. Yeah, maybe we can make [35:22] it a little bit closer rather than [35:24] outside. Then let's select our empty [35:26] shift S cursor to selected and let's add [35:28] a circle here and let's make it sure [35:31] it's a curved circle and let's just [35:33] scale it down just like so. And let's [35:35] try and position it in between here. [35:37] Then give it a modifier and let's do [35:39] curve to tube modifier just so it looks [35:42] like a tube. And oh actually the chair [35:44] itself wasn't centered. So that's fine. [35:47] We can actually just go and center it [35:49] now. So I'm going to GX and just move it [35:51] around here. And I think we also have to [35:54] try and align this up there. So we're [35:56] going to do gy and move it in the center [35:58] there as well. Cool. So now our ring is [36:01] there. Let's change the scale just a [36:03] little bit down. I don't know, something [36:05] like that. And then maybe we have to [36:06] scale it up just a little bit. [36:09] And yeah, let's not forget to select [36:11] this selector empty. Ctrl P. And also [36:14] set parent to object. So now we kind of [36:16] have one with a ring as well. And maybe [36:18] this one's a little bit too thick. And [36:20] instead of doing a and alt s, we can [36:22] actually just do ssh shift z shift z and [36:25] just scale it along its local x and y [36:27] axis. Now if you don't want to do ssh [36:29] shift z shift z to go into local mode, [36:32] you can actually come up here and switch [36:34] to local right over here. And then now [36:36] you just do ssh shift z instead of shift [36:39] z twice. And you can see I'm now working [36:40] in my local x and y axis. Instead of [36:43] coming up over here to change that, you [36:45] can just hit the comma key on your [36:47] keyboard and you can just change here to [36:49] local just like so. And then maybe for [36:51] some of these, like this one, we could [36:53] also add something. So, I'm going to [36:54] select this, select this face, shift D, [36:56] duplicate, and G, and just move it down. [36:59] Let's do P separate by selection. Let's [37:02] select it and get rid of that [37:03] subdivision. Let's scale this. It's [37:05] going to scale from that origin point, [37:06] which is fine. We can come up over here [37:09] and instead of coming up here, we can [37:11] actually just right click on the object [37:12] itself, set origin, this time origin to [37:14] geometry, which will try and calculate [37:17] the center. And now we can just scale it [37:18] down just like so. Let's go into edit [37:20] mode here, hit I to insert just a little [37:23] bit. Again, if you need to, you can [37:25] apply your scale first, then hit I to [37:27] insert it. Maybe just delete that f [37:30] face. Hit A and E and extrude everything [37:32] up. Now, the shading's a little bit [37:34] messed up, so we can rightclick and do [37:36] shade flat. And now we kind of have this [37:38] little bridge here. And if you ever need [37:39] to scale it, you can select one of these [37:41] inner loops with alt. And then you can [37:43] do alt ss and just adjust it like so. Or [37:46] you can also do the exterior one with [37:48] alt ss as well. Now because we separated [37:50] this from this original mesh, we [37:52] actually don't need to reparent this. So [37:54] if I select this, you can see it's [37:56] already parented even though it is a [37:58] separate object. I think what we can do [38:00] now is probably work on some frames. So, [38:03] I think the easiest solution h let me [38:07] think about it. There's multiple ways to [38:09] do that. I think we can actually just [38:12] hit E to extrude this out and then hit S [38:16] just to scale it in a little bit. And [38:18] then hold alt to select this edge loop [38:20] over here. And I think I'm going to P [38:22] separate by selection so it becomes its [38:24] own thing. And then let's just add a [38:25] solidify modifier that gives it some [38:27] thickness over there. I can apply our [38:30] scale just to make sure. It should be [38:33] fine though. And then there we kind of [38:34] have like a frame there. And if we ever [38:37] want to adjust it, we can always just [38:39] hold alt edge select and scale that up [38:42] just like so. I think very similar idea [38:44] for the other frames. I'm going to add a [38:46] loop cut here. So we kind of have like a [38:47] base on the ground. So it's like a [38:50] foundation they call it. And I'm just [38:52] going to alt E extrude along normal. Hit [38:53] S to scale evenly. Just add a little bit [38:56] of base there. And then maybe we can [38:58] turn this into like open panable frames. [39:00] Like that would be kind of sick, [39:01] wouldn't it? So I think I'm just going [39:03] to P separated by selection so we can [39:05] work with it individually. And I'm going [39:07] to add, let me think. Let's see. It [39:11] would be cool maybe if one side was like [39:13] panels and then the other side wasn't. [39:15] So maybe we can just do like gy. [39:17] Basically the whole idea for this kind [39:19] of style is like the more variety you [39:21] have the better. So over here will be [39:22] the panels. That might be a little bit [39:24] too large. So, I might be a little too [39:26] picky for a tutorial, but you know, it [39:28] is what it is. I'm going to hit A to [39:29] select everything and do Alt M. And this [39:31] will split everything. And we can do [39:33] faces by edges. And now you can see [39:34] they're they're each individual object. [39:36] So now what we can do is hit A and then [39:38] P separate by loose parts. And now they [39:41] become their own separate objects over [39:42] here. If you want to leave them all [39:44] their separate objects inside edit mode, [39:46] you can do that temporarily. I think I'm [39:48] actually just not going to do that. I'm [39:50] going to P separated by loose parts. So [39:52] each of them are their own. And here I'm [39:54] just going to adjust right click and [39:56] probably set origin origin to geometry. [39:58] Now because we use rightclick set origin [40:01] so commonly we can actually come over to [40:03] set origin rightclick on one of these [40:05] and add to quick favorites. I have [40:07] remove because I already have it added [40:09] but now instead we can just hit Q and [40:11] it'll show up our quick favorites menu. [40:13] And you can add basically anything to [40:15] your quick favorites menu. Sweet. So I [40:17] think we can just select all these and [40:19] go into edit mode. Hit all of them. Hit [40:21] I just to insert a little bit. Yeah, I [40:24] think that's okay. Let's hit A to and E [40:28] just extrude it out a little bit. Cool. [40:29] Now, since we already have everything [40:31] selected, let's hold control. Let's hold [40:33] control and box deselect each one of [40:35] these. And now we can just hit E and [40:37] extrude this out over here. I don't [40:39] think we need the back detail because [40:40] we'll never even be looking there. So, [40:42] and now we kind of have like these [40:43] panels over here. And I kind of like how [40:45] this one is doubled up. It does show a [40:47] little bit of variety there. Now, I [40:49] think I want a little bit of like a bar [40:50] here. So, I think I'm going to go into [40:52] edit mode, just select this face over [40:53] here. Shift D, duplicate. GZ, bring it [40:56] down. I'm going to snap it to a vertex [40:58] over here. And then GZ, and just scale [41:00] this down arbitrarily. And then select [41:01] this face. And then hit E and extrude [41:03] outwards. Looks a little bit too thick. [41:05] So, I'm just going to scale that down a [41:07] little bit. And yeah, that seems about [41:10] right. We can always change that later. [41:12] All right. So, maybe we just do the same [41:14] thing over here. I'm just going to [41:15] delete this face. That way, we don't [41:17] have to do it twice. And I'm going to [41:19] select this over here. Shift D, [41:21] duplicate that. G Y. And then just snap [41:23] it to this vertex over there. And then [41:25] here, I think maybe I want to give one [41:26] of these an offset. That way it looks a [41:29] little bit more like it can slide [41:31] between like behind and in front of each [41:33] other. Okay, let's make like a flower [41:35] pot or something. There's so many ways [41:37] to make a flower pot. I might make more [41:39] than one here, but we're going to start [41:40] from a circle. I think 16 is fine. I [41:44] don't actually know, but whatever. It [41:46] doesn't really matter. Let's just scale [41:47] that down. Let's hit E to extrude it [41:49] upwards. Something like this. Let's [41:51] scale that up over there. Just in that [41:53] shape. Hit F to fill. And then let's hit [41:55] I to inset. And then let's just hit E to [41:58] extrude down therewards. And we pretty [42:00] much basically have that a flower pot [42:02] already. And then we can just like [42:04] adjust it however we want to adjust it. [42:05] Then right click shade auto smooth. And [42:07] there's like a basic flower pot over [42:08] there. I think if we want to make it a [42:11] little bit larger, we can like add a [42:12] loop cut over here. Hold alt to select [42:14] that. Alt E extrude along normals. Hit S [42:16] to scale evenly. Although I don't think [42:18] it affects it here. Yeah. And then we [42:20] can just like bring that down, scale it [42:22] down, however we want our pot there. Of [42:23] course, we want to add some variation. [42:25] So, let's make another flower pot. I'm [42:27] going to add a circle. This time, I'm [42:28] just going to do eight. We only need [42:30] eight cuz this one is going to be like a [42:32] round one. So, I'm going to go into edit [42:34] mode and scale it up. And oh, I'm [42:37] actually going to make this like sort of [42:40] like a round, whatchamacallit, like a [42:42] round pot. Yeah, like so. And then I'm [42:46] going to start scaling it in like so. [42:48] And I'm just hitting E and Z. And this [42:50] time I'm going to do control 2 for a [42:52] subdivision service modifier shade [42:54] smooth. We can go into local view over [42:56] here. And we can play around with the [42:59] proportional editing. Again, we can turn [43:01] that on with O and just play around with [43:04] it. Maybe add more if we need more to [43:07] get like flower pots. You can even make [43:09] a vase like this, right? And that would [43:11] be pretty cool. Like maybe SZ. This is a [43:14] pretty cool fly pan plot. And yeah, you [43:18] can just have fun with it. And maybe [43:19] like instead of the other one, we could [43:22] do like SZ minus one. Now we need to fix [43:25] that origin point, which is fine. We can [43:27] just go in edit mode and just th this [43:30] time. It's fine just to move it in edit [43:32] mode to change the origin point instead. [43:33] So we've got one like this. And that's [43:36] pretty cool. And maybe we can just [43:38] delete these vertices so it's a little [43:40] bit more not this not too much of the [43:42] same. And we literally have so many [43:43] options here just to play around and [43:45] create our own different vases and [43:48] flower pots. So again, just play around [43:51] with those. Now, I just realized for [43:53] some reason the origin pointer messed up [43:54] again, which is fine because we I guess [43:57] we can just snap it each time. So I'm [43:59] just going to control period GZ and snap [44:01] it over here to the bottom of that one. [44:03] Control period to confirm that. Same [44:05] thing over here. I'm going to control [44:07] period GZ snap it to the bottom of this [44:10] over here. Control period GZ snap it to [44:13] the face. GZ snap it down over here. Now [44:16] we can scale it down. Now if you don't [44:17] like how it's scaling from the center, [44:19] you can hit period on your key over here [44:21] and do individual origins and then hit S [44:23] to scale it. And now scale on the [44:24] individual origins, but it doesn't [44:27] really matter. It's really up to you. [44:30] You can also come up here and see and [44:31] change it over there as well rather than [44:33] hitting period on your keyboard. By [44:35] default, bounding box center is going to [44:37] be your default. Same thing over here. [44:39] I'm just going to shift select both of [44:40] these. And then I'm going to shift [44:42] select this to copy. Come over here and [44:44] copy to se selected, which is just a [44:48] solidify modifier. I'm going to apply [44:50] our scale here just to make sure that [44:51] works. And let's move the solidify [44:54] modifier before the subdivision surface [44:56] modifier. Let's turn on even thickness. [44:58] Although it probably won't change much [44:59] here. With both of these shift selected, [45:02] let's hold alt and change the thickness [45:04] both at the same time. And you can see [45:07] that's what that does over there. And if [45:09] you ever don't really like how thick it [45:11] is, then of course you can apply your [45:13] solidify modifier. And then you can do [45:15] the same things we've done before, like [45:17] select these edges and Ctrl +B to add a [45:19] bevel. That's a little bit too many. And [45:23] that gives it a little bit there. Or [45:25] again, shift E and just give it a crease [45:27] as well. So you have a lot of options [45:29] there. For now, I'm just going to leave [45:30] this here until I decide how I want them [45:32] to look. So we've actually done quite a [45:34] bit now. I think it's time to start [45:36] adding some materials so we can kind of [45:38] get a feel for our scene. Maybe we go [45:41] material preview or rendered. I think [45:43] I'll temporarily instead of using cycles [45:45] switch to Eevee. And we kind of need [45:47] some lighting now. So let's find our LCA [45:49] and let's reactivate that. And I'm not [45:52] going to use a point light here. I'm [45:53] just going to add a sunlight. So I'm [45:56] going to search and I'm going to look [45:57] for a sunlight like so. And let's just [46:01] add some sun. I'm just going to change [46:04] up this strength over here. And I want [46:05] one more for global illumination. [46:08] So, this one will be from this side. And [46:11] we'll definitely change it later, but [46:12] this is just a temporary thing just to [46:14] take a look. Great. And I think now we [46:16] can start giving some materials. So, I'm [46:19] going to come over here, select this, [46:20] hit new, and I'll call this flower pot. [46:23] Name it whatever you want to name it. [46:25] And I'm just going to give it like a [46:26] brownish color or something. I don't [46:28] know. And we can select these. Come over [46:32] here, Ctrl L. And link materials. So, we [46:35] have those there. Maybe for the [46:37] building, we can give it like a white [46:39] color. So, I'm going to give this one [46:41] I'll call it building main material. [46:46] And it'll just be default white. Maybe [46:47] turn up the roughness a little bit. Same [46:49] thing with this one. Let's turn up the [46:50] roughness so it's not as shiny. And then [46:52] we could probably play around with the [46:54] colors, you know. Maybe over here we can [46:56] have uh wood frame. Maybe we can call [46:59] this wood frame. Default. default and [47:02] then maybe we can give woodframe default [47:04] material to this top thing over here. So [47:06] I'm going to hold alt to select that. [47:08] Controll numpad plus to increase my [47:10] selection. If you don't have that you [47:12] can come over here select more less and [47:15] you can see that is control numpad plus [47:17] over there. Hit more there. And then I [47:19] think for the top here I'm just going to [47:20] control shift and select that corner [47:23] there and it'll select everything in [47:24] between. And we can assign this to wood [47:26] frame default. Maybe like a yellowish [47:29] frame or something. And then I feel like [47:30] it would be more natural if we had like [47:32] another tier of wood over here for some [47:34] reason. And then we can do the same [47:36] thing over here. But yeah, just play [47:37] around with it until you get something [47:39] that you like. Actually, going in render [47:40] view probably doesn't give a good idea [47:42] because we're going to change up the [47:44] lighting. So material preview might be a [47:46] little bit better when you're adjusting [47:47] your colors. We could probably add like [47:49] a door or like a window now. So I'm [47:51] probably going to Yeah, let's do the [47:53] same thing here. P separate this one by [47:55] selection. Let's go into edit mode and [47:57] let's just hit I to insert that. over [47:59] here. Well, actually before we insert, [48:01] let's add a loop cut over here and a [48:03] loop cut over here. Let's select all [48:04] these and then hit I and hit I again for [48:07] individual faces over there. You can see [48:09] on the bottom when I hit I and hit I [48:11] again you can see it says individual [48:13] over there and we can just make it [48:14] something like I don't know maybe [48:16] something like that. Cool. And then we [48:18] can we might want to use that for glass [48:21] later. So I'm going to P separate by [48:22] selection and keep it like so. We we'll [48:24] probably join it up later. And then we [48:26] can select those and we can just give it [48:29] the wood frame default. And then this [48:31] one, maybe I'm going to duplicate this [48:32] one and call it glass and temporarily [48:35] just bring down the alpha just a little [48:37] bit. If you ever need to adjust them, [48:38] you can shift alt, select all these, [48:40] switch to individual origins, and then [48:43] scale it like so. I think we're ready to [48:44] add a little bit of plants. So maybe we [48:47] can come over here, and I'm just going [48:48] to shift A and add a plane. And there's [48:51] so many ways to make it a leaf, but the [48:52] easiest way is with a plane and a [48:54] subdivision service modifier. I like to [48:56] put three in the center over here. And [48:59] we'll add more a little bit. And this [49:01] will just pretty much act like our base. [49:04] So I'm going to do sx. And it's not [49:06] working because we're on individual [49:07] origins. Let's change back to bounding [49:09] box center. Let's just scale that down. [49:12] And we can just do gy and bring these [49:15] up. And this one I'm just going to And [49:17] then these ones we can also bring up [49:18] just a little bit and just scale it out [49:20] however we need it. Then here I'm going [49:23] to add some loop cuts. Then I'm going to [49:24] flatten them out just a little bit. [49:26] Maybe sy just to completely flatten them [49:28] out and kind of just uh you know scale [49:32] it up until I get a shape that I like. [49:35] Now if you don't like manually doing it [49:36] like that's totally fine. You can always [49:39] just use proportional editing to help [49:41] you instead. So there's always an option [49:43] there if you want to. And then we can [49:45] add like a subdivision surface modifier. [49:47] And now you can see we kind of have a [49:48] leaf there. And then we can bring in the [49:51] center a little bit. GZ, you know. And [49:53] then now we got like a little bit of a [49:54] line there. And we can just play around [49:57] with that until you want to. Of course, [49:59] lots of other alternatives if you just [50:01] want to start with a plane. And I'm just [50:03] going to piece every selection. You just [50:05] start with a normal traditional plane [50:06] like so. And whoops. Q origin geometry. [50:10] Scale up. You can hit A to select [50:13] everything and subdivide it a few times. [50:15] And then now you can just play around [50:17] with proportional editing if you just [50:18] turn that on with O. And this is another [50:21] perfectly valid way to make a leaf as [50:24] well or any sort of plant. Yeah, there's [50:27] lots of ways to approach the same thing. [50:29] And that's kind of like the beginning of [50:30] a flower petal. This one would be a fun [50:32] flower. So we can give it an array [50:34] modifier. And here we want to change [50:36] from line to circle. Now this will not [50:38] show if you're not on Blender 5.0 Z this [50:41] new array modifier. So make sure you are [50:43] on Blender 5.0 if you want to see the [50:45] same thing. And then we can adjust [50:46] radius here and the number of count. So [50:49] maybe like five or so. If you don't like [50:51] to change the radius instead over here, [50:54] what you can do is just move the origin [50:57] point of the pedal itself. So here if I [50:59] go into edit mode and just do gy and [51:02] move it to the edge of the origin point, [51:04] you can see it effectively has the same [51:05] thing as the radius there. And yeah, so [51:08] now you can just play around with it. [51:09] Then I'm going to turn on proportional [51:10] editing [51:12] and just make a flower. Maybe add one [51:14] more loop cut in here. Bring it up a [51:16] little bit. And then turn on [51:18] proportional editing. GZ just a little [51:20] bit. Yeah. And then we can have like the [51:22] start of a flower that we could use. So [51:24] this flower we can do shift S cursor to [51:27] select it. We could probably add, let me [51:29] think. I think we add a plane here. 2 or [51:33] 1. Yeah, maybe 2 to subdivision surface. [51:37] And then just E extrude it outwards. [51:39] Right click, shade smooth. S, shift Z. [51:41] Bring it up. Just settle it down just in [51:44] the center of the flower. And I think we [51:46] also need whatchamacallit like a stem. [51:48] So I think what I'm going to do is shift [51:51] A and add a single verticy. Now if you [51:54] don't have single verticy, you can come [51:56] over to the Blender official [51:57] marketplace. Click get add-on and then [51:59] you should just be able to drag and drop [52:01] into Blender and it will install and [52:03] activate your add-on that way. Now you [52:04] can just search for add single verticy [52:06] over here and make sure you're in vertex [52:09] select when you have the vertex selected [52:11] and then we can just hit E and then hit [52:13] Z and lock it on the floor over there. [52:15] So that creates our stem. Alternatively, [52:17] if you don't want to install Blender [52:19] add-on, you can just shift A and add a [52:21] plane and go into edit mode and then hit [52:23] M after selecting everything and merge [52:25] it center. That way you also have a [52:27] single vertex that way. I'm not going to [52:29] do that way because I have a single [52:31] verticy from the extra mesh add-on. And [52:33] then this time I'm going to F3, convert [52:35] to a curve. I'm going to come back here, [52:37] add modifier, and let's do curve to tube [52:40] like so. And we can just play and we can [52:43] just play around with the scale as well [52:45] as the resolution or whatnot. And if you [52:47] ever need to add more vertices, you can [52:49] select everything, do subdivide, and [52:51] just move it like so. Now, if it's a [52:53] little bit too bendy, you can change the [52:54] curve type. So, hit A to select [52:56] everything, set spline type, and choose [52:58] ners curve over here. Now, it still [53:00] looks a little bit janky, and that's [53:02] because we don't have enough. So, if I [53:04] right click and subdivide again and [53:07] subdivide again, now you can see we have [53:09] enough points. So, I think we have five [53:11] now. One. And then add as many as you [53:13] need. And then, yeah, play around with [53:15] the resolution cuz I don't think we need [53:17] that many. If you want to try some of [53:19] the other curve types, you can go for [53:21] it. So, maybe for this one, we can try [53:24] type to like basier. And now you have [53:26] like the basier handles if you've ever [53:28] used these before. Anyway, the nerbs is [53:30] basically the path curve. If you've ever [53:31] used that. So, if I add a path, then [53:34] this is basically what we just created, [53:35] but with starting as a single verticy [53:37] rather than this. The reason I don't use [53:39] this one is because we would have to do [53:41] like R 90 scale it down. Well, I guess [53:45] this isn't this bad in in this case, but [53:47] yeah, we would have to like scale it [53:48] down and then and then we would have to [53:49] go in top view and wherever it is, we [53:53] would have to move it on the center of [53:54] our flower. I guess it's not that bad to [53:56] do it that way either. It's more of just [53:58] a force of habit. Make sure to get rid [54:00] of caps because it's going to be hidden [54:02] by the back of the flower. And this one [54:06] is going to be hidden by the the ground. [54:08] So, we don't need the caps on either [54:09] one. If you want ever want to change the [54:11] thickness at a point, you can do alt s [54:14] and it will change the thickness over [54:16] there. And if you want to change the [54:19] tilt, you can do ctrlt and you can see [54:21] it'll twist at that point. Now, it's [54:24] probably not relevant for us because [54:26] we're just working with a regular stem, [54:27] but you can do Ctrl T and Alt S if you [54:30] want to. Let's fix this origin point. [54:32] Ctrl period GZ. Snap it to the bottom [54:34] over there. Control period just to [54:36] confirm that. So, it's like so. You [54:38] don't always have to use an empty. We [54:39] could just use regular parenting to this [54:41] stem. Ctrl P and go to object. And this [54:45] would work as well. If you don't like [54:47] seeing those relationship lines, you can [54:49] actually come over here and turn off [54:50] relationship lines if that makes it a [54:53] little bit easier for you to navigate. [54:54] Maybe we can make some food products or [54:56] something like that. I don't know, [54:58] anything. So, let's come over here. And [55:01] I think what I'm going to do is shift [55:02] right click somewhere and just add a [55:04] plane. And I'm just going to go into [55:05] local view instead. And I don't really [55:08] know what a bakery looks like or what [55:10] they have in their shelves. Let's do the [55:12] same thing as we did last time. We might [55:14] be able just to get away with the inset [55:16] method, but this time I'm going to use [55:17] two loop cuts again just in case. And [55:19] I'm just going to do SZ and just scale [55:22] that up there. And now we can just E and [55:24] extrude this in. Then we can use this as [55:27] our base launching pad. So I'm actually [55:29] just going to select these three faces, [55:31] not the back one cuz it's going to be [55:33] hidden. And we can just do shift D and [55:35] GZ. Whoops. I have proportional editing [55:37] on, so make sure to turn that off. And [55:38] we can just do GZ [55:40] and shift DGZ. And this way we can like [55:43] kind of determine where we want to put [55:45] our shelves. I don't think I want them [55:46] completely even, but if you want them [55:48] even, you can separate by selection and [55:50] then add an array modifier. I don't want [55:52] them completely even. I think maybe the [55:54] bottom shelf should be a little bit [55:55] bigger. And if you want to select them, [55:57] you can just hit L when you're hovering [55:59] over them to select them entirely [56:01] because they're separated their own [56:02] object. It's in it's within the same [56:04] mesh, but it's within its own object, if [56:07] that makes any sense. Now, when it comes [56:09] to making the center ones, there's a lot [56:11] of ways you can add like a loop cut [56:13] around the base over here, like so. One [56:15] over here, one over here, snap it to [56:18] there, shift duplicate this, gy, and [56:20] just move it. And then E extrude it [56:22] outwards. I think that is one of the [56:24] easiest ways to do it. And then shift [56:26] alt to select it again. Crl X to [56:27] dissolve it because we no longer need [56:29] those. L to select it. And then shift [56:31] duplicate. Gy. For the other ones, we [56:34] can just duplicate it. It's fine. It [56:35] doesn't really matter. You can just move [56:37] it up. If you want to adjust it, you can [56:39] GZ, select these, GZ, snap it to the [56:41] face there. Of course, we can always go [56:44] out of local view and just rescale it [56:47] how we need to accordingly. [56:49] All right, let's make another stand. So, [56:51] let's just shift a add a plane somewhere [56:54] arbitrarily. Let's give it a mirror [56:56] modifier like so. Let's go into edit [56:59] mode and just gy move it to the side. [57:01] And then let's make this on the Y. Let's [57:03] just move it arbitrarily. And let's just [57:05] go in edit mode and scale that down. [57:07] Let's E extrude that up. And let's add a [57:10] loop cut with controlr. Make sure we [57:12] turn on clipping so it doesn't go [57:13] through. Just select this, hit E, and [57:15] extrude it outward. And then if we ever [57:17] need to change it, we can do like alt S [57:19] and S just to scale it evenly over [57:21] there. Now, this looks a little bit [57:23] cramped, which is fine. We can just [57:24] select it and GZ and move it there. Same [57:28] with this one. You don't really have to [57:29] fix that, but if you want to, you can do [57:31] that. Gy and then snap it over there. So [57:33] that way it looks a little bit better. [57:35] Probably need something down here as [57:36] well. So we can controlr, add another [57:38] loop cut down over here. Maybe select [57:41] this face over here. I'm going to hit [57:42] period key just to jump back cuz I was [57:44] rotating wrongly. Select this one. Alt [57:46] extrude along normals and kind of just [57:48] get like a stand something like so. For [57:50] the basket, I'm just going to select [57:51] this shift s cursor to select it and add [57:53] a plane. And this time I'm just going to [57:55] scale it. I don't really care if it [57:57] overlaps. So it's totally fine. Here I [58:00] think I'm just going to let's see apply [58:02] scale. Let's go into edit mode. Let's E [58:04] extrude upwards. And this time I'm just [58:05] going to insert in. I don't think we [58:07] need any reason not to. And then hit E [58:09] and extrude that downwards. SC. Maybe [58:12] scale it just like so. And then just [58:14] scale it down a little bit. And we can [58:16] give it an array modifier. And it's [58:18] going to be in the Zaxis. If you want [58:20] this to manually offset it, you can [58:22] totally do that like we did for the [58:23] shelf. But for this one, I'm just going [58:25] to use an array. And we can just [58:28] arbitrally adjust that. Now, I don't [58:30] want to rotate it like this. I want to [58:32] go into edit mode and then lock it on [58:34] the Y-axis and rotate it like that. It [58:37] just makes it a little bit easier. And [58:38] then I can just use the array thing and [58:40] click and drag that rather than adjust [58:42] it here as well. And there we kind of [58:45] have like a shelf that we can use later. [58:47] Again, if you want to parent this to an [58:49] empty, you can totally do that or apply [58:50] modifiers and something like that. We [58:53] could also make like one of those glass [58:54] casings. And again, lots of ways to do [58:56] it, but I think the easiest way is just [58:58] to have a plane R Y 90° like something [59:01] like this. And we can just go into local [59:04] view for this one, I think. And let's go [59:06] into wireframe to make sure we have [59:08] everything selected. Let's just hit E [59:10] and hit X and just extrude it back as [59:12] far as you want. Select this. Again, [59:14] make sure you're getting both of those [59:16] like over there. And we can just do Crl [59:18] +B and bevel. And we can just use our [59:21] middle mouse button just to scroll up on [59:23] there. If your bevels are uneven, make [59:25] sure to apply your scale first and then [59:28] go back and bevel again. And if you want [59:31] to change the profile, you can come over [59:33] here and adjust the profile shape over [59:36] here as well. You want, you can also [59:38] make a custom one, so it doesn't have to [59:40] be the one that they give you. Might [59:42] have to add a few more segments for it [59:44] to look a little bit nicer, but that's [59:47] also one there. I'm just going to stick [59:48] with a super ellipse for now. And then [59:51] for the remaining of it, I'm just going [59:53] to select this one and probably like GX [59:55] with proportional editing or something [59:56] like that. And that's pretty good for [59:59] our glass casing. But again, you do you [60:02] and go for the vibe that you want. I'm [60:04] going to go out of there. And I think [60:06] this time I'm going to go into local [60:09] view, add a loop cut down the center. [60:11] I'm going to delete this half. And I'm [60:13] going to add a mirror modifier over [60:15] here. And I'm going to do it along the [60:17] Yaxis. [60:18] Sweet. And I'm going to do the same [60:20] thing on this side. I'm going to select [60:21] this edge, hold control, and select it [60:23] all the way over here. I'm going to [60:25] shift duplicate that and P separate by [60:27] selection. I'm going to select that edge [60:28] that we just duplicated. I'm going to F3 [60:30] and convert that to a curve. So now it [60:32] becomes a curve. If you can't select on [60:34] it and have trouble selecting on it, [60:36] hold alt when you click and it'll show [60:38] you whatever whatever your cursor is [60:40] hovering over. And here you can see it's [60:41] my curve object. So I'm going to click [60:43] that. And if I hit period on my numpad [60:45] key to jump to it, you can see it's [60:46] there. I don't see it selected probably [60:48] because it's overlapping which is fine [60:49] but we can add a curve to two modifier. [60:52] Let's apply our scale just to make sure [60:54] it's evenly spaced and move that down [60:57] over there. And now if I go into [60:59] material preview we can see we kind of [61:01] have our casing there. And if you want [61:03] one for the edges, you can totally do [61:06] the same exact method that we did [61:07] before. Just duplicate this. P separated [61:10] by selection one more time. Then with [61:12] this clicked, we can do F3 convert to [61:15] curve. Come over here, Ctrl L. And we [61:17] can just link our [61:19] modifiers and there we have. And don't [61:22] forget to apply scale. Now, one thing I [61:23] don't like about this method is that [61:25] it's very hard to adjust if you ever [61:27] want to change it. So, instead, an [61:29] alternative we could do is actually [61:31] shift D and duplicate this curve [61:32] instead. Instead of doing curve to two, [61:35] we can actually just come here and go [61:36] into geometry and we can go for the [61:39] extrude property. Now, it's going the [61:41] wrong way, which is fine because we can [61:42] go in edit mode because we can do CtrlT [61:44] and then we can just type 90°. And now [61:46] you can see that it's going to be [61:47] tapering 90°. So, let me just actually [61:49] hide our original one. Accidentally just [61:52] duplicated it twice. Anyway, so now we [61:54] can just use this curve, this singular [61:56] curve. Fine. But anyway, now we have [61:58] this separate curve. Like this is also a [62:00] curve that we can just adjust over here. [62:03] And let me just include that extrude [62:05] right until it fits up. Great. And now [62:08] what we can do is with both curves [62:10] selected, we can go in edit mode for [62:12] both of them at the same time. And we [62:14] can edit them together. Maybe we can [62:16] also add a donut, which is literally [62:17] just going to be a Taurus. So we can [62:19] just add a Taurus. We don't need this [62:21] many segments. Maybe like we'll probably [62:23] lower this to like 24. Honestly, we [62:25] could probably even do 12. It might be [62:27] fine if it's ever too bendy. I think [62:29] these are all quads. Yeah. So we can [62:30] just control one and add a subdivision [62:32] service modifier. No. Let's see. Is that [62:34] Is that overkill? Let's see. No, that's [62:36] fine. Yeah, subdivision is fine just to [62:38] give it one subdivision. And this is [62:40] pretty much a doughnut. We can just do [62:42] alt s to like scale it up and make it [62:44] like a little thicker doughnut. And then [62:46] I think for the frosting, we can just [62:48] like select this edge. Ctrl+ to select [62:51] the top. Shift DGZ P separated by [62:54] selection. [62:56] And then we can just adjust the frosting [62:59] here. And then that is up to you, I [63:02] guess, how you want to do it. if you [63:04] want to like e extrude down one more [63:05] time and scale it in, you know, it's [63:07] whatever how you however you want to do [63:08] your frosting, right? And then let's add [63:10] a sprinkle. So, let's add a cube over [63:13] here. Just scale it down. And control 2 [63:16] to add a subdivision service modifier. I [63:19] don't know what shape are sprinkles. Oh, [63:20] I I guess I don't I guess that's kind of [63:22] like a shape of a sprinkle. Yeah, that's [63:25] pretty good. And then now in Blender [63:27] 5.0, there should be one called scatter [63:30] on surface, which is super cool. And now [63:33] we can just come to instancing type and [63:35] then we can select our over here. And [63:37] then we can scale this. And then let's [63:39] apply our scale here. And let's turn up [63:41] that density just a little bit. So we [63:43] got a little bit more sprinkles. Let's [63:44] give it a little bit of randomization. [63:46] So I think that's in transform. Yeah, [63:48] randomize is over here. Let's randomize [63:51] the I don't actually know what rotation [63:53] I'm going to randomize. Okay, I think [63:55] that's the wrong way. That's not what I [63:57] want to do. Maybe it's the Z-axis. [63:59] Maybe. Yeah, 180 on the Z-axis. Okay, [64:01] cool. Cool. And now we got some [64:02] sprinkles. We could actually delete this [64:05] if we wanted to, but I'm not going to [64:07] risk that. So, what I'm going to do is [64:09] probably move this into its own [64:11] collection or something. Or just hit H [64:13] and hide that. Maybe next we can make [64:15] like a cake. I think I'm going to start [64:16] with a plane again. Just E extrude up. [64:19] You already know what we're going to do. [64:20] We're going to subdivide and just to [64:23] like so. Just bring that up. Right [64:25] click. Shade smooth. I think shade [64:27] smooth is fine here. And if we ever need [64:30] to, we can crank up the subdivision to [64:32] like three just to make it a little bit [64:33] smoother. I'm just going to probably add [64:36] another plane. Actually, I'm just going [64:38] to make another plane for the [64:39] strawberry. [64:40] GZ, snap it to the face over there. Go [64:43] into edit mode, hit E, extrude upwards. [64:45] Ctrl 3 just to add. Yeah, that looks [64:48] good. And now we can just go into local [64:51] view. And let's just shape our [64:52] strawberry. So, probably gy and probably [64:56] a little bit something like this. I [64:58] don't know how a strawberry looks, but [65:00] I'm just scaling it until we get like a [65:02] strawberry shape. And I think we should [65:04] ought to make this a little bit smaller [65:06] over here. Maybe keep this place a [65:08] little bit bulkier. [65:10] And let's turn on X mirroring here. That [65:12] way we don't have to like add a mirror [65:13] modifier for it either. We can just [65:15] adjust it. And since it's mirrored, just [65:17] like so. Cool. That kind of looks like a [65:20] decent enough strawberry. And we can do [65:23] the same thing. We can add an array [65:25] modifier. [65:27] Change this to circle. [65:29] Increase the rad the radius. Increase [65:31] the count. And then maybe we can flatten [65:33] out the bottom just a little bit. So sc [65:37] maybe just a little bit flatter on the [65:39] bottom. That way it doesn't clip too [65:42] much with the cake and it kind of just [65:44] sits on top there. Add a small loaf of [65:47] bread. So I'm going to shift right click [65:48] somewhere, add a plane. And we can just [65:51] Yeah, we can just make it. If you want [65:53] to make a slice of bread, you can [65:54] totally do that anyway. And we can just [65:56] e extrude upwards. And I feel like a [65:58] bread, all we really need is just loop [66:00] cuts. Call me crazy or whatnot, but a [66:04] piece of bread is just a bunch of loop [66:06] cuts. See, maybe this one is not this [66:08] one. It's probably in here. And GZ, we [66:11] probably need one more over here. And [66:13] then probably one more over here. [66:16] Uh I'm trying to think about how a bread [66:18] looks in shape, but it doesn't really [66:20] matter because you can always adjust it [66:21] later. So essentially the whole idea is [66:23] just make it look like a piece of bread [66:26] for adding a subdivision surface [66:28] modifier sx. And I think we just do [66:31] control 2 for a subdivision surface [66:33] modifier. And now we definitely need two [66:36] loop cuts over here just to make it look [66:38] like a loaf of bread. Right click. And [66:41] then we definitely need one down here [66:42] just to make it a little bit more loafy. [66:44] And we definitely need one on the top. [66:46] Maybe we can add like three at the top [66:48] over here. And let's turn proportional [66:51] editing on. Let's make our circle a [66:54] little bit smaller just so it's cool. [66:55] And I think we can just round this up [66:57] just a little bit. So here I'm going to [66:59] turn on, let's see, X transparency. I [67:02] mean mirroring. That way we don't have [67:04] to really do anything. [67:06] And maybe just turn on proportion [67:08] editing just a little bit like so. We [67:10] kind of have one. I think I want the top [67:12] to be a little bit larger. So I'm just [67:13] going to select this edge over here. [67:16] Control shift. Select this edge over [67:17] here. [67:20] And I'm just going to GZ and inflate [67:21] that a little bit. Maybe select these [67:24] over here and GX a little bit just to [67:28] make it a little bit more stylized. [67:29] Yeah, it's really up to you how you want [67:31] to make your your bread loaf. But that [67:32] looks like it looks like a decent bread [67:34] loaf. And I want it to be a little bit [67:37] stylized. So I might just sy this a [67:40] little bit. So I might just syy this a [67:42] little bit. Maybe even add another one [67:44] over here and sx. Let's make it a little [67:47] bulky on this side. If we ever want to [67:50] make a slice of bread, I think we can [67:52] just select this face, shift G, select [67:54] similar co-planer. Let's increase this [67:57] just a little bit. [68:00] Maybe we can do greater than, and just [68:03] crank that up a little bit. So, we get [68:05] all the faces. Okay, I think that's [68:08] good. Let's shift duplicate and let's do [68:11] P separate by selection so it becomes [68:12] its own object. [68:14] Let's go in GY here. go into edit mode [68:17] and just e extrude it out. And we might [68:19] have to add maybe three loop cuts or two [68:22] loop cuts. And then I think the center [68:24] one we can just like raise up a little [68:25] bit. Let's see. Whoops. GZ. Actually, [68:29] no. I want proportion editing. And [68:31] remember that's just with O. So we don't [68:33] actually have to do that. I think I'm [68:35] going to kind of just inflate it just a [68:36] little bit. And I think for a slice of [68:38] this cake, it might be easier just to [68:40] duplicate it itself and scale this down [68:44] to like SX. [68:46] And then probably loop cut over here, I [68:48] think. Yeah. And that's pretty much a [68:50] cake slice right there. We can do GG to [68:52] edge slide the edge. And then maybe we [68:55] can I don't know. But yeah, now we have [68:57] like a slice of cake there. Also, don't [68:59] be afraid to go into sculpt mode and use [69:02] the inflate tool over here and shift F [69:04] to adjust the strength and then hit F to [69:07] adjust the size. And you can just [69:09] inflate your bread a little bit. So, I [69:12] can just click on it. It's deflating. [69:13] So, we can hold control to do the [69:15] opposite of deflating, which is [69:16] inflating. Your default might be [69:18] inflating. And then we can do the same [69:20] thing, right? We can just do alt Q and [69:22] then we can inflate around here. So, [69:24] maybe we want to hold control and just [69:26] tap it a little bit. just give it some [69:28] irregular irregularity. So for the [69:31] bagel, we should just be able to use our [69:33] donut. I think it has a center ring. [69:36] Yeah, it does. So we can just hold alt [69:38] and select that center ring. And we also [69:40] need to select the center ring on the [69:42] inside. Then we could hit V to rip. And [69:44] we'll just right click cancel movement. [69:46] And we can just P separated by loose [69:48] parts. And now they become their own. [69:50] Now we need to move this up and just [69:51] fill it in here. So we just going to [69:54] select this, hit F. And now we can just [69:56] hit F and just keep refilling that. So [70:00] one more time, go into edit mode, select [70:03] this over here. Actually, we actually we [70:05] should just be able to hold alt and [70:07] shift alt and do control E and do bridge [70:09] edge loops. Yeah, that would do the same [70:10] exact thing as what we did up here. And [70:12] then if you want, you can add like a [70:14] loop cut and maybe like a subdivision [70:15] surface modifier cuz I know the flat one [70:18] is typically like the bottom side of the [70:20] bagel is a little bit more flat. So we [70:22] can like round it out a little bit and [70:23] make it a little bit flatter. and or [70:26] like peachier. Is that like a little bit [70:28] thicker, I think. Yeah. So, really up to [70:30] you there and how you want to do it. [70:32] Okay. Let's make like a baguette. I'm [70:33] going to add a plane. Let's go scale it [70:36] down. Maybe SX. Go into edit mode. E [70:39] extrude upwards. I'm going to right [70:41] click uh sorry. Yeah, right click and [70:43] subdivide everything. And uh let's see. [70:47] Maybe we can select this edge. I'm going [70:48] to turn on the mirroring with X. GX. [70:52] Cool. Hold Alt to select all these. S Y [70:55] maybe that looks like a nice baguette. [70:58] And let's just go into local view and [71:00] select these two. SC. Let's do control 2 [71:04] for a subdivision service modifier. [71:06] Shade smooth. Cool. [71:09] Maybe I just inflate this just a little [71:11] bit more to get like a baguette shape. [71:14] Same with the these sides. Actually, [71:17] just to select these. Probably make it a [71:19] little bit thicker. Just like so. That [71:22] looks like a pretty good baguette. And I [71:24] think we just give it, let's see, a loop [71:26] cut here. A loop cut here. And it's not [71:28] working because we have mirroring on. [71:29] So, let's turn that off. Let's rotate [71:31] it. But that doesn't look great. So, [71:33] let's switch to individual origins and [71:34] then rotate them. That looks pretty [71:36] good. Let's do Ctrl +B to bevel. And [71:38] let's hit E to extrude it in. That looks [71:42] a little bit sus. So, I think what we [71:44] can do instead is undo that. Select all [71:46] these faces over here and I to insert [71:49] first. Make it a little bit smaller. [71:51] just so we have a little bit of a guard [71:53] loop there. Now we can select these [71:54] inner ones over here. Let's just make [71:56] sure they're a little bit more slanted. [71:58] They can be a little uneven for realism. [72:00] Now we'll just select them. We'll do [72:01] Ctrl +B and something like so. And then [72:05] we just hit E and extrude it in. And [72:07] there we got our baguette. And then [72:09] let's switch back to bounding box [72:10] center. SX. Make it a little bit more [72:13] round there. Maybe give it some [72:16] irregularities and and things like that. [72:18] Then these interfaces, we could probably [72:20] give it the light brown. [72:23] So, I'm going to come over here and just [72:25] hit assign. And uh yeah, now we can make [72:28] like one of those smaller ones. I'm [72:30] going to start with a plane again. Let's [72:32] go into edit mode. I think E cuz I want [72:34] a guard loop on the bottom so it looks a [72:36] little bit square. And then I'm just [72:37] going to extrude this one way up. [72:39] Probably scale that down a little bit. I [72:41] think I need a little bit of puffiness. [72:43] Control 2 to add a subdivision service [72:45] modifier. Yeah, I definitely messed that [72:47] up, but it's fine because we can always [72:49] adjust it. And now it kind of looks like [72:52] a Tootsie Roll, but let's just increase [72:55] that up a little bit. Yeah, make that [72:57] down a little bit. Actually, this guard [72:58] loop is is bad. Let me think. Is this [73:01] bad? [73:03] Do I need that? Yeah, maybe I do need [73:06] that. Great. And then we can just bring [73:08] the top down just a little bit. And I'm [73:10] going to leave this one over here. and [73:12] we'll just paint the extra details [73:14] rather than model the extra details. So, [73:16] I think we have enough to actually start [73:18] a little bit of texture painting and [73:20] composition just to make the scene look [73:21] a little bit more lively. So, I think [73:23] what we can do is actually start with [73:25] this piece of bread over here. And I'm [73:26] just going to give it a new material and [73:28] call it circular bread. I don't know [73:30] what else to call that. And just click [73:31] and drag this up over here. Change this [73:34] to shader editor. And I'm going to [73:36] create a new image texture that we're [73:37] going to paint on. So, I'm going to [73:39] create that image texture over there and [73:41] hook it up into that base color. Now, [73:43] it's black because we don't have image. [73:44] So, we can hit new image over here. And [73:46] I'll rename this circular bread. And for [73:49] our base color, I'm just going to uh [73:52] let's see. Let's just create a random [73:53] base color that kind of looks like [73:55] bread. So, I'm just going to increase [73:57] that. Cool. 32 bit float gives a little [73:59] more color. And we don't need alpha for [74:01] this one. So, we can uncheck it. But if [74:03] you want to paint transparency, you can [74:04] leave that on. And we'll create a new [74:06] image like so. Now, make sure we have to [74:08] save it. So, luckily, Blender already [74:10] has a setup texture paint area for us. [74:12] So, we can just go to texture paint. And [74:14] here you can see we have circular bread [74:16] and just hit alt s and make sure you [74:18] save. And we want to save it as an EXR [74:21] file. This way, our color is fine every [74:23] time we paint and save it. And we'll [74:26] convert it to a PNG a little bit later. [74:28] Now, we can't start painting yet. Even [74:30] though if we hit tab and we show texture [74:32] painting and we click, it does look like [74:34] it works. But the issue is we need to [74:37] update our UV map in order to know how [74:39] to map our 2D image to our 3D space. So, [74:43] while you can paint and it'll probably [74:44] look fine and it'll probably work, the [74:47] typical thing to do is to apply all your [74:49] modifiers first, unwrap the model, and [74:52] then texture paint. So, I'll just [74:54] duplicate this. if you ever want to [74:56] create a complete clone of everything [74:57] and like move it into a new collection [74:59] called modifiers or whatever. That way, [75:03] like if you ever need to go back to the [75:04] modifier one, you always have it. You [75:07] can just keep that hidden or you can [75:08] just file saver and command and save a [75:10] completely new file. That way you always [75:12] have a fallback. Really up to you. But [75:14] here I'm going to let's see if we can [75:15] get away with control one. No, control 2 [75:18] probably. And I'm going to apply that. [75:20] Just a refresher on UV mapping. It's [75:22] literally the idea of, you can imagine [75:24] trying to gift box wrap a piece of paper [75:26] or like a globe or anything. You're [75:28] trying to use a 2D sort of texture and [75:31] you're trying to map that into a [75:33] simulated 3D space. So, you can just [75:35] imagine like seams are where you use [75:37] scissors to cut to in order to flatten [75:40] out everything. There's multiple ways to [75:42] prioritize what kind of UV seams you [75:44] want to go for and so on so forth, but [75:46] it doesn't really matter for if you're [75:48] just starting out. Just focus on having [75:49] fun. And Blender by default has a [75:52] default on wrap method that you can use [75:53] called smart UV project that will try [75:55] and guess seams for you. And we're just [75:58] going to be using that. Now, if I start [75:59] painting, it's actually going to start [76:01] working already. But the thing is, we [76:03] want a proper UV unwrap. That way, we [76:05] know how to map the 2D image texture [76:08] over here to the 3D space in a proper [76:10] way. Because this geometry is so simple [76:11] and the top is so simple, I think it's [76:13] fine just to paint over it. But what [76:15] about like the bottom over here? It's [76:17] showing the bottom that's also painting [76:19] on the top. And that's because the UVs [76:20] are overlapping. So, let's undo that. [76:23] And the first thing we need to do is [76:25] let's come over here and open up the UV [76:27] editor just in case we need to see it. I [76:29] don't think we do, but anyway, let's [76:31] just go in here and let's make sure to [76:33] apply scale. And we can just U and smart [76:35] UV project. Send island margin 03 [76:38] probably works. It probably doesn't [76:40] really matter too much because we're [76:41] texture painting, but you want to have a [76:43] little bit of gap between the UV [76:44] islands. And this is a decent thing to [76:47] texture paint on. But honestly, because [76:49] this model is so simple, you could come [76:51] over here and like select this enter [76:52] one. Ctrl + E to mark the seam and hit A [76:55] and then U and then I think angle based [76:58] would probably be fine here. And then [76:59] you could totally use this. Hit L to [77:01] select an island. And you could totally [77:04] use this to paint. If you watch my [77:06] previous videos, you know that the best [77:09] way to unwrap a subdivided cube is just [77:12] like any other regular cube. [77:15] So something like this. And well this [77:17] time I'm splitting up into all six [77:19] spaces. Ctrl E mark seam. And then we [77:23] can do angle based again. And then this [77:25] would be another way to unwrap it. Again [77:28] since this object is so simple, we can [77:30] just stick I'm going to hit a control E [77:32] and clear seam. I'm just going to stick [77:34] with this one. E mark seam. [77:38] And I'm just going to paint it like [77:40] this. Again, just hit L to select them [77:45] and try and make them as big as [77:46] possible. And if you have UV packmaster, [77:48] you can also use them to repack the [77:50] thing. Great. And now when we go back [77:53] into texture paint and I just paint, you [77:56] can see it's only going to show at the [77:57] top and it's not going to show up at the [77:58] bottom anymore. And there shouldn't be [77:59] any weird distortion because it's such a [78:01] simple model. So having a one single [78:03] unwrap like that should be more than [78:05] fine. So just some cool hotkeys. Hit F [78:08] to change the size. Hit shift F to [78:10] change the strength. You can also come [78:13] over here and oh, you can use your [78:16] middle mouse button and click in order [78:17] to drag this left and right. Play with [78:19] the fall-off. So, this is something that [78:21] I'll probably change to the smoother [78:22] often, like when I'm working with like [78:24] gradient stuff and things like that. And [78:25] then, of course, you also have like the [78:26] custom one. There's a lot of other [78:28] options over here, like smear, clone, [78:31] blur. I don't think I'm going to use [78:33] many of these. The fastest way to sample [78:35] colors is shift X and you can just hover [78:38] over anything. And you can see that I'm [78:39] just selecting the color over here. And [78:41] now I have that color as part of this. [78:44] If you want to paint the opposite color [78:46] or your secondary color, you can just [78:47] hold control and it will use that color [78:49] instead. And then if you want to switch [78:51] your colors, you can just hit X and it [78:53] will switch the position. You should [78:54] also hit N on your keyboard to come to [78:56] the active tool uh active tool [78:59] workspace. And there's a lot you can do [79:00] here like add a color palette. So you [79:02] can create a new palette over here and [79:05] whatever your active color it's over [79:07] there and I can just keep adding there. [79:09] That way I don't have to like completely [79:11] forget every single time. And yeah, [79:13] there's a lot of other tools. I'm [79:14] probably not going to be using many of [79:16] them other than just the basic paint for [79:18] this video. Now if you want the color [79:20] that you see in the viewport, the [79:21] command is control shiftx. And you can [79:23] see it'll get a lot darker because I'm [79:25] sampling it with the lighting and [79:27] everything else on it instead of my [79:29] original color. So just make sure to [79:31] keep that in mind if you ever like the [79:33] color that you see in your viewport [79:35] better. So here if I do control shift X [79:38] it's going to be a lot lighter. You can [79:39] see the color over there and how it's [79:41] adjusting as I change over there. Now I [79:42] will say don't forget to save often. I [79:45] always keep forgetting always hover over [79:47] your image over here and hit alt s to [79:49] save it. But yeah anyway I think we have [79:53] enough to start with some composition. [79:56] So I'll see you on the other side. [79:57] Hello. I'm from the future. I just want [79:59] to say you can also unwrap multiple [80:02] objects together. So for example, these [80:04] over here. Again, just make sure you [80:05] apply your scale. Go into edit, hit A to [80:06] select everything, and smart UV object. [80:08] And now they will all use the same [80:11] image. Now, because you have a lot more [80:13] here, you might need to increase the [80:16] resolution of your image texture. As [80:17] long as they have the same material and [80:18] you're using the same image texture, you [80:21] can paint, you know, two objects or more [80:23] objects on on the same image texture. [80:25] So, you can totally go that way as well. [80:26] Just know the more objects that you add, [80:28] the higher the resolution of your image [80:30] you might need to be. I would not [80:32] recommend going any higher than 4096x [80:34] 4096 pixels. Just try not to put too [80:37] many objects on a single texture. Now, [80:40] there's a lot more nuance there [80:41] depending on how big the the object is, [80:44] what kind of material it's using, so on [80:46] so forth. But for a beginner, I feel [80:48] like that's just intuition you'll [80:50] develop over time, like what kind of [80:52] objects should share, what kind of image [80:54] packages. But if you want to just save [80:56] time, I'm sure that none of these [80:58] models, whether you have like two, [81:00] three, four, or five, will be a big deal [81:02] if you all just put it on one texture. [81:04] But since this is a beginner tutorial, [81:05] I'm just going to do one item per one [81:08] texture. But if you do want to see an [81:09] outline with your painting, let me show [81:11] you the inverted hall method to create a [81:13] quick outline first. And we're just [81:15] going to add a modifier over here and [81:17] add a solidify modifier. Then we're [81:19] going to turn up the thickness. And [81:21] let's turn on even thickness. Let's [81:22] apply our scale to make sure it's good. [81:24] For materials, I think this has two [81:27] materials on it. So, we're going to add [81:28] a third slot. So, we're going to offset [81:30] it twice. Create a new material here [81:32] called outline, which I already created, [81:34] which is just a black material. So, it's [81:36] going to use this one. The solidify [81:37] modifier is going to use this one. And [81:39] and then we need to flip the normals. [81:41] This way, we're basically looking inside [81:43] it. And come over to one last time into [81:46] material. And then in back face [81:47] coloring, we need to turn on camera. And [81:49] now we can adjust how our outline looks. [81:52] So basically what it's doing is [81:53] duplicating the entire object and then [81:56] flipping the normal so we look through [81:57] it but we're actually looking at the [81:59] other side. So just to show you what [82:01] that actually looks like if I apply the [82:03] solidify modifier. You can see that if I [82:06] hit alt n and flip this you can see it's [82:08] just going to be black. So we're doing [82:09] alt n flip. It's literally just the [82:12] entire mesh duplicated and then inverted [82:15] the normals. So you can also come up to [82:17] over here and turn on face orientation [82:20] and you can see that the whole thing is [82:21] red but it's actually the duplicate [82:23] object we created with the solidify [82:25] modifier that's red whereas the in side [82:28] is not red. Now if you ever have the [82:31] case where something is going outwards [82:33] while the other one is going inwards [82:34] with your solidify modifier make sure to [82:37] go into edit mode alt n and either [82:39] recalculate or flip manually if you need [82:41] to. So that's exactly what we're seeing [82:45] over here. And you can do that with any [82:47] object you want. So maybe over here I'll [82:49] ctr L and link materials. And I'll also [82:53] copy modifiers. And I accidentally got [82:55] rid of my subdivision. So I'm going to [82:56] add that back in. I don't think it [82:58] really matters the order here if we [82:59] solidify, but I'm going to subd first. [83:01] And let me turn off face orientation. [83:03] And you can see we also have that. So [83:05] let me just apply my scale. Make sure it [83:06] works. And of course, when you get rid [83:09] of it, like let's say I copy this and I [83:12] call it head material, make sure the you [83:15] also update in here. Even though it [83:17] seems like it's going to work, we just [83:19] want to be correct and only offset it [83:22] once because we only have one material. [83:23] But yeah, really nice way to create [83:25] outlines. Now, there is Z fighting here [83:27] because it's going underneath the floor. [83:28] But yeah, you can also just adjust for [83:30] that as well. Hello, I am from the [83:33] future. Now adding an outline to every [83:35] single object manually. Even if you do [83:37] like something like ctr L and copy [83:40] modifiers or come over here and do copy [83:42] to selected and copy the modifier over [83:44] here. It's very tedious and timeconuming [83:47] to do that. So if you want to you can [83:50] actually use AI and ask it to generate [83:53] you a script that will automatically [83:55] check your object for you and then add [83:57] an outline material as well as a [83:59] solidify modifier if you need to. So [84:01] here I just give it a basic prompt over [84:03] here. Nothing too special here. [84:05] Honestly, it's a quote unquote bad [84:06] prompt, but it gets a point across. [84:09] Sometimes you don't need to spend time [84:10] specifying so much stuff for a prompt if [84:12] it's if it's quote unquote obvious to [84:14] the AI. Uh so then it didn't work [84:17] because it was still applying a solidify [84:19] modifier to the ones that already have [84:21] solidify modifiers. So I just got rid of [84:23] that in the second prompt here. And [84:25] that's pretty much it for that. And if I [84:27] go to the scripting tab over here, it's [84:29] just Python. I just run it. And you can [84:32] take a look at this over here. It [84:33] doesn't have an outline. And this one. [84:37] Oh, let me get rid of the outline here [84:38] as well. And let me get rid of outline [84:41] here. I was playing around. So, yeah. [84:43] Okay. So, these three don't have Well, [84:45] let me get rid of the solidify. But they [84:47] will after I run the script. So, it's [84:49] going to loop through my whole scene. [84:51] It's going to add a solidify modifier [84:54] that is given the name of outline [84:56] solidify. So, you can name your [84:57] modifiers if you want to stay organized. [84:58] And here you can see they've been [85:00] applied. And of course I can adjust my [85:02] thickness. Now if you want to take it [85:04] one step further, you can do it by [85:06] color. So here you can see that this is [85:10] jam and then jam outline. So what I [85:12] could do is like check for material name [85:17] and color and add that as a color [85:22] outline and darker shade. Of course, [85:26] this is not the actual prompt I would [85:27] use cuz you need to be more specific [85:29] here, but you could have AI take it one [85:31] step further, check for the color in [85:33] your material if you have one there, and [85:35] then add an associated colored outline [85:38] associated with your existing material. [85:40] So, that is another really handy trick [85:42] to do. Now, when you're adding outlines, [85:44] whether manually or with a script, you [85:46] might run into this error where no [85:48] matter what you do, no matter the [85:50] material offset you do or whatever, [85:52] you're not seeing anything. That's [85:54] probably because of the object normals. [85:55] So, you can just go into edit mode. So, [85:57] I'm just going to go in wireframe, hit A [85:58] to select everything, do alt N, and just [86:00] flip. And you can see now it's working. [86:02] Again, I do want to mention just because [86:04] this outline method is so popular, there [86:06] are Blender add-ons out there where you [86:09] just like select on all the objects you [86:11] want to give an outline. Hit N and [86:13] navigate to like your right your edit [86:15] preferences, Blender add-ons over here. [86:18] You just install it normally and instead [86:20] of like Power Ocean, it would be like [86:21] add border and then you just click on [86:23] that and it'll automatically do that for [86:24] you. And then of course you have your [86:25] manual adjustments either over here or [86:27] on the panel as well. So if you're [86:29] really into Blender, you can also make [86:31] your own custom add-on for this. Oh, [86:33] another tip. If you go into material [86:35] preview, you won't see your background [86:36] color change. Or if I go into rendered, [86:39] if you want to change the background [86:40] color without changing your actual [86:42] lighting, you can go into world in the [86:45] shader editor and you can search for a [86:47] color over here. Input color. Look for a [86:50] mix shader. Mix shader like here. Just [86:53] slot that in there. Slot this one in [86:55] here. And look for a is camera ray. [86:57] Yeah. Right over here. And just plug [86:59] that in as the factor. And now you have [87:01] something where you can change the [87:02] background of the color. So you can use [87:04] like a color ramp and stuff like that. [87:05] as the the background lighting is [87:08] independent. So you can play around with [87:09] this independently. Of course, you can [87:11] also use like an actual background [87:13] object. So maybe like a UV sphere and [87:16] just texture this instead of the [87:17] background, but that is an option if you [87:20] wanted to do that. Maybe we could also [87:21] do like a coffee mug up here. So I'm [87:23] going to shift A. I'm going to start [87:24] with a plane again. I'm going to e [87:26] extrude upwards. I'm going to controll 2 [87:28] or 3 for a subdivision surface modifier. [87:31] I'm going to hit I and then hit I one [87:33] more time. And then just e extrude it [87:35] downwards. And let's see. I don't know [87:37] if I want a loop cut in the Let's see if [87:39] we Yeah, maybe we do. Nah, I don't think [87:42] we need that. I'm just going to select [87:44] that face and bring it down over there. [87:46] Maybe make it a little bit smaller. The [87:48] handle. I think I'm just going to also [87:50] use a subdivided cube. If right click [87:52] somewhere, let's add a cube. And I'm [87:54] just going to control to it. And I think [87:57] here I'm going to hit A and shift [87:59] duplicate it down and move it to the [88:01] Z-axis. And then now that it's like [88:04] this, sorry, let me go into local view [88:05] to do this. And now what we can do is [88:07] select this face and select this face. [88:09] Ctrl + E and do bridge edge loops. And [88:11] we can increase the number of cuts over [88:13] here. And you can play around with like [88:15] the smoothest level and the twist value [88:17] and a lot of other things. But I'm just [88:19] going to keep it really simple, just [88:21] like that. I'm going to right click, [88:22] shade smooth, and we can go out. Let's [88:24] just make sure it's back here. So I'm [88:25] going to shift right click, shift S, [88:27] selection to cursor. But we should [88:29] definitely get rid of those internal [88:31] faces. because we'll never see them. So, [88:33] let's just delete them right now. And [88:35] there's the basics of coffee mug. We can [88:37] always add some more loop cuts to [88:38] manually adjustment however we want it [88:40] to be. I will say sometimes it might [88:42] actually be better to turn off even [88:43] thickness. Like over here, I like the [88:46] thickness of the outline, but it's kind [88:47] of going outwards. So, you might [88:50] actually find it better to turn off even [88:51] thickness. Now, I will say you can [88:53] always adjust it after. Like if I decide [88:55] to F3, convert to mesh, convert to mesh, [88:58] and apply all my modifiers really [89:00] quickly. I can always go into edit mode [89:02] and adjust the outline afterwards [89:04] manually if I want to. Now, when it [89:05] comes to modeling a capy barra, I kind [89:08] of do recommend you get a reference [89:10] image. Now, no matter what sort of [89:12] reference image you get, modeling the [89:15] modeling is very, very similar. No [89:17] matter what the style, it's basically [89:19] just a subdivided cube and then insets [89:21] for the ears and so on so if we go back [89:25] and we just start with a subdivided [89:27] cube. So, we can add a cube. Maybe we [89:30] can do like control 2 just to add a [89:33] little bit there. And I think we can go [89:35] in sculpt mode actually. Well, let's [89:36] first apply it cuz I just want to use a [89:40] little bit later. And then we can go to [89:41] like the grab tool. And I feel like we [89:44] can just like grab this and let's make [89:46] sure we turn on symmetry actually. Yeah. [89:49] And let's turn on symmetry. And then we [89:51] can just pull this out a little bit and [89:53] kind of just shape it how we want. And [89:55] I'm going to do actually go back out and [89:56] control two one more time for another [89:58] one. I'm going to do shade smooth here. [90:01] And I'm just going to shape out my cavi [90:04] bear head just like this. Maybe a little [90:06] bit more of the cheeks on the side. [90:08] Let's go into local view here just so [90:09] it's a little bit easier. And let's go [90:11] into material preview. I'm going to make [90:13] some cheeks over here. You know, push [90:16] out. This is kind of hard to see. Kind [90:19] of like just push out and make the front [90:21] a little bit flat. And honestly, this is [90:25] already pretty decent for a cavi bear [90:28] head. [90:29] You don't really have to do much else [90:32] unless you want to. And we can just keep [90:35] pulling. Keep pulling. Hit F to make [90:38] your brush smaller. [90:42] Just keep pulling. And that's pretty [90:44] much it. You just adjust it until you [90:46] get something you like. And if you want [90:48] to do the ear, we can just select both [90:50] of them. And we can just hit I and then [90:54] hit E to extrude upwards. Then if you [90:57] want to do the body, I think we can like [90:59] extrude from here cuz they're very very [91:04] they they start at the head. Their head [91:06] definitely starts over there. And then [91:08] we can just make some adjustments. [91:10] And then we probably need another loop [91:11] cut over here. And then at this point, I [91:14] feel like it's just whatever body shape [91:16] you want to. I would probably use a [91:17] reference here just to make it a little [91:20] bit easier. Turn on proportional editing [91:22] for sure just uh so it becomes a little [91:25] bit easier [91:27] to navigate. [91:30] And [91:32] yeah, and at this point it's just about [91:33] shaping the body how you want to shape [91:35] the the body. And when you want to get [91:37] to the legs, let me just do this one [91:39] more time. So let me just do it one more [91:42] time just so we get like a fulls size [91:44] body. I kind of want to keep the quads [91:47] about even spacing over here. I know [91:49] it's a little bit distorted, which isn't [91:51] great. So, we could probably like S Y0 [91:54] and flatten some of these, but honestly, [91:56] it's not really that big of a deal. A [91:59] shape that you like, we can just like [92:01] select some of them over here. And then [92:03] before I make the legs, I want to [92:04] convert them to a loop. And one of the [92:06] really easy ones is to use this loop [92:08] tools add-on. So, if I go into edit [92:11] mode, select these, and rightclick and [92:13] loop tools, circle, you can see it's [92:15] going to try putting into a circle. Of [92:17] course, I only have four, so it's not [92:19] really going to do that. Now, we can hit [92:20] I for a guard loop and then just E [92:22] extrude outwards. And yeah, you can [92:24] spend some more time polishing this up, [92:26] but that's pretty much the basics of [92:28] modeling a capabra. Now, again, it [92:31] really depends on the style. You could [92:32] select these two, right click, loop [92:34] tool, circle, and then hit I to insert [92:37] here, and then E to extrude outwards [92:38] this way. Now, going back into sculpt [92:40] mode, using the flatten tool is actually [92:42] pretty goated here, especially because [92:44] of the cavi bear's nose. [92:47] So if you do like the flatten like look [92:49] at what it looks like now and then we [92:52] can like flatten it out a little bit and [92:53] that definitely looks a little bit more [92:55] like a heavy bear nose. If you want to [92:57] smooth something you can just hold shift [92:58] and it'll smooth but it'll be a little [93:00] bit too strong. So what you have to do [93:02] first is go to the smooth tool directly [93:05] and then you can adjust the strength [93:06] here and now every time you go to like [93:08] another tool like grab and hold shift [93:11] you can see it'll smooth it but it'll [93:12] smooth it to that level of intensity. [93:14] And if you want like a sitting one, you [93:16] don't have to start from the back here. [93:17] Maybe you can just start from over here [93:19] and create your caviar from here. Maybe [93:23] add some loop cuts and then just [93:25] manually adjust it with probably [93:27] proportional editing because we want it. [93:29] So like maybe like a little bit of the [93:30] back there, a little bit of a belly. And [93:33] then maybe like one more over here just [93:35] so we get a little bit of detail. Kind [93:37] of scrunch that in a little bit. And now [93:40] we've got like a sitting caviar. [93:43] So, we might want to grab this out a [93:45] little bit. Of course, you can also [93:47] shape this in edit mode. Now, I think [93:49] inflate might be good here. So, we can [93:51] also use like inflate over here. This is [93:54] also a way to make like a bulkiness [93:58] instead of manually doing it. And then [94:00] you can like hold shift to smooth out [94:03] some of the the areas that look a little [94:06] bit more rectangular. And at this point, [94:07] if you want to use a mirror modifier, I [94:09] mean, totally go for it. And same thing, [94:12] you can just delete the vertices and add [94:14] a mirror modifier. And we want to do [94:16] that before we subdivide, of course. And [94:19] we want to turn on clipping so the [94:20] vertices don't go through each other. [94:22] And then if it's like a statue, we could [94:24] actually just do SZ and like scale this [94:26] down to zero. And now it's like a cavi [94:28] bear statue instead. And for the arms, [94:30] we can just use subdivided cubes again. [94:32] So I'm just going to add a subdivided [94:34] cube. Control 2. Let's come over here. [94:37] Ctrl L. And copy modifiers. And let's [94:40] just go over here and select the object. [94:43] So it's over there. Right click, shade [94:44] smooth. [94:46] And here we should just be able to [94:48] extrude it outwards. However you want to [94:50] do it. Just R Rtate it. And yeah, make [94:54] our arm. So nothing else really special [94:57] here. It's just about adjusting stuff [94:59] until you get like an arm that you like. [95:01] And don't worry about overlapping cuz [95:03] our scene is so small. It doesn't really [95:05] matter. We don't have to waste time [95:06] deleting the back faces and things like [95:08] that. We can also just paint our keri [95:11] vera kabi vera together. So let's create [95:14] a new material and let's just name it [95:16] kabi kabi vera. [95:19] You know I always misspell this. Is it [95:22] capi? Like cap like no cap? I don't [95:26] know. But let's do it again. So I'll [95:28] just start with an image texture over [95:29] here. Hook it up first. And I'm going to [95:31] create it in the texture painting. So, [95:35] let's come over here and let's create a [95:37] new image. I'm going to make it 4K again [95:39] because we're going to bake it again. [95:41] That'll be overkill for a cavi bear. [95:43] Actually, no. Let's just do 1024 cuz [95:47] that's all we need. And I'll call this [95:49] caviar [95:51] 32 bit float. Don't need the alpha [95:53] channel. Leaving color is black is fine. [95:57] New image over here. Let's hit alt s. [96:00] And I was painting something else here, [96:01] but again, let's do EXR and let's just [96:05] save that image. Let's go back to layout [96:07] over here and let's search for cababra. [96:10] Cool. And great. Let's go back to [96:13] texture pane interface over here. And we [96:15] can't unwrap yet because we need to [96:16] apply all our modifiers. So, make sure [96:18] you are good to go. Before applying [96:21] again, we can duplicate this. Move into [96:23] modifiers. [96:25] And let's just apply mirror. apply [96:29] subdivision. If you want to put this at [96:31] part of the painting, actually yeah, I [96:33] think I want to put this as part of the [96:35] painting as well. So I'm going to apply [96:37] these as well. So let's select this, [96:39] select this, ctr L, and link materials. [96:42] I'm going to go to edit mode, a U. And [96:45] let's just see what smart UV project [96:47] gives us. And this is actually not bad. [96:50] I don't think it's that bad. Let's make [96:53] sure our scale is one first. Uh, no, [96:55] it's not. So let's apply our scale and [96:57] go into edit mode. And let's just do [96:58] smart UV reject again. Okay, this is a [97:01] lot better now. It's not perfect, but [97:03] it's good enough for us and what we're [97:05] doing. So, we can just deal with this. [97:07] Sweet. So, we should just be able to go [97:09] into hit tab and go into texture paint. [97:12] And I'm going to choose like a car [97:14] caviar. So, I don't remember if I [97:16] mentioned this or not, but you can [97:17] actually use the color picker outside of [97:20] Blender. So, let me just make this [97:23] really small over here. And I want to [97:26] use this brown over here. So, we can [97:27] come over here, use this color picker, [97:30] and just tap on that over there. And [97:32] I'll choose that color. And now we [97:34] should just be able Now, we should just [97:35] be able to click on this. And I'll click [97:37] on this one as well. Well, we can't get [97:38] there. So, we can do alt Q just to [97:41] switch quickly to texture paint for that [97:44] one. Let's go alt Q back here. And if [97:47] you want, again, you can add it to your [97:49] color palette in your tool over here. [97:51] So, we can add this color to our [97:52] caviara. And then let's just make a [97:54] slightly darker one over here. Let me [97:57] just full screen this out. Let's go back [97:59] to our paintbrush over here. Let's shift [98:02] F2 to change our strength down just a [98:04] little bit. And whoops, I changed the [98:06] color. So, let's bring that back over [98:09] there. And right over here, just a [98:11] little bit more brown. Let's hit F just [98:12] to make that a little bit smaller. And [98:15] let's just paint. Uh I do have symmetry [98:18] on, so we could turn that off if you [98:20] want to. Um, I think I'm just going to [98:22] turn that off cuz I want it a little bit [98:24] irregular. Hit X to switch our color [98:26] palette. And let's create this one as [98:29] the base color. So, I'm just going to [98:30] select it here rather than for my [98:31] palette. And let's make this one [98:34] slightly like even darker than the other [98:36] one. And maybe a little bit more [98:37] saturated like over here. And then maybe [98:39] we can make the brush a little bit [98:41] smaller. Something like this for our [98:45] caviar. And then for the eye, maybe we [98:47] can just make the eye completely black [98:49] or a little bit brownish maybe. And [98:52] let's do shift F. And I want this one to [98:54] go all the way. [98:57] So maybe something like that. And I want [99:00] it a little bit goofy. So that's why I'm [99:03] leaving off SE symmetrical. But if you [99:05] want to do it symmetrical, you can leave [99:07] that on. Maybe you can do shift X and [99:09] select this one. [99:11] And then maybe add a little bit of a [99:12] blush on the sides of [99:16] the cab bear. And then maybe something [99:18] over here. We can make it a little bit [99:20] pink. Let's see. A little bit pink. [99:23] Cool. Shift F. Make that a little bit [99:25] smaller. Very very light pink. And oh, [99:29] let's just hit F and and then let's just [99:33] hit F to change the scale. And then just [99:35] dab it on there. Keep tapping until you [99:38] get like a blush that you like. Tap tap [99:40] tap tap tap. There we have a pretty good [99:43] looking caviar. [99:46] Oh my gosh. It looks a little bit bright [99:50] because it's really close to the light. [99:52] So maybe we should choose a darker [99:54] shade. So let's come back to layout. And [99:57] cabby bears are not they're very rough [99:59] cuz of So they're not shiny at all. So [100:01] we can just turn that probably up all [100:03] the way to one. And maybe we can add a [100:05] hue saturation over here. Hue [100:07] saturation. Plug that in. Maybe we can [100:10] bump up saturation just a little bit. [100:12] I'm holding shift so it goes a little [100:13] bit slower. And then maybe turn down the [100:16] value a little bit so it's a little bit [100:17] darker. Yeah, that looks a little bit [100:19] better. Uh you can also use something [100:21] like curves and RGB curves, right? [100:24] You've probably seen this in other [100:26] software and adjust it accordingly here. [100:29] So maybe we want a little bit more red [100:32] in the mid tones. Great. That is more of [100:35] a cav color. And then we can also give [100:37] all these outlines. So let's go over [100:39] here. Let's give it outline. Same thing [100:41] with here. Actually, we can just ctr L [100:43] and link materials again. And let's [100:46] select this one over here. Ctrll L. And [100:49] let's do cloppy modifiers. And let's [100:52] just apply our scale one last time in [100:54] case. And there we have our caviar. I [100:56] think we're at the point where it's time [100:58] to talk a little bit about art direction [101:00] and creativity and things like that. So, [101:02] I think the first thing when it comes to [101:03] creativity is to do something that you [101:06] think is not ever possible. Well, I I [101:10] guess it depends on the style. Like if [101:11] you want to do like creative, realistic, [101:13] semi-realistic, or whatever. But for [101:15] something like this where it's like [101:16] playful and goofy, I feel like it's just [101:19] like completely out of the box thinking. [101:21] So, for example, like this cafe, why [101:24] does it have to be a room? Why can't it [101:26] not be like a piece of bread itself? And [101:27] then we carve out the piece of bread. Or [101:29] instead of creating it a piece of bread, [101:31] we could make the top and the bottom two [101:33] slices of bread and then have like some [101:36] peanut butter and jelly, right? It would [101:37] be like a peanut butter and jelly [101:39] sandwich sort of cafe smashed between [101:41] two breads. One of the scariest things [101:42] about creativity is that you don't know [101:45] if it'll look good when you do it. But [101:47] the thing is, sometimes you just have to [101:49] do it just to see if it looks good or [101:51] not. And that's exactly what I'm going [101:52] to do. I'm going to create a top red and [101:54] a bottom bread, add some jelly and [101:57] peanut butter, and just see how it [101:58] looks. Uh, so maybe some other cool [102:00] details. First, if you want to like make [102:02] a little raised post here, we can just [102:04] control R and add a loop cut over here. [102:06] And now, typically, I think if we were [102:09] working local axis, we could just like [102:11] do GZ or G YY or GXX depending on how [102:17] your plane was oriented. But [102:18] unfortunately, we can't. And alt S isn't [102:20] going to work either. So, what we can [102:22] actually do is use this edge as the [102:25] pivot point. So if we come over, let me [102:28] see over here and transform orientation. [102:30] We can come over here and create an [102:32] orientation with this edge selected. And [102:35] now if we select this over here, we can [102:37] just do gy and it'll get the edges local [102:40] y-axis. And we can just bring it up just [102:42] like that. And now if we go into edit [102:45] mode, let's just move this a little bit [102:47] somewhere else. Let me change this back [102:49] to local. Gy gx. Let's see. Yeah. Okay, [102:53] it's gx. And there you kind of have like [102:54] a little detail there. Now the topology [102:57] is a little bit bad here, but we can [102:59] just control V and add a little bit of [103:02] more loop cuts there. And I'm going to [103:04] use my middle mouse button just to [103:05] scroll it down a little bit. That way we [103:07] kind of have like a sign like this. And [103:09] we can just do GX and back. But yeah, [103:12] that's a really nice handy trick. Of [103:14] course, we could also just glo global [103:16] and GXX to go into local view as well. [103:19] Okay, so I think we can actually start [103:20] applying some modifiers and just taking [103:23] our details a little bit to the next [103:24] level. So for this one, I went back to [103:26] the array modifier that we set up and [103:28] got rid of the other one. Or I think I [103:30] hid it, but if you want to use the other [103:32] one, that's totally can. So here, I'll [103:34] apply my subdivision and solidify and my [103:37] array modifier as well. And now what I [103:39] want to do is just hit L and select [103:43] um oh because it's merged. So I can hold [103:47] L to select a single object anymore [103:48] which is fine. We can just go and face [103:50] select and hold shift alt and just [103:52] select all these individually like that. [103:54] Luckily we don't have too many so it's [103:57] not really a big deal. Cool. And we can [104:00] come over here and give it a new [104:02] material. Now it's the modifier itself [104:05] might be on Yeah, it's on material [104:08] offset too. So, we can give this one to [104:10] outline. And then this one we can let's [104:15] just duplicate it and call it cover two [104:18] or whatever you want to call it. And [104:19] I'll just make this white. And then I'll [104:21] hit assign. And there we have a little [104:23] bit more variation for there. You can [104:27] also see for the jam and jelly, it's [104:28] just a subdivided cube with some loop [104:30] cuts that I stretch around there and [104:32] gave a outline itself. If you ever see [104:34] this issue where you have like an [104:36] outline over here or a mirror modifier, [104:38] just make sure you delete any hidden [104:40] empty faces over there and just delete [104:42] that and it'll resolve that issue. Okay, [104:43] so I added some extra models here. This [104:45] is just a extruded out circle with 16 [104:48] vertices. I think that's overkill. You [104:50] could probably get away with 14 or 12. [104:52] The lid is literally just the same [104:54] object except shorter. This is just a [104:58] plane that I started with. So, if you [105:00] can imagine, it's just a plane that I [105:03] extrude it up. So, I can show you real [105:05] quick. Extrude it up. Add a loop cut [105:06] back here. And whoops. Select this face. [105:09] Extrude this up. Add another loop cut. [105:12] And extrude this out over here. And then [105:14] the other thing is just a shift right [105:16] click and added a circle. Go into edit [105:19] mode and just extrude it downwards. Hit [105:21] F to fill and I. And that was pretty [105:23] much for this one. That was the coffee [105:26] machine. But what I actually want to do [105:28] now is give some thickness to our [105:29] building because we actually don't have [105:31] any thickness to our building. It's [105:33] completely flat like a pancake. So let [105:35] me first disable our solidify modifier [105:38] which is the outline. [105:40] And we could just give it a solidify [105:43] modifier. But the issue with that is you [105:46] have like a lot of insets. So there [105:48] would be like a lot of intersecting [105:49] faces. But I feel like we can just try. [105:51] So let's add a solidify modifier before [105:53] I did give it a bevel modifier. You can [105:55] also not if you don't want to. And this [105:58] actually is okay. I think if we just [106:01] let's apply our scale, increase [106:03] thickness just a little bit. [106:06] And yeah, this isn't too bad. Now, of [106:08] course, we have some issues over here on [106:10] the top because those are like extruded [106:12] outwards. So, I think one thing we can [106:15] do is actually delete the top. So, I'm [106:16] going to select this and control plus [106:19] control plus and shift alt just to [106:23] select this. And because this is covered [106:25] by the bread, I'm just going to delete [106:27] those faces because we don't need them. [106:30] Same with over here. I'm just going to [106:31] select these. Control plus. [106:34] And I think that's also covered. Yeah, [106:36] that's also covered by the shift select [106:39] this as well. Is that accurate? [106:41] Yeah, it's not never seen. So, we can [106:43] actually delete these faces, too. And we [106:46] don't want to solidify this. So, I'm [106:48] just going to Can we hit L to select it? [106:50] Yeah, it's not merged with anything. So [106:52] we can hit L to select that P separated [106:54] by selection so it becomes its own [106:55] object and get rid of the solidify [106:57] modifier cuz this one is already [106:59] solidified. So only these ones need this [107:02] solidify modifier. Now we have a few [107:04] issues here like the solidify modifier [107:06] is going to start intersecting I believe [107:08] over here. Or maybe that's cuz of my [107:09] bevel modifier. Yeah, it's cuz of my [107:11] bevel modifier. But then there's also [107:12] this issue here where there's no edge [107:15] here cuz we split it for the frame. So [107:17] we could probably like add a loop cut [107:18] here and add a loop cut here. And sorry, [107:21] I'm just going to GG and snap it over [107:23] here so it's equal. And I could just hit [107:25] F to fill that. Now, there's still some [107:27] shading issues because we need one here [107:29] as well. So, I'm going to control R and [107:31] oh, it's right next to it, which is [107:32] nice. And then let's hit A to select [107:34] everything and merge by distance and [107:36] only get rid of the overlapping ones by [107:37] putting it really low. But it's not [107:39] great when we want to bevel it a lot. [107:42] So, it might actually be better just to [107:44] start from scratch. But I don't think [107:46] it's that bad cuz we can kind of I do [107:49] want to make these like wooden poles [107:50] anyway. So we can probably just select [107:53] something like this over here and this [107:55] one as well. I'm holding control shift [107:57] again, right, to select everything in [107:59] between. I'm going to P separated by [108:01] selection on these. And then for these, [108:03] I can get rid of this solidify modifier. [108:05] Well, actually no, I'm going to undo. [108:07] What I can do, though, is just get rid [108:09] of the side faces over here. And again, [108:12] if you have a mirror modifier on, you [108:13] could probably do that as well. And [108:15] yeah, I think at this point it's really [108:17] up to you if you want to start from [108:18] scratch, if you want to split these up [108:20] into their own cubes or or not. Uh it's [108:23] really really up to you. You have a lot [108:25] of options here. Also, when you want to [108:27] apply your geometry modifier uh the [108:29] scatter on surface, the geometry node [108:31] modifier, we have to come over here and [108:33] do realize instances. Then we have to [108:35] apply this one first and then scatter on [108:37] surface. Now the issue here is that [108:39] these are no longer instances. All of [108:40] them are joined into a single object. So [108:43] what we have to do instead of using [108:44] object info is use geometry instead. And [108:48] there there should be random per island [108:50] and then we can use that instead. So [108:52] remember if I go into edit mode and I [108:54] hit L that basically selects an island [108:56] or in this case it's going to be mesh [108:58] island. So that's what it's doing. Now [109:00] you don't see any issue because it only [109:03] works in cycles. So if I go in cycles [109:05] you can see that it is working but it [109:08] does not work in Eevee. So when we bake [109:10] the diffuse in cycles, it would actually [109:14] work fine if we use that image texture. [109:16] Now, do we want to bake in this video is [109:19] the question. And I don't think I do. So [109:23] what we probably have to do [109:25] painstakingly, unfortunately, is go back [109:27] to our sprinkle material and instead of [109:29] using this, just add multiple sprinkle [109:33] materials and manually assign some to [109:37] the other one. So, I'm just going to [109:38] duplicate this. We can just delete that [109:40] with the delete key. [109:42] And yeah, I'm just going to select some [109:44] random ones. L L [109:49] and so on so forth. Are there other ways [109:52] besides manually doing it? Uh yeah, [109:54] there's a lot of other manual ways. You [109:56] could use a gradient texture sheet and [109:58] just move the UVs for each one. You [110:00] could offset the UVs with a procedural [110:02] graph. And and there's also this [110:04] solution on Blender Stack Exchange if [110:06] you want to take a look. But again, we [110:08] would still have to bake it because I [110:09] don't think this exports into a GB [110:11] folder. It's only if you're going for EV [110:13] renders, which we're not going for. So, [110:15] you do have a lot of ways, but for this [110:16] beginner course, we're just going to [110:17] manually assign different ones. The rest [110:19] of the models that you see here are just [110:21] subdivided cubes with extrusions and [110:24] loop cuts. Here you can see this is just [110:26] a cube. Well, I think I started from a [110:28] plane here that I extruded up and scaled [110:31] down and then I inset for the spoon. [110:33] This is just a duplicate of this. [110:35] Everything else is very very basic. So, [110:38] I think we are ready to create our [110:41] second scene. So, if you want to, you [110:43] can come up here, file, save [110:44] incremental, and start in a new Blender [110:47] file. I'm just going to do it in the [110:48] same one. So, I'm just going to hit A to [110:50] select everything. And if you don't want [110:52] to select your lights or whatever, have [110:54] different lights and whatnot, that's [110:56] totally understandable. But um yeah, [110:59] let's actually I'm gonna hide my camera. [111:02] And then for the lighting setup, it can [111:04] be different if you want. I don't know [111:05] if we're going to use lights yet at this [111:07] point or not, but it doesn't really [111:08] matter. And since we have everything, we [111:10] can actually just come over to [111:12] collection, rightclick, and duplicate [111:14] this collection itself. [111:16] And I can right click over here and [111:18] change the color just so it's a little [111:19] bit of um uh you know some some sort of [111:22] differential hierarchy. We can call this [111:24] cozy cafe. And then the other one will [111:26] be Chad Cafe. So this one's going to be [111:29] Chad Cafe. You can be totally more [111:31] organized if you want to. And we can [111:32] just uncheck it and recheck it if you [111:34] want ever want to go back. Now, if [111:37] there's ever a chance where you want to [111:39] delete everything in a cafe, you can [111:41] rightclick and do delete hierarchy, and [111:44] that'll delete everything in the [111:45] collection. So, I can come over here, [111:47] delete hierarchy. It'll delete the [111:49] collection and everything inside. [111:50] Sometimes you might delete the [111:52] collection, but it will keep all the [111:53] objects. It'll just delete the [111:55] collection instead. So, that's just a [111:56] tip and trick there. And now we can work [111:58] on our second cafe. Another tip and [112:00] trick, modeling trick. Let's say I [112:02] deleted this panel in between these two [112:04] and I want to snap this to the new panel [112:07] on the side over here. Using the default [112:09] snap is very tedious and timeconuming. [112:12] So what you can actually do is change [112:14] where you want to basically offset your [112:17] snap. So in that case we do G and then [112:19] we hit B and then we can select the edge [112:21] that we start like somewhere over here [112:24] and then we can select our ending place [112:26] that we want to snap to right over here. [112:28] Now it's going up and down. So we can [112:29] just lock it on the Y-axis and then we [112:31] just snap it there. Just another [112:32] example. It's like really convenient if [112:34] you want to make like a hook or [112:35] something. If I do GZ and try to snap [112:37] it, it's kind of awkward a little bit. [112:39] But instead, if I do G and then I hit B [112:41] and then I select uh edge over here and [112:44] then lock it on the Z-axis and edge over [112:46] here, you can see that it perfectly [112:48] snaps just like that. So I don't know if [112:49] I mentioned this earlier, but you can [112:51] change modifier properties for every [112:54] selected object holding alt at the same [112:56] exact time. You can see they're all [112:58] changing at the same exact time. So now [112:59] we can talk about modeling glasses. So [113:02] modeling all types of glasses are very [113:04] very similar. Uh when you're first [113:06] starting out in a low poly style, [113:08] they're all made with pretty much just [113:10] subdivided cubes or subdivided planes in [113:13] this case that you later convert to a [113:14] cube. So anything just right click, save [113:17] your image, download it, and once you [113:19] get your reference image, you can just [113:21] click and drag it in there. Just make [113:23] sure it's a compatible image format. [113:25] Although Blender supports a lot of [113:27] different kinds of formats, so you [113:28] should probably be fine. And you can do [113:31] alt R to reset the location. I mean [113:33] rotation and alt G to ro reset the [113:35] location if you want to work from here. [113:37] If you don't really care where you work, [113:38] you don't have to. And I'm working from [113:40] this way, but if you prefer to RX90 and [113:43] prefer to work from a side view, you can [113:46] do that as well. Anyway, it's going to [113:48] be the same logic here. We're just going [113:50] to add a plane and just scale it down. [113:53] and I'm on the RX90. And same thing [113:55] here. We're just going to basically [113:58] extrude out and match the glasses. So, [114:03] we can just do that. And again, you can [114:05] also do control rightclick to quickly [114:07] extrude if you want to do it that way as [114:09] well. And that's all I'm going to be [114:10] doing on this over here. And then for [114:13] these last two faces, I'll hit F and [114:15] fill them. And if you ever have like a [114:16] gap here, just add another loop cut [114:18] there and shape it. Same thing over [114:20] here. Again, if you want to, you can add [114:23] another loop cut right over here. I'm [114:24] going to hit O to turn on proportional [114:26] editing and do that. Again, if you like [114:29] to work in X-ray mode instead, you can [114:31] do Alt Z, and that will just put you in [114:34] X-ray mode. And we can just move this [114:35] back a little bit behind over there. So, [114:38] Alt Z if you want to work in X-ray mode [114:40] instead. [114:42] And then here, let's add a mirror [114:44] modifier. So, we're just going to add a [114:46] mirror modifier. Whoops. Sorry, my [114:47] Chinese keyboard is on. And I'm just [114:49] going to go into edit mode. And I'm [114:51] going to use control period to move the [114:53] origin point just somewhere in the [114:55] center over here. And I'm just going to [114:58] control period to confirm that. And now [114:59] I'm just going to come over here and [115:01] just extrude this. And extrude it one [115:03] more time. And whoops. We need to turn [115:04] on clipping. So it goes inside GX. And [115:06] just move like that. And then everything [115:09] else is pretty much just refinement at [115:11] this point. For these details, you can [115:13] add them with just by duplicating these [115:17] over here. And you probably want to give [115:19] those a subdivision surface modifier as [115:22] well. Scale those down and just [115:24] arbitrarily shape it in the way that you [115:26] need. [115:28] But again, I don't think anyone's going [115:30] to be seeing that, so it's probably not [115:32] necessary. And same thing with the [115:34] details over here. We can just extrude [115:36] some of these extra ones over here and [115:41] over there. Again, it really depends on [115:43] your glasses. And then for this final [115:44] one, we could probably just do something [115:46] like that. all just extruded planes. And [115:50] now we can just take this and just hit E [115:52] and extrude it along the Y. If you need [115:54] a reference image on the side, you can [115:57] go for one as well, but I don't really [115:59] need one cuz I'm not going to pay too [116:01] much attention. I'm just going to hit E [116:02] one more time. G Y GZ. Probably scale [116:06] this down. Probably scale this down a [116:08] little bit as well. Maybe have another [116:10] one here. Scale that down. And then [116:13] maybe select all these. I'm going to alt [116:14] Z cuz I want to go in solid view and [116:16] kind of just rotate it. Everything else [116:19] is just adjustments at this point. [116:21] Great. And that's the basis of glasses. [116:22] We can do control 1 for a subdivision [116:24] surface modifier. And then we can give a [116:26] solidify modifier for the body itself. [116:28] But let's solidify it first. Increase [116:31] the just like a little bit. Apply our [116:34] scale shade smooth. That made it a [116:37] little way too thick applying our scale. [116:39] So we can just tone that down just a [116:40] little bit. And oh, I guess if you want [116:41] to do the interior, we can do that right [116:43] now. Before you apply your modifier, [116:45] select the inner loop with alt, hit F to [116:49] fill it, and then just select it and P [116:51] separate by selection and get rid of the [116:53] subdivision surface modifier. We don't [116:55] need that anymore. Now you just select [116:57] with this, right click, and just do [116:58] shade flat cuz there's no other shading. [117:00] And there you have your glasses. I don't [117:01] know if this needs a solidify modifier, [117:03] so you could probably get rid of that. [117:04] And then do control 1 to add another [117:06] subdivision service modifier if you want [117:08] to. Then in this time you could go into [117:09] edit mode and just scale it inside here [117:12] and just to fill up the cracks over [117:14] there. A little overlap is fine. And [117:16] yeah, that's pretty much it on how to [117:17] model any sort of glasses that you want. [117:19] Another modeling tip and trick is let's [117:22] say you accidentally have something here [117:23] and you want to snap it between [117:24] something that's mirrored. You can [117:26] select both of the end vertices or faces [117:28] or whatever. Shift S cursor to selected. [117:31] Then select this one. Assuming the [117:33] origin point Q origin to geometry is [117:36] there and you can just do shift S and [117:38] selection to cursor keep offset but in [117:41] this case both have the same result here [117:43] and then we just S Y there and you've [117:46] got the snap there. Same thing if you [117:47] want to like shift Duplicate you can go [117:49] in edit mode select both of these shift [117:51] S cursor to selected go over here shift [117:53] S cursor to selection to cursor. [117:55] Sometimes when you're using the bevel [117:56] modifier it like glitches out and does [117:58] this really funky thing. One thing you [118:00] can do is try different methods. So if [118:03] you go into geometry here, you can [118:05] change these to arc and give that a try. [118:07] I'm using control and middle mouse [118:09] button to in order to quickly change. [118:11] That way I don't have to use my left [118:12] mouse button to click on it. I can just [118:14] cycle through it holding control. And [118:16] here arc seems to resolve that issue. So [118:18] I can just leave it like that. When it [118:19] comes to low poly characters that are [118:21] very stylized, it's very typical that [118:24] you just start with a subdivision cube. [118:27] So that's all I did and I just added a [118:29] loop cut over here for shaping. But as [118:31] you can see, if I dissolve it, it's just [118:32] a subdivided cube. If I get rid of this, [118:34] you can see it's just a cube. So [118:36] typically, I think working with [118:38] subdivision 2 and then applying it and [118:41] then just selecting one of these over [118:42] here and right clicking doing loop tools [118:45] to circle and then just hitting E and [118:47] extruding it outwards is a really common [118:49] way just to create like arm and then [118:51] just rotate it however you want it and [118:53] shape it. You can also add a guard loop [118:56] depending on the style that you want. [118:58] So, let me just show you if I do control [119:00] 1 to add another subdivision surface [119:02] modifier. You can see that's kind of [119:03] what it looks like if you were to shape [119:05] out this one. Maybe E extrude it out one [119:07] more time. And it's honestly not that [119:08] bad. Uh you can also before you extrude [119:10] it out, you can hit I to insert it and [119:13] then E and extrude it out. So, this is [119:15] just gives it a little bit more of a [119:17] hard edge there. And if I do control 1 [119:19] to add a subdivision surface, you can [119:21] see that as well. Of course, this is the [119:23] same thing as adding a loop cut after [119:25] extrusing, adding a loop cut here and [119:27] kind of like scaling down. It's pretty [119:29] much the same thing there as well. Now, [119:31] with the mirror modifier, we can just [119:32] mirror it on the other side. And again, [119:34] we don't actually have to delete that [119:35] half. So, in this case, it'll be the [119:37] Y-axis cuz I'm on the Y-axis. And then, [119:40] we need to see it on this side. So, I'm [119:42] going to do bisect. And that basically [119:44] just cuts our mesh. Now, I don't like [119:46] this because it's showing a ghost [119:48] method. So, what we have to do is come [119:50] over here and do on cage. and it'll [119:52] actually show you the real update on [119:54] this side this time based on this one. [119:56] Now, if you want to mirror this side on [119:58] this side instead, you can do flip. And [120:00] now you can see it'll mirror this side [120:02] onto that other side. But this case, I [120:04] already have the circle over here. So, [120:06] I'm just going to do that. And now, when [120:08] I extrude and rotate, you can see that [120:11] that is my character there. And when [120:13] you're done, you can probably just I to [120:15] insert E and extrude inwards just to [120:17] make a sleeve. And then I think from [120:19] here you could probably shift duplicate [120:20] and probably use this as the arm itself [120:24] and you can just extrude that out. Now [120:26] it does look like we're getting shading [120:28] issues here. Oh, I forgot to do bisect. [120:30] My bad. I must have accidentally turned [120:32] it off. And we can do control 1 to add a [120:34] subdivision surface. Now it's a little [120:35] bit too thin there. So we could probably [120:38] add two loop cuts to brace it up a [120:40] little bit if you wanted to do that way. [120:43] Or again, you could just select both [120:45] these other shift E, which is also [120:47] another option. Now, the feet are done [120:49] exactly the same way. Again, if you want [120:51] to use a separate subdivided cube, you [120:53] can totally do that, but just pick some [120:55] random ones. Hit I to insert them or [120:58] right click and do circle. Well, sorry, [120:59] I should have done right click, circle [121:01] first, and then you can probably just [121:04] probably move around it actually a [121:05] little bit closer and then just extrude [121:06] it outwards. So, same same exact deal [121:09] with the the feet as well. If you're [121:10] wondering how I did the hair, it's just [121:12] subdivided cubes that I went into sculpt [121:14] mode and just sculpted with elastic grab [121:17] and grab and a little bit of the smooth [121:19] brush as well. Also, don't be afraid if [121:21] you want to like do it separately or [121:24] like select these faces and dot control [121:26] plus and P separate by selection and [121:28] just have them as their individual [121:30] things. You can totally do that as well. [121:32] Uh, so here you could probably select [121:34] this Ctrl+ B separated by selection. And [121:38] I think given the way we're shading [121:40] this, it doesn't matter if there's like [121:41] a hole there. As long as you like plug [121:43] it in and plug it up, it's probably [121:45] fine. So, it's really up to you and how [121:47] you want to do your character. There's [121:48] really no wrong or right. And just focus [121:51] on having fun and over time you'll [121:53] develop, you know, your own methods. [121:54] Also, I just wanted to mention if you're [121:56] like texture painting the body and you [121:58] don't know how to unwrap it, again, just [122:00] use smart UV project. It doesn't really [122:02] matter. It won't give you the best sort [122:03] of cleanest unwrap, but it'll be enough [122:05] for a painting. Over time, you'll just [122:07] develop a natural intuition. But if you [122:09] are curious, the entire idea is kind of [122:11] imagine where you want to like cut it in [122:14] real life and flatten it. And generally [122:15] where that happens is if you can imagine [122:18] each object is a bunch of different [122:21] objects. So here you can imagine this is [122:22] like a cylinder and then this whole [122:24] entire thing is like a cube and then [122:26] this is like a cylinder and then these [122:28] are also their cylinders. So when you [122:30] want to mark your seams then let me just [122:32] come over here. You can probably imagine [122:35] something like this and dot control E [122:37] and mark your seam over here. Now [122:39] because we used the mirror modifier both [122:41] of the sides are identical. So instead [122:42] of having to select all of those on this [122:45] side we can actually just do control [122:46] shift M and select an axis here. In this [122:49] case it'll be the Y-axis and it'll [122:51] automatically select it there. We can [122:53] just do Ctrl + E and mark seam. And [122:55] that's not to be confused these red [122:57] lines with our crease lines. I think I [122:59] call them SH. Sorry, those are crease [123:01] lines. If you ever want to edit it again [123:03] and don't want to select both sides like [123:06] over here, you can turn on this. So in [123:10] this case, it all mirror on the Y-axis. [123:11] And it only works if your mesh is [123:14] identical on each side. Now, if you have [123:15] like a messed up over here, it'll still [123:17] work if you adjust it over here. Let me [123:19] turn that on. Like it'll still here. So [123:22] it's only like basically you're right [123:23] next to vertices. Anyway, if you did an [123:25] inset first, you probably have a guard [123:27] loop like something like this and then [123:29] another inset. And you can use the guard [123:30] loop as the edge here. In this case, I [123:33] didn't inset. So, we do have a little [123:35] bit of poor topology here, but it's fine [123:37] if you're just starting out. There's [123:39] nothing really here to worry about. And [123:40] then for models like these, honestly, [123:42] this topology is also fine as well. I'm [123:45] just going to control E mark seam. And [123:46] now, if I do unwrap and angle based, you [123:50] can see that it's still not going to [123:52] work. And the reason is because because [123:54] this body is still a 3D object. We never [123:57] actually sliced it up. So one thing we [124:00] can do is probably just hit edge select, [124:02] hold alt, and probably use this control [124:04] E mark seam and then use this instead. [124:07] And you can try some of these other [124:09] unwrap methods. Uh conformal is [124:11] typically for like hard surface models [124:13] where angle based is typically better [124:15] for what we call organic models where [124:18] it's like using subdivision surface [124:19] modifiers whereas conformal is like hard [124:22] edges that kind of stuff like machines, [124:24] guns, but it really depends on the [124:26] project. Now this is definitely better [124:28] but it's still not completely perfect. [124:30] And if you can imagine why, like we have [124:32] a cylinder here, but we're also like [124:34] cutting the cylinder in half here. But [124:36] then inside itself also has like a mini [124:39] cylinder because we extruded it in. If [124:41] you didn't extrude it in or you deleted [124:42] this because you'll never see inside, [124:45] which you actually can totally do [124:46] actually. I I don't know. I don't think [124:48] we need that. But you can imagine that [124:50] this inside is also a cylinder itself. [124:53] So we could probably mark something like [124:54] this or maybe one of these edges and [124:57] control E mark seam. And then we could [124:59] probably get rid of this cuz we don't [125:01] need to cut. If you imagine we cut this [125:03] out, then it'll just be flat like a [125:05] pancake. So we don't actually need to [125:06] cut it again down in the center. We [125:09] could control E and clear seam. And then [125:11] we probably don't need to slice it over [125:13] here either cuz we have a slice down on [125:15] the bottom. Again, there are multiple [125:16] ways to unwrap the same object. You [125:19] could arguably go for this one because [125:21] you might get distortion on this like [125:23] angled face if that makes any sense. But [125:25] for all intent purposes, this is an [125:27] ideal unwrap. If you mirror this tele [125:30] side, you'll get an idea on unwrap. But [125:31] again, don't worry about it. Just use [125:33] smart object and move on and have some [125:35] fun. Okay, so I have both my scenes [125:37] done. If I uncheck Chad Cafe and I show [125:41] Cozy Cafe, I have both of them here. So [125:43] what we have to do now is prepare our [125:46] image textures for export. Now, if you [125:49] did not make any adjustments in your [125:51] shader editor to your image texture, [125:52] it's just plugged into principal BSDF. [125:55] You can simply go into like create your [125:57] image. Oh, I just go to texture paint UV [125:59] editor. Oh, this one's image editor. [126:01] Actually, I think you can also do it in [126:02] the UV over here. Anyway, go through [126:04] each of your EXR files and then just do [126:07] shift alt s, which is also right over [126:09] here. Save as. And then save it. And the [126:11] reason we are doing PNG now is because [126:14] EXR is huge. Look at those file sizes. [126:17] We don't want to load any of that. And [126:19] if you want to increase the preview, you [126:20] can do over here. And then you just want [126:22] to save it as a PNG. And your colors [126:24] should be fine. If you ever notice that [126:26] your colors are not fine, you have to [126:28] save the image through the compositing [126:29] tab over here. Create new over here. And [126:33] this by default is the camera. So if you [126:35] have a camera and you hit F12 to render, [126:38] render over here. Render your image. [126:40] You'll see whatever your camera sees. So [126:41] I don't know if I have a camera. Oh, I [126:43] do have a camera. So you here you can [126:45] see that. So basically, we want to [126:48] unplug this. This one's just a viewer [126:49] node. So you can leave that in if you [126:51] want to, but I'm just going to get rid [126:52] of that as well. Going to delete that. [126:54] And we want to hit M to mute this. Shift [126:56] A and search for an image. Search for an [126:58] image. And then here we want to open one [127:01] of ours like over here. Just plug it in [127:04] over there. And make sure this is set to [127:06] linear rec 709 which is the default [127:09] standard in Blender 5.1 I believe for [127:11] EXR. And you have to take into [127:13] consideration the size of your image [127:16] over here. So let's see. It's 1024x [127:18] 1024. So we have to come over here, [127:20] leftclick, drag down to select both of [127:22] them. 1024. and then do F12 to render. [127:25] And now you can save image, save as, and [127:28] save it as a PNG here. That's only if [127:30] your colors do not match up to your EXR [127:32] files. Now, converting all these and [127:34] saving them all as a PNG file has two [127:37] issues. First, saving an image won't [127:40] keep our changes. If I go into Cozy Cafe [127:44] and pick on the Cabra over here, what [127:46] about these? If we just save it as a [127:48] PNG, we lose these adjustments. Yes, you [127:50] could bring this into another software [127:52] like Figma or Adobe Photoshop or [127:55] whatever and adjust it there and that [127:56] would be fine as well. You could just do [127:58] that that way as well. But if you did [128:00] something really complex in Blender, [128:02] then how do you save it in Blender [128:03] rather than put it into external [128:05] software? Well, that's where baking [128:07] comes in. So, if just for an example, if [128:09] I hover Kirby over here, you can see [128:12] that the shadow number changes. That's [128:14] so weird. Why is the shadow not [128:16] changing? Shouldn't it not react to [128:17] light? Well, that's because there's no [128:19] real-time lighting on this website. It's [128:21] all baked into the texture itself. So, [128:24] here you can see that the image itself [128:26] is the one that contains the lighting [128:28] information that I baked in Blender. So, [128:30] baking is basically the idea that you [128:32] save some amount of information. That [128:35] way, you don't have to do realtime [128:37] calculation for it later. It doesn't [128:38] just have to be lighting. You can also [128:40] do like animation and whatnot. So, this [128:42] is a very common method to do on a lot [128:44] of creative websites. Here you can see [128:46] his arm is moving but the shadow is [128:47] baked in there and stop moving. Now the [128:49] reason we bake is not only just to save [128:51] our changes we do in Blender but it's [128:53] also to optimize cuz we have a lot of [128:55] textures and each of them have their own [128:57] respective size and honestly not all of [129:00] them need the amount of resolution that [129:03] they do. So the whole idea is to take [129:05] all these three or how many textures we [129:09] want and then put it on a single texture [129:11] itself. That way instead of loading like [129:13] four separate files, we only load one [129:15] file and that one image texture contains [129:18] all these four other paints that we had [129:20] there. So it will be a little bit hard [129:22] to follow. If you don't get it the first [129:23] time, don't even worry about it. But let [129:25] me just show you what baking is. Right [129:27] now we know that we have a UV map that [129:31] maps to our If I go in over here to [129:34] object data properties under UV maps, we [129:36] know this is our UV map to map our 2D [129:39] image to our simulated 3D space here. [129:41] Now, we also need one for baking. So, I [129:44] need to add a separate one. And this is [129:46] the map to go from whatever 3D object is [129:49] mapped here to map to our shared [129:51] texture. So, I'm just going to call this [129:53] baking, but call it whatever you want. [129:56] And let's say I want to share it with my [129:57] other image textures here. So, just from [129:59] experience and my intuition, this is [130:02] more than fine just to put three [130:04] different image textures over here on a [130:06] single texture. In order for that to [130:08] work though, we also need to give all [130:10] these baking UVs as well. So, we can do [130:13] baking over here and then baking for [130:15] this one as well. Now, if it helps, [130:19] instead of having to retype it every [130:21] time, you can just Ctrl + C and copy it [130:23] and then Ctrl +V and just paste it right [130:25] over there. Again, you can also write a [130:26] Blender script to add a second UV called [130:29] baking to every single one of your [130:31] objects. You can do that if you want to. [130:32] It's just a simple LLM prompt, but I [130:35] only have three here, so I just manually [130:36] edited all three of them. Now, when you [130:38] have them highlighted, it means you're [130:39] going to operate in this domain. This [130:41] icon me here means it's the one that's [130:44] showing. No matter which one is showing [130:45] here, it's not going to change because [130:47] when you add a new UV map, it's going to [130:49] take the one above information and use [130:51] it as that one. So, let me go into the [130:53] UV editing here. And if I just mess up [130:55] the baking one with it highlighted, I'm [130:57] operating in the baking one now. Whoops. [130:59] Sorry. Let me just obliterate this [131:01] somewhere else. So, let me actually [131:02] change this one to caviar so we know [131:04] where we're going. And as you can see [131:06] that it's kind of mapping into those [131:07] black areas into the B. That's why we [131:09] saw what we did. As you can expect, [131:12] we're going to do the same thing. So, we [131:14] can leave this one as the one that's [131:15] rendering. And then this is the one that [131:17] we're working in. So, what we want to do [131:19] is select all three of these. Make sure [131:21] that baking is selected for all of them. [131:23] And go into edit mode. Hit A to select [131:25] everything and U. And we're just going [131:27] to smart UV project. Add some island [131:30] margin. Island margin here is actually [131:32] important. The reason I didn't cover it [131:33] earlier is because the gap between the [131:36] painting was probably really big anyway. [131:38] So there's probably not any sort of [131:40] issue. Anyway, the reason margin matters [131:43] here is because of this thing called mit [131:45] mapping where as you get further and [131:48] further away your it will automatically [131:50] optimize and reduce the resolution of [131:52] your texture. And since because when we [131:54] bake, there will be like outpouring [131:56] outside of the UV islands. When we [131:58] downscale that texture, it's going to [132:00] use like sampling techniques to [132:02] basically quote unquote recreate a lower [132:05] resolution of your original texture in [132:07] order to save on performance. Cuz when [132:09] you're far away, right, you don't need [132:11] as much detail until you get closer. So, [132:13] let me cancel this real quick. If you [132:15] imagine when you scale this image down, [132:17] this black area is going to get smaller [132:19] and smaller and smaller and then it [132:21] might eventually overlap if you don't [132:23] have a decent amount of margin. So there [132:25] are general guidelines that honestly you [132:27] can ask LLM to give you probably be [132:30] pretty accurate. But if you're at 4K, [132:33] the general device is 32 pixels. Now [132:35] this is very generous. So you can [132:36] actually go get away with significantly [132:38] smaller. Again, it depends on your use [132:40] case, but that's like general practice. [132:42] 4K is 32 pixels of margin. And then if [132:44] you do the math there, it's about 0008. [132:47] So again, that'll be based on project by [132:50] project. But we can actually just go [132:52] over here and smart U reject and set [132:54] this to 0008 over here and unwrap it [132:57] like so. And now we are good for baking. [132:59] But one thing is I don't actually want [133:01] to bake this or this. And the reason I [133:04] don't want to bake this is because I [133:06] want to be able to change the image [133:07] later. So we can just leave it as is. [133:09] And if you want to make your life [133:11] easier, you can sacrifice a little bit [133:12] of performance by separating this by [133:14] selection. That way you can just rename [133:16] it and target it easier in your code. [133:18] But I'm going to leave it joined just to [133:19] save on performance. Right? Reduce to [133:21] draw calls as a single object. So I [133:23] think the ones that I don't want to [133:25] change, I want to bake. So not these [133:28] signs, but this bread here. I'm never [133:30] going to change this bread. Same with [133:32] this one and this caviar. Now, if you [133:35] did bake the changing ones, you could [133:36] totally change it later if you wanted [133:38] to, but in that case, you would have to [133:40] re-ake or rechange the UV map and [133:43] reexport your object. So, you typically [133:45] only want to bake something that you [133:46] know you won't go back and ever change. [133:48] So, in this case, it's going to be the [133:49] bread and the caviar. If you want to [133:51] change the caviar texture to like a [133:53] smiling one or whatever, different [133:55] variations, I would not bake the [133:56] caviara. So, these are the ones I'm not [133:58] going to be changing. If you have [133:59] multiple expressions for the cabaria and [134:02] you have multiple adjustments in [134:03] Blender, you can bake each one of those. [134:04] Put it on like a sprite sheet and [134:06] something like that. If you have no idea [134:08] what I'm talking about, it's totally [134:09] fine. But for this tutorial, I'm just [134:11] going to say if it's static, if you're [134:12] not changing it, just bake it. Or if you [134:14] don't want to waste your time baking cuz [134:15] you didn't make any adjustments, then [134:18] just do what I did earlier where you [134:19] just saved it as PNG. Okay, so these are [134:22] the ones I can bake together. That means [134:24] we have to give all these baking. Again, [134:26] if you want to use a script, it's [134:27] probably time saving now because we have [134:29] to add it so many times. But now that we [134:31] all have them baking, we can go here, [134:34] edit a to select everything. Smart UV [134:37] project 008 and unwrap. And this will be [134:40] our unwrap here. And whoops, I selected [134:43] the wrong object. So, let's do that [134:44] again. And let's do unwrap over here. [134:47] Now, it might scare you that the caviar [134:50] is taking such a small percentage of the [134:53] map here. Is that going to make my color [134:55] super blurry? Because it doesn't have as [134:57] many pixels. I think from experience, [135:00] the blur that you're going to notice [135:02] from this sort of size over here from [135:04] far away is probably not going to be [135:06] noticeable. But if that ever concerns [135:08] you, there are ways to adjust your UVs, [135:11] like selecting an island, hitting L to [135:14] select some of these, hitting S to scale [135:16] it down, and then hitting A, and then [135:17] coming over to UV and doing pack islands [135:19] over here. And then we can just do pack. [135:21] and it'll try and repack stuff and [135:23] rescale your other UVs to match the [135:26] current UVs. Of course, you can also do [135:27] it manually yourself. So, here you can [135:30] select this island, which is definitely [135:31] a cavi bear island, and just scale it up [135:33] yourself. And because the spacing in [135:35] between is so large, it's fine. You can [135:37] actually even rotate it cuz we have all [135:39] this extra space over here. And then the [135:42] ones that you don't need as much pixels, [135:44] you can make it smaller and so on so [135:46] forth. So, really up to you. And if you [135:48] want to look for like a paid add-on, you [135:50] can come over here and take a look at UV [135:52] Packmaster 3, which is I think pretty [135:54] much has a monopoly on UV packing for [135:57] Blender. It's definitely the best, but [135:59] you can also use the built-in one over [136:01] here and and try some of these other [136:03] options as well. But anyway, for all [136:05] intended purposes, it's probably just [136:07] going to be fine. And if you for some [136:09] reason don't see this, just make sure to [136:10] turn this on. But yeah, we're actually [136:12] ready to bake right now. So these look a [136:15] little bit small. I don't know what they [136:16] are. But you can probably just select [136:18] them and see. Oh, it's the ears over [136:20] here. Yeah. Anyway, doesn't really [136:22] matter. I just know from experience. [136:23] Even though this isn't perfect, you can [136:26] we can just start picking. So, for each [136:28] of these, we need to create another [136:30] image texture. So, in over here for [136:32] bread, bread is the one that's painted. [136:34] We need to create another image texture. [136:36] So, I'm going to shift a duplicate this [136:37] one. Get rid of this one. I'll call this [136:40] baking bread. Uh here I'm going to do [136:41] 20480. Again, that's just from past [136:44] experience. Color doesn't really matter [136:46] here. We don't have any transparency. [136:47] Get rid of that 32 boat load. Great. [136:50] Let's just make sure to save that. So, [136:52] let's do breaking red over here and do [136:54] alt s. And then we should be fine to [136:56] bake as PNG. But just to be safe, I'm [136:58] going to do EXR and just save it like [137:00] that. It probably shouldn't matter, but [137:02] whatever. And now we need to copy this [137:04] same image texture over here and go into [137:06] the Cabi Bara painted one and also paint [137:08] it here. Make sure it's white and [137:10] highlighted. And then this one we don't [137:12] actually have to do anything because it [137:13] actually shares the same sort of one [137:15] over here. So, now that I think about [137:16] it, I messed up. We only need to bake [137:19] these two together. And we can just [137:21] replace the image section there later [137:23] because this is an identical copy of [137:25] this one. So, I can actually go back to [137:27] UV editing, which is even great because [137:30] now we can just um actually we don't [137:33] have to unwrap again. We can just pack [137:34] now with this. So, if we do UV and pack [137:39] islands, yeah, now we have a lot more [137:41] space here. So, these are the only ones [137:42] we actually have to bake together. Let's [137:44] change this to breaking bread. I am [137:46] wasting a lot of texture space here. I [137:48] know we probably could add other things [137:50] to bake here, but it doesn't really [137:51] matter. Yeah. So, what we have is [137:53] breaking bread highlighted in both of [137:55] our painted materials. Then we can come [137:58] over here and we have to change to [137:59] cycles over here. Now, the outline [138:01] method is not going to work out of the [138:02] box. There are ways to make it work in [138:04] cycles rendered, but for now, we're just [138:06] going to have to tolerate it. And then [138:08] we can scroll down over into bake. [138:10] Simple bake is a goated add-on for [138:12] baking that just makes it a lot easier. [138:14] You don't have to like add all those [138:15] image textures and whatnot. But we're [138:17] going to do it the native Blender way. [138:19] And instead of combined, which is what I [138:21] did in my room one, which includes the [138:23] lighting of the cycles render engine, [138:25] we're just going to do diffuse, which is [138:27] basically just the color. And we don't [138:29] want to add any lighting influences. We [138:31] just want the color. So, we're going to [138:32] get rid of those. And clear image. If [138:34] you ever need to re-ake, it'll just [138:35] clear your original image and bake right [138:37] on top of that. If for some reason you [138:39] want to bake another thing over it [138:41] later, then you can like with all our [138:43] empty texture places over here, we could [138:45] actually add another object and then [138:47] bake it at another time. In which case, [138:49] you don't want to clear the image here. [138:51] It doesn't really matter for us. And I [138:53] never had to touch this in my career. [138:54] So, we're not going to touch this here. [138:56] Great. So, let's just select our [138:57] objects. So, I'm going to select this [138:59] and select this. And we should just be [139:01] able to hit bake. Great. So, if I go [139:04] into my UV editing and I go back over [139:06] here, you can see success. Let me turn [139:09] off this real quick. And here you can [139:11] see that there's a lot of bleeding [139:13] overlap. So, I must have not unwrapped [139:15] with the proper margins, which is fine. [139:18] So, we can just do it again. Uh, let's [139:20] do it again. And sorry, let me deselect [139:22] it. Oh, okay. So, after I did the pack [139:24] islands, it actually put stuff a little [139:26] bit too close. And now you can see the [139:28] bleeding. So, because the colors are I [139:31] guess they're yeah, they're not actually [139:33] overlapping like it might cause issues [139:35] or you might be able to get away with [139:37] this, but sorry, I messed up. So, let's [139:40] do that again. Let's go into edit mode. [139:42] A U smart U project unwrap. Uh, let's do [139:45] L. I guess it's good for refresher. Just [139:48] make that a little bit smaller. We can [139:50] make the cavi bear ones a little bit [139:51] larger. So, I'm going to deselect that. [139:53] Hit L. I'm just selecting random cavi [139:56] bear ones. Scaling it up a little bit. [139:58] Hitting A just like all UV. Let's do [140:00] pack islands here. And oh, it does have [140:03] the margin there. H. Let's just do pack [140:05] again. Let's see. Does it work? Yeah, I [140:08] think it's adding the correct amount of [140:10] margin. I'm not sure if the Blender one [140:12] is messed up cuz I usually use UV pack [140:14] master. It's been years since I used the [140:17] default Blender pack one. So, I don't [140:19] know if it's like good or not. But [140:21] anyway, it probably doesn't really [140:22] matter just from my experience. You can [140:25] get away with a very small margin [140:27] honestly. Great. So now we can just do [140:29] the same thing again. This time we do [140:31] want to clear image. So both selected. [140:33] We can just hit bake. Cool. So now we [140:35] should just be able to alt S and save [140:38] our image. So here you can see that we [140:40] saved our image. Yeah. So this is [140:42] actually fine. All these colors are [140:44] fine. So I'm not going to worry about [140:45] it. Great. Let's go back to layout. [140:47] Let's change this to Eevee. And I'm [140:50] going to duplicate this and move it to a [140:52] new collection. And I'm just going to [140:54] call that for baking and just hide it. [140:57] You you could alternatively make the [140:58] other one for exporting instead. Then [141:00] for this duplicate one, I'm going to [141:01] duplicate this and rename it to baked. [141:05] So we can just do baked. And actually, [141:07] let me duplicate this one more time just [141:08] to show you the difference here. So we [141:10] have regular cavi vera, which is this [141:12] one. And then this one will be our baked [141:14] one. So I'm just going to search for PNG [141:16] over here. And we can plug that in there [141:18] just to see what we get. And we need to [141:20] use the baking UV map this time. We can [141:22] get rid of this one. And here you can [141:23] see side by side what they look like. [141:25] Now, it's not exactly the same because [141:27] this one is still being affected by the [141:29] lighting. So, what we actually have to [141:30] do is put this directly into the [141:32] emission shader. And same with this one. [141:34] Sorry, I accidentally got rid of it. My [141:36] bad. It's the same as using an emission [141:39] node like this. Same exact idea there. [141:43] I'll just make it a little bit more [141:44] explicit. So, if we do the same thing [141:46] over here, let's plug that in real [141:48] quick. We see the same exact thing over [141:51] here. Again, if for some reason your [141:52] colors are not right, you might have to [141:54] play with the compositing. Other common [141:56] solutions include going back to cycles [141:58] and instead of baking with diffuse, you [142:00] bake with emission. Another thing is, I [142:03] should have mentioned it earlier, but [142:04] make sure again to apply all your [142:06] modifiers before you unwrap. Same thing [142:08] with here. You can see I have no [142:10] modifiers when I unwrapped. Also, make [142:12] sure you apply all your scale. I did not [142:14] apply the solidify modifier because [142:16] that's just the outline. And you can add [142:18] the outline before or after you bake. [142:20] That's why it was not part of our UV map [142:22] when we baked. It did throw that warning [142:23] if you're paying attention that outline [142:25] does not have an image texture, but that [142:26] didn't really matter. Other common [142:27] issues is face orientation. So, always [142:29] check for face orientation. So, [142:31] everything seems to look good over here. [142:33] Now, we do see full red. Sorry, I should [142:36] go back into Eevee. Now, we do see full [142:38] red over here because the solidify [142:40] modifier is the one showing it. So, we [142:41] can actually just temporarily hide it [142:42] and just make sure everything that you [142:44] want to bake is not showing red. Now, it [142:46] probably doesn't actually matter cuz [142:48] we're not baking the lighting. we're [142:49] just baking the diffuse. But that is [142:51] something to check and consider. Last [142:53] thing I want to do is probably make a [142:56] jelly path in a project page, but we [142:58] already covered that in a previous [142:59] video. And it's basically just doing [143:01] this. So if you want to duplicate this [143:03] and work from that, you could totally do [143:04] that as well. Okay. So to make the jelly [143:06] path, we first need to shift A and add a [143:08] path. And now we just want to orient our [143:10] path along the wherever we actually want [143:14] the path. So I'm just going to go over [143:15] here and come over there. And every time [143:18] you want to add, if you need one in [143:21] between, you can right click over here [143:22] and do subdivide. Or you can also just [143:25] select, let me just control spacebar, [143:26] and you can just extrude along. And [143:29] pretty much just make a path like that. [143:31] However you want to make your path. And [143:33] just try and make it a little bit long [143:35] enough. So depending on your camera [143:37] view, it won't it'll like be out of [143:40] frame because we want to make it loop. [143:43] So something like that is probably fine. [143:45] And now we should just be able to [143:47] duplicate like our jelly over here. [143:50] Scale that down. Sorry, I'm just I just [143:52] finished eating dinner. Then we can just [143:53] give it a array modifier. And we want to [143:57] instead of line do a curve deformation. [144:00] And whoops, I didn't select the curve. [144:02] So let me just see the curve. I'm just [144:05] going to look for path. Yeah, it's right [144:06] over here. Let's just select that. Let's [144:08] turn up the count to whatever you want [144:11] to look at it. I don't want to do a line [144:13] rotation. Maybe I want to do a line [144:15] rotation. Let's see. Yeah, align [144:17] rotation. And in this case, it'll be the [144:18] Y-axis. Cool. Maybe I can make this just [144:20] a little bit smaller [144:22] over there. So, I'm just going to box [144:24] select both of these. Control and [144:26] deselect box select. And I'm just going [144:28] to duplicate that. And let's just do S Y [144:32] minus one just to flip it really [144:33] quickly. And then maybe we can use the [144:35] peanut butter one here. So, I can do [144:36] Ctrl L and link materials and change it [144:39] to the peanut butter one instead. And I [144:41] want to bring these above just a little [144:43] bit. [144:45] So, we have a peanut butter trail and we [144:47] have a jelly trail. Might want to give [144:49] some variation to the array over here. [144:52] Maybe a little bit randomize on on some [144:54] of the scales. [144:56] Uh maybe a little bit on the rotation [144:58] and then a little bit on the scale too. [145:00] H offset probably doesn't matter. Great. [145:03] And let's make sure to put this back as [145:05] principal BSDF. I don't know yet if we [145:08] want to export with emission or [145:12] principal BSDF. But for now, let's just [145:14] go back to principal BSDF because if we [145:16] export with emission, that means we [145:17] can't use real-time lighting in 3GS to [145:19] affect like shadows and stuff like that. [145:21] So, we'll see how it looks first and [145:23] then decide if we want to go back to a [145:25] mission or not. Okay, now that I think [145:26] about it, there's actually two ways to [145:28] handle this. The peanut butter is on the [145:30] left side. Basically the pattern is [145:32] let's just assume I scroll down and [145:34] going down the page makes you camera go [145:36] right. If I scroll and let me just hide [145:39] this one. Pretend this one doesn't [145:41] exist. What we had originally I scroll [145:43] it going to go to the purple and by the [145:46] end of the jam it's going to come back [145:49] on well this is going to teleport to the [145:51] other side and start the peanut. So [145:53] it'll be jelly jelly jelly peanut butter [145:55] peanut butter peanut butter. And then [145:57] peanut butter will have its own set of [145:59] projects. So it would be like this. So [146:01] this would be project one. This would be [146:03] project two. And then after you get from [146:06] the peanut butter, after it's snapped on [146:07] the opposite side, you go back to the [146:09] cafe. So this would be a oneway to [146:13] infinite loop. The other alternative is [146:16] you put both of them on one side. Let's [146:18] just say let's just say we only use a [146:20] jelly one for the infinite loop. In [146:23] which case, we would put like two [146:25] projects here. And then we would curve [146:28] it over here. And then once we get here, [146:31] we can't see the cafe. So we snap the [146:32] cafe over here. And then we infinitely [146:35] loop that way. So when we go back, if we [146:38] scroll this way, the jelly path just [146:40] snaps to the left side instead. And then [146:42] we see these two projects and go back to [146:44] the cafe that way. Uh I think they both [146:46] use the same logic. So whichever one [146:49] floats your boat can totally go for. I [146:50] think I'm going to do it where they're [146:52] both on one side. And for that reason, [146:55] just make sure when you are going back, [146:57] it curves a little bit back pointing [146:59] towards the cafe area. So I did the same [147:02] thing with the Chad Cafe. I just [147:03] duplicated it and put it into Chad Cafe [147:06] and change the materials, but all the [147:07] placements are the same. You don't have [147:09] to create the same placements if you [147:10] don't want that, but I'm going to keep [147:12] them the same. So now what we can do uh [147:15] is file save incremental. So we have a [147:17] fallback file in case we ever need it. [147:20] And I think at this point we can [147:23] probably show everything. Hit A to [147:25] select everything and F3 and convert to [147:28] mesh. So we can just convert to mesh. [147:30] You'll see that error there that says [147:32] four of them cannot be converted to [147:33] mesh. And that's because we have two [147:34] lights over here. And both of those [147:36] can't be converted to mesh. So that's [147:37] what that warning is. And now just like [147:39] in the previous video, we need to [147:40] optimize and join objects together that [147:43] are static that we'll never target. So, [147:45] like all these building pieces, I guess. [147:48] If you want the window to move, uh, [147:49] don't join it. But I don't think I'm [147:51] going to do that. So, I'm just going to [147:52] join all these, right, for optimization. [147:55] If you want to target this and make it [147:56] move up and down, don't join it with [147:58] anything else. I feel like this chef hat [148:00] would be joined with the cavi bear, [148:02] though. And so on so forth. And of [148:04] course, if at this point, you can delete [148:06] things that won't be seen. For example, [148:09] back faces, possibly on the sides. So, [148:12] maybe like if I go into edit mode. Well, [148:15] sorry. I should probably delete before I [148:17] join just so it's easier. But yeah, [148:20] we'll probably never see this backside. [148:21] So, we can delete like those sorts of [148:23] faces. We could probably even select [148:25] these. Shift G, select similar normal. [148:28] And we could probably get away with [148:30] deleting [148:31] a bunch of those actually. Yeah, just to [148:34] save on space. Again, it's kind of [148:36] optional because our scene is pretty [148:38] small. So, if you don't decide to delete [148:41] stuff, it'll work. it'll work fairly [148:43] fine anyway, but that's just a small [148:45] optimization stuff. Now, sometimes when [148:47] you're joining objects together, some of [148:49] them will turn black. It's just because [148:51] of the normals. Uh, Blender will like [148:53] recalculate normals by default. It's [148:55] fine. Just hit L and Alt N and just flip [148:58] them. Okay, so basically there's a few [149:01] things that I joined together. I did [149:03] join this entire cafe together. Um, I [149:06] might split it up later if we want to do [149:07] other animations. You can totally do [149:09] that if you want, but for for now, I'm [149:11] not going to do that. Cabby bear is [149:12] separate. This is separate. If you want [149:14] to animate, again, make sure you check [149:16] the origin point and where you want to [149:17] animate from. I don't know if I'm going [149:18] to animate this other than up and down. [149:21] So, that's like a great place to squish [149:23] to and scale. This is renamed to cozy [149:26] project one. This one's cozy project 2. [149:28] And then cozy cafe and caviar. So, we p [149:32] we primarily only need these. This floor [149:34] plane over here, we can create in 3GS. [149:37] Same with the background sphere. We can [149:38] also just create that in 3GS if you want [149:40] to save time. and just export as part of [149:42] GB. You can totally do that as well. So [149:45] now if I go to Chad Cafe, everything [149:47] here is joined as well except alpha Chad [149:49] over here. Beast mode alpha Chad right [149:51] over there. And then this name is Chad's [149:52] project one and two. So now I [149:55] accidentally converted my ketchup trail [149:58] and our mustard trail a little bit too [149:59] early because if I go in edit mode and P [150:01] separated by loose parts, you'll notice [150:03] that the outline object of the trail is [150:06] also a thing by itself. So if you do crl [150:09] J like now it'll become a single object [150:11] which is what we want but we would have [150:12] to do it for every single one and that's [150:14] a little bit tedious. I mean it would [150:16] probably only take five minutes to do [150:17] every single one. Just box select [150:19] control J for so on so forth. But this [150:21] is exactly why we do save incremental. [150:23] So we can just fall back if we ever need [150:25] to. So I'm going to undo that. And what [150:27] I'm going to do is actually just delete [150:29] all this. I'm going to rightclick delete [150:31] hierarchy. Delete would work fine there [150:32] as well because there's no real [150:34] hierarchy. And go back into our [150:35] fallback. And then for all our paths, I [150:38] put them in temp path chat over here. [150:40] And each of these is something. So I [150:43] think that uses nerbs path one and name [150:45] it peanut butter. So this one is going [150:47] to be peanut. Peanut butter trail. We [150:51] can hide this one. This is not mustard. [150:54] This one is mustard, so we can call this [150:56] mustard trail. And then this one is [150:58] ketchup trail. So ketchup trail uses [151:00] nerves pass 3. I'm going to move that [151:01] into a new collection. And I'll call [151:03] that Chad curve. adds curves and then [151:06] mustard trail uses num nerves path 2. So [151:09] I'm just going to drag it like there. [151:10] Great. So if I toggle this on. Great. [151:12] And now we can go back and go into this [151:16] and we can append those trails back. So [151:18] I'm going to go to that file that we [151:19] saved the collection over there and I'm [151:22] going to append tempath cafe and Chad's [151:24] curves. Great. And I'm going to move [151:27] Chad's curves. And Chad curve goes in [151:29] Chad Cafe and Tempath Chad goes into [151:31] Cozy Cafe. And now we just select both [151:34] of these. We apply their array [151:36] modifiers. I'm just holding shift [151:37] select. Go into edit mode. P separated [151:39] by loose parts first. And now to quickly [151:42] apply all the modifiers. We just convert [151:44] to mesh with F3. And now we want to [151:47] right click set origin origin to [151:48] geometry or Q if you put it over there. [151:51] Ctrl period to change the origin point [151:53] for all them. Control Z lock axis and [151:56] just snap it to the floor floor there. [151:57] Control period to confirm that. That way [151:59] when we scale it's going to come from [152:00] there. That's also optional depending on [152:02] how you want to animate. And now we just [152:05] have a bunch of ketchup trails and a [152:06] mustard trail. Okay, since I'm creating [152:08] this plane in 3GS, we can probably I [152:11] think save incremental at this point. [152:13] And I'm going to delete that. Same with [152:15] the sphere. I don't think I ever want [152:17] that. So, um, yeah, I'm just going to [152:19] delete that because we have our save [152:21] incremental anyway. And now what I want [152:23] to do is just come over here and make [152:25] sure you turn this on selectable or not [152:27] and disable it for the lights. So here I [152:29] have some area lights. I want to disable [152:30] it for. We could also just disable it [152:32] for the sphere and floor it as well, but [152:34] whatever. And I'm just going to file [152:36] export glTF. Make sure you remember [152:38] export settings. That way you don't have [152:39] to do it every time. We only want to [152:40] include our selected objects. Transform [152:42] is fine. And for material, I'm changing [152:45] it from like 80 to 100 because we're [152:47] going to use the online compression [152:48] tool. So, we don't want to want to [152:50] optimize here in in Blender. We don't [152:52] have shape keys. We don't have skinning. [152:53] So, we can leave those unchecked. And [152:54] whether you leave compression on here or [152:56] not does not really matter because we're [152:58] going to be using an online tool to [153:00] compress it. So whether you want to [153:01] leave that on or off, it doesn't really [153:03] matter. And then animation, we don't [153:04] have any. I think I will come back and [153:06] add one here later. But for now, we can [153:08] just save it like this. And this one is [153:10] going not to be Cozy Cafe. It's going to [153:12] be Chad Cafe. And the other one will be [153:14] Cozy Cafe. So same deal over here. I'm [153:16] just going to hit A to select [153:17] everything. File, export, glTF, Cozy [153:20] Cafe. We don't need to change anything [153:22] over here. And just export that. So [153:24] there are like there are quite a few [153:25] online compression tools. These are two [153:28] of the more common ones where you have [153:30] an image embedded and it will also [153:31] compress your image rather than like a [153:33] standalone thing. In the previous video, [153:34] we uploaded our image textures to Squish [153:36] and then rehooked it up in Blender and [153:38] then exported it again. We don't have to [153:40] do that because our textures are already [153:41] embedded. These tools actually also [153:44] optimize your textures and keep it [153:45] embedded. There are a lot of other more [153:48] quote unquote developer like tools that [153:50] you can use for compression like Image [153:52] Magic. You can do bulk compression, run [153:54] scripts on all your images and whatnot. [153:57] There's also chil transform, which is [153:59] more like a command line tool for [154:01] compression and a lot of other stuff, [154:03] but we're just going to stick to the [154:04] basics for now and use an online [154:06] compressor. So, I'm just going to use [154:07] the Simon Dev one, but they're pretty [154:09] much act very similar. Simon Dev is a [154:12] famous YouTuber. You might have seen him [154:14] on YouTube already, but he makes 3JS [154:16] content as well. So, we can upload Cozy [154:18] Cafe. Now, it's not going to look like [154:20] it does in Blender because viewers [154:22] always have some sort of like lighting [154:24] already attached to it and it just it'll [154:27] just look different from Blender. Even [154:28] when we do, it's going to look a little [154:29] bit different. Now, these are a little [154:32] bit more advanced than for this video. [154:35] So, I'm just going to uncheck all of [154:36] them. Invertex though, you can see that [154:38] we are applying Draco or Draco [154:40] compression here. We don't have to [154:41] change anything here either. But for [154:44] texture, you can set the max resolution. [154:46] So, if you had a 4K texture, it'll [154:47] downscale it to 102040 by 102040. I [154:51] don't think I had anything above 1024. I [154:53] think I had one at 20480, but it'll just [154:55] be downscaled. And again, all these [154:57] images that I used were really small, so [155:00] I could probably take it down to 512, [155:01] but I'm not going to risk it. I'm just [155:03] going to leave it at 1024. The format of [155:04] the texture, we did PNG when we did our [155:08] export. In the previous video, we [155:09] exported as WEBP. There's a lot of other [155:11] formats here that are a little bit more [155:13] technical. If you are interested, you [155:16] can check out some of my more advanced [155:17] videos on my channel. But again, we're [155:19] just going to do WEBP here. And we're [155:21] going to click apply our changes. And [155:23] you will see something really [155:24] interesting here. So our original file [155:26] size is 2.54. The file size actually [155:29] increased, but the memory size is [155:31] actually lower. So what is the memory [155:32] size? Well, that's your RAM. Your RAM [155:34] has a certain amount of memory. If you [155:36] hover over here, you can see memory [155:38] usage of this website is over there. [155:40] That's your RAM usage. where file size [155:43] is like the actual size of your file. So [155:45] you can imagine at like at a very very [155:47] high level file size is like how long [155:49] your website will take to load that [155:51] whereas the memory size is the [155:52] quoteunquote performance during runtime. [155:55] So if you have using too much memory it [155:57] might crash and and things like that. So [155:59] our memory size actually went down but [156:00] our file size went up. Why does that [156:02] make sense? Well, we when you compress [156:04] something, you actually also attach a [156:06] bunch of information to your GB model in [156:09] order to optimize it if that makes [156:11] sense. So that's why in this case the [156:12] file size is increasing whereas the [156:14] memory size is significantly decreasing. [156:17] Most of the time with more complicated [156:18] models both the file size and memory [156:20] size will go down. But because we have [156:22] such simple models it kind of is [156:24] expected the file size to go up and the [156:26] memory size to go down. Either way again [156:27] that also depends on how you compress [156:29] it, what tools you use, so on so forth [156:30] blah blah blah blah. That is the [156:32] explanation at a high level. So we can [156:34] just download that and use that. And [156:36] let's do the same exact thing for Chad [156:38] Cafe and let's just download over there. [156:39] So let me go to another online tool and [156:41] just show you if I just did compression. [156:43] Here's Cozy Cafe is 2.6 megabytes. I [156:47] come over here. Let's turn on Draco. [156:49] There's other compression methods. Yeah, [156:50] but we're just going to stick with the [156:52] most common one right now. Here you can [156:53] see it's 2.5. Whereas the So here you [156:56] can see that we have Cozy Cafe [156:57] compressed which is from the other tool. [156:59] And then we have Cozy Cafe-V1 which is [157:02] from here. And this is actually smaller. [157:04] But if I click and drag this in here and [157:06] take a look, you can see the VRAM is [157:09] 136.8 MB. However, if I use this 2.9541, [157:13] look what happens to the status here. [157:15] You can see the VRAM is 49.1 whereas the [157:18] disk size is a little bit bigger. Of [157:20] course, whether you compress and [157:21] optimize for a small project like this [157:23] probably doesn't really matter, but I [157:25] just wanted to share some tools that are [157:27] commonly used for quicker projects. [157:29] Okay, we are finally ready to start [157:30] coding. So, make sure you have some sort [157:33] of JavaScript runtime environment that [157:34] you can run things on a local [157:36] host/package manager so you can do like [157:39] npm install, that sort of stuff. If [157:41] you're not familiar with that yet, I [157:42] would recommend um watching a few videos [157:45] on that before coming back and watching [157:47] this one. And for our bundler, we're [157:49] going to be using Vit. And if you don't [157:50] know what a bundler is, I would also [157:52] recommend watching a video on what a [157:53] bundler is. But basically when you are [157:56] developing in your local JavaScript [157:58] environment use a lot of tools like [158:00] SCSS, Tailwind CSS, use a bunch of [158:03] imports and all that kind of stuff and a [158:05] bundler just like takes all that [158:07] development stuff and then optimizes it [158:09] for the web pretty much. So it might [158:11] like take really long variable names and [158:12] change it to like a single letter. It [158:14] might get rid of extra code that you [158:16] don't use from your imports, things like [158:17] that. So that's basically what a bundler [158:19] is at a high level. all the development [158:21] tools and then compiles it down to what [158:23] the browser can actually work with and [158:25] optimize and vit is just a really [158:27] popular one which is why we're using it [158:29] but feel free to use whatever bundler [158:31] that you want to use in regards to [158:33] project structure I'll talk about that [158:34] in a little bit but it's going to be [158:35] based on a arguably the most famous 3GS [158:38] creator right now Bruno Simon's template [158:41] which I'll talk about but let's first [158:43] start our coding project so just [158:45] navigate to wherever you want to save [158:47] stuff cd there and we can just copy and [158:49] paste this so I'm just going Going to [158:50] copy that like so. And I'll call this [158:53] alpha chads cozy cafe. Cozy cafes. And [158:58] we're just going to use vanilla [158:59] JavaScript here. And no tides script, [159:02] just regular JavaScript. And I'll do [159:04] install with npm and start now. Let's [159:06] just control C to cancel that. And let's [159:08] do code dot to open it in our VS code [159:10] editor. Sorry, we have to go inside [159:12] there first. So alpha chat base. And now [159:15] we can do code dot. [159:17] So before we begin, let's talk a little [159:19] bit about project architecture first and [159:21] different design patterns. So [159:23] technically, just like what we did in [159:26] the intro course, you can put everything [159:28] into a single JS file and that would [159:30] work perfectly fine. The issue is if you [159:33] have a lot of things, it becomes a lot [159:35] harder to know where things are, where [159:37] to add things, and you'd have to keep [159:39] navigating up and down the page, and [159:41] that would be kind of tedious. [159:42] Obviously, you can add like snap points [159:43] to your code to quickly jump areas [159:45] easier, but at that point, sometimes we [159:48] just decide to structure the code [159:49] differently and take things out into [159:51] their own separate like util functions [159:54] that are repetitive or classes and [159:56] things like that. And there's a lot of [159:57] different ways to structure your code. [159:59] And honestly, those are what frameworks [160:00] exist for. Those are also different ways [160:03] and methods to structure regular [160:05] JavaScript code, whether it's like JSX, [160:07] which just eventually compiles to JS. [160:09] Anyway, the one we're going to be using [160:11] is called a singleton design pattern. [160:14] So, if you don't know what that is, I [160:16] highly recommend going on Refactor and [160:17] Guru to take a look. But basically, the [160:19] whole idea is you can have like one [160:22] class that all your other subasses refer [160:24] to. So, let me just show you that if I [160:26] open some of these files over here at [160:29] the top, what you'll see is this for [160:31] each of them or most of them. This [160:33] experience equals new experience. It's [160:35] in the renderer. It's in the camera. [160:37] It's not in resources. When we cover [160:39] this, I'll talk about why not. And then [160:41] it's also in world. So why do we see [160:43] this over and over again? Why are we [160:45] creating a new experience every single [160:46] time? Well, we're actually not creating [160:48] a new experience every single time cuz [160:50] it's a singleton. We are just getting [160:52] all the stuff associated with the first [160:54] experience that was in instantiated. So [160:57] here you can see the guard clause over [160:58] here. We're creating an instance of the [161:01] experience and if it exists then just [161:03] return the existing one. Otherwise, [161:05] otherwise create the experience instance [161:07] and set it to this class. So you can [161:09] imagine the experience is kind of like a [161:11] product manager. I think the analogy [161:13] they give to this is government which is [161:16] also a great analogy. When you're [161:18] coding, don't try and look at coding [161:20] structure any differently than a real [161:22] life sort of scenario. You have all [161:24] these like people like the camera needs [161:26] to know how to render. So instead of [161:28] like pointing to the renderer and or the [161:31] camera needs to know which location to [161:33] go, it doesn't like point at like an [161:34] object. It just goes to the person who [161:36] already knows that. So the product [161:38] manager can just essentially tell you [161:39] what you need to know, which is [161:41] basically the idea. Oh, tell me what I [161:43] need to know here is all it's saying. [161:45] It's like, hey product manager, talk to [161:47] me. And so you can think of your code [161:49] just like a bunch of people talking to [161:51] each other or talking to the same person [161:52] for information on these other people. [161:54] Are there pros and cons to this design [161:56] pattern? Absolutely. And it still might [161:58] not make sense, but once we get into the [162:00] code, it'll be a little bit more clear. [162:01] Great. So, just like our previous [162:02] project, we got our index.html, our [162:04] basic CSS and main.js, [162:08] and then this extra thing over here that [162:09] we can delete. We don't need to worry [162:12] about that. Assets, we can also just [162:15] delete these. We don't need these [162:16] either. Ctrl + C to copy this line and [162:19] then Ctrl+ A and just backspace [162:20] everything. Ctrl +V to paste that line. [162:23] You do not have to highlight the line to [162:25] copy it. you can just have your cursor [162:26] on that line and it'll highlight there. [162:28] So, when it comes to a 3GS project, what [162:30] do we what are the basics? Well, we need [162:31] a scene, we need a camera, we need a [162:33] renderer, and then we need a canvas [162:35] element. All our 3JS stuff lives in that [162:38] canvas HTML element. And of course, we [162:40] need some stuff to actually add to our [162:41] scene. And then we need to update our [162:43] renderer on a loop and we know that. So, [162:46] we just take all these different [162:47] components like the renderer, like the [162:49] camera, like the scene, and then we [162:51] split them up into their own different [162:52] classes. So, let's come over here and [162:55] let's just uh change this to experience. [162:58] Well, uh let's call it canvas wrapper. [163:01] And in here, we want to create our [163:03] experience canvas. So, I'm just going to [163:05] do canvas dot experience like that. And [163:10] that's all we need to get started for [163:12] now. We can come into the CSS and I [163:15] think we can get rid of everything. And [163:18] we can just do global selector for now. [163:20] And we'll just we can do M0 for margin [163:22] zero, P 0 for P 0, and box sizing for [163:26] border box. Just like that. And then we [163:28] can actually yeah, we can also change [163:31] this to an ID. And we can do hashtag [163:34] experience. Hashtag experience, we want [163:36] to position it fixed. Let's just give it [163:39] a width of 100 viewport width and height [163:42] of 100 viewport height. And for the HTML [163:45] and body, html and body, we're just [163:49] going to overflow hide so we don't see [163:50] the scroll bar anywhere. And we actually [163:53] I think we have a wrapper. Okay, I'm [163:55] going to call this experience wrapper [163:56] instead. Let's just copy that over here. [163:59] And we can Yeah, let's call Yeah, let's [164:01] highlight this. Shift alt down arrow, [164:03] shift enter to add a quick space above. [164:06] Let's change this one to hashtag. [164:08] Whoops, I accidentally got rid of the [164:09] hashtag. And this one will be 100 [164:12] viewport. And then we can make this one [164:14] 100%. So I'm going to hold there. I'm [164:17] going to hold alt to click to add two [164:19] cursors. Just like that. And we should [164:21] just be able to do this. And I have [164:23] control shifts to save all my files at [164:26] the same exact time. So it also saved [164:27] this one when I did that. And now if I [164:31] go back over here and go into the [164:33] inspector with control shift I or [164:35] rightclick and do inspect and I click on [164:39] it, you can see the canvas experience [164:40] takes up the entire screen which is [164:42] exactly what we want. Okay, so we have [164:44] our main injection point right over [164:46] here. So let's do that. We'll do [164:48] document getelement by ID. We want to [164:51] grab our experience over here. So we're [164:53] going to do this and we're just going to [164:55] slap it in there. And we're going to [164:56] pass that in into our singleton class in [164:59] order to reference the canvas. So let's [165:02] do that now. And we're going to come [165:03] over here and let's create a new folder [165:05] called experience. Let's create our [165:07] singleton or our product manager or our [165:09] government, however you want to look at [165:11] it. And I'm going to call it experience. [165:13] Just like that. So let's come over here. [165:15] We're going to export class and we're [165:17] going to call it experience. And we need [165:19] our typical constructor. So we'll do [165:21] constructor. Open it up. And let's just [165:24] set the experience. Equals to this. This [165:27] basically just referring to this entire [165:29] thing. Now if it exists, we just want to [165:32] add that guard clause and just return [165:34] the original one that we created first. [165:36] instance. If it exists, then simply just [165:38] return the one that we already created, [165:40] which I'm just going to copy and paste [165:42] there. And of course, if it's just one [165:43] line, you don't have to have the [165:45] brackets there. Let's also create an [165:46] init function where we basically [165:49] initialize all our stuff like the [165:51] renderer, the camera, the resources, the [165:53] loading, and all that sort of stuff. So, [165:54] I'm going to come over here and we're [165:56] going to do this. And we're going to [165:58] create an init function. So, thisinit is [166:01] just saying, hey class, use your init [166:03] function. and play that for me, please. [166:06] So, that's exactly what this is over [166:07] here. Let's add a canvas here just so [166:10] it's a little bit more clear what we're [166:11] doing. And of course, make sure to [166:13] update that over here. And instead of [166:15] passing it in as a parameter, we might [166:17] as well just do it directly in [166:18] experience itself. So, I'm going to come [166:20] over here and I'm going to set this [166:22] classes canvas element equal to the [166:24] canvas that we're just selecting over [166:26] here. And let's also put experience [166:29] canvas just like that. Great. Let's do [166:30] Ctrl P to quickly search for a file. [166:33] Let's go to main.js. It might be command [166:35] P on Mac. And here we need to import our [166:37] experience. So we can just start typing [166:39] it and then just hit enter to start [166:41] typing in. If you ever accidentally get [166:43] rid of the autocomp completion, you can [166:46] always come back and do control spacebar [166:48] and find it again and it will [166:50] automatically import like that. And now [166:51] we just need to do new experience just [166:54] like this. So we instantiate the new [166:56] experience. Just do a test log. I'm [166:58] going to need to go back to experience [166:59] over here. And we should just be able to [167:01] do console.log. Hello world. Hello [167:04] world. And we will also just console.log [167:07] this so you can see what this is. And [167:09] I'm also going to do [167:10] experience.instance. So if I go back, [167:12] make sure you are have a local server. [167:15] So you can do mpm rundev. And that will [167:17] run over here in package.json. It'll run [167:20] npm rundev and start your local [167:22] development server. And here you can see [167:24] that experience. And this is the same [167:27] object over here. And then we also have [167:29] our hello world showing. So it's [167:30] activating. Now the canvas element is [167:32] null because I did not save my [167:34] index.html file. So make sure to save [167:36] all that. And now if I go back here, you [167:38] can see we have a canvas element. So [167:41] instead of creating our scene first, we [167:43] want all those imports and vit and our [167:45] VS code editor to be able to guess that. [167:48] So let's create a new terminal over [167:49] here. And let's do mpm i3, which is 3gs. [167:53] We also want gab for later. So we can [167:55] also just put gab on the toggle. And if [167:57] we need anything else, we can put it in [167:59] a little bit later. So these packages [168:01] are going to show up in here. You can [168:03] see three is just there. And now Gab [168:05] appeared in our node modules. Again, [168:07] each package is just code someone else [168:09] wrote. Now you can see it's in our [168:11] dependencies gab and 3GS in the [168:13] package.json. Great. I'm going to [168:15] temporarily hide with control back tick. [168:18] I'm going to hide the terminal so we [168:19] have a little bit more space and [168:20] controls and crl +b to hide the left [168:23] side menu for a little bit as well. [168:25] Let's come over here and control W and [168:27] quickly close those as well. Great. So [168:29] let's import everything from 3JS. So [168:31] we're going to import all import all [168:34] everything as three as a three object [168:38] and we're going to get that from three. [168:40] And instead of just three, we're going [168:41] to use 3 webbgpu. I don't actually know [168:43] if we're going to use the new web GPU [168:45] renderers features or not. So if you [168:47] want to just use three, import all s3 [168:50] from three, you could probably do that. [168:52] But for now, I'm going to do webgu. and [168:54] it's not going to change anything unless [168:56] I decide to use the new WebGPU features. [168:58] So, if you didn't watch the previous [169:00] video, basically we are switching from [169:03] WebGL to WebGPU as WebGPU is more [169:06] powerful than WebGL, but WebGL is still [169:08] here for going to be here for a while. [169:10] So, WebGPU is just another method of [169:13] being able to work with graphics and a [169:16] computer's GPU on the browser. Here you [169:18] can see WebGPU is a successor to WebGL. [169:20] Great. So, now we can create our scene. [169:22] So we'll do this scene. So we're just [169:26] saying, hey experience, you need a scene [169:28] and we're just going to grab it from [169:29] that 3JS object and we're going to [169:31] create that scene. So let's create our [169:33] first class and it's going to be a time [169:35] class. And it's more of a utility class [169:38] that we're pretty much only going to [169:39] create once. So let's come over here and [169:41] create a new folder called utils. And in [169:44] utils, we're going to create our first [169:45] class called time.js. I'm just going to [169:47] copy from experience.js into time.js. [169:50] And instead of export class, we're going [169:51] to change this to time. Instead of this [169:53] innit, let's do ctrl d to select the [169:55] next instance and do this.date. We don't [169:58] need anything from the experience. In [170:00] fact, the time is actually going to be [170:01] informing the experience. Basically, [170:03] utilities are informing our product [170:05] manager rather than the other way [170:06] around. And let's get rid of this and do [170:08] our window request animation frame. And [170:11] we're going to call this.update. So it's [170:13] calls itself. And then we're going to [170:15] call itself. This upupdate. This is [170:18] pretty much all we need in the time [170:20] class. But it's like okay, we have the [170:22] time class. So let's create it. This [170:25] time equals new time. Let's create it [170:28] over here. But how do we actually use [170:30] what the time class is giving us? If I [170:32] console.log time this time. Let's make [170:35] sure to come over here control spacebar [170:37] and import this. And I'm also forgetting [170:39] the new over here as well. And I go [170:41] back. It's like uh well, we got our [170:44] update function, but like what do I do [170:47] with it? How do I access that [170:49] information? Well, what we can do is [170:52] from the time class trigger an event [170:54] that experience listens to. So, how do [170:56] we trigger an event? Well, you could [170:58] write an event emitter yourself, but [171:00] it's easier just to use a package here. [171:02] And one way to do that is with with the [171:05] Node.js event emitter. So here you can [171:07] see when we we can emit a an event and [171:10] then we can use the on property to [171:12] listen to that sort of event there. So [171:14] let's come over here and let's do mvmi [171:16] events. Let's go back to time.js. Let's [171:19] import the event emitter from events. We [171:22] want to be able to use the stuff from [171:24] that object. So we can extend it over [171:26] here. Extends event emitter. And then we [171:29] need to super and write super just for [171:31] refresher is accessing a project on a [171:34] super classes constructor. So basically [171:36] time now becomes a child class of the [171:38] event emitter class and we can use the [171:41] parents properties and things like that. [171:43] And now in our update function here we [171:45] can do this emit again which is going [171:48] through the super which is actually [171:49] using the event emitters this emit [171:52] function and we can just give that a [171:53] name called update and then in [171:55] experience the docs say to use on. So we [171:58] can come over here let's get rid of the [172:00] well I'll leave one console log so we [172:02] can see it. And now over here we can do [172:04] this time do on and we want to listen to [172:07] that event called update. And what do we [172:09] want to do? Well, let's just do a quick [172:12] console log for now. So I'm going to [172:13] write that quick arrow function there. [172:15] Let's just do console.log updating just [172:18] like that. So if I go back to the [172:20] browser, take a look. We have a request [172:22] animation frame that's keep on logging [172:24] update update update in experience. [172:26] Great. So instead of just doing the [172:29] update here, experience itself is also [172:31] going to have an update function. So [172:32] we'll create update over here. Basically [172:35] the product manager learning from his [172:37] aid time.js is going to tell the other [172:40] ones to update as well. So let's get rid [172:42] of this console log over here and let's [172:44] do this.date again. So every time it [172:46] emits update, experience listens to it, [172:49] it's like, oh, thank you my informant. [172:51] I'm going to tell everything else to [172:53] update as well. And we'll put stuff here [172:54] in a little bit later. Let's create [172:56] another class and it's also a utils [172:59] called sizes.js [173:01] and this will just handle like our [173:03] responsiveness and things like that. So [173:04] let's just copy from time.js over here. [173:07] Save us some time. Let's do sizes. We're [173:10] going to set some stuff. So width equals [173:12] window.in width of course inner width. [173:15] And and let's change this to height. And [173:17] you'll notice when I change the height [173:19] over here, I didn't have to adjust the h [173:21] after. And that's an extension. And [173:23] that's an extension that I'm using. Uh I [173:27] think it's change case. I don't actually [173:29] know. Well, it's clearly not change [173:30] case, but there's a lot of other [173:32] extensions that do the same exact thing. [173:35] It'll take into consideration your case [173:37] so you don't have to manually adjust it [173:38] later. Anyway, let's go back to the file [173:40] system here. And what we need to do is [173:41] create an aspect ratio for our camera. [173:43] So, we'll do this width by thisheight [173:46] thisheight. Sorry, my bad. And we'll [173:48] also put our pixel ratio directly in [173:50] here as well, cuz why not? Same thing as [173:53] last time. If you need an explanation on [173:54] what pixel ratio is, definitely check [173:57] out the previous video. Pixel ratio is [173:59] basically the relationship between the [174:01] amount of physical pixels a device has [174:03] versus a digital CSS pixel. And then we [174:06] can just instantiate this.resize [174:08] over here. We call this resize. And [174:11] let's just control X. I don't need to [174:13] get rid of that space. We can put [174:14] everything over here. I'm going to leave [174:16] it because we need to emit resize event [174:19] that we're going to listen on into [174:21] experience. And we also want to add an [174:22] event listener here called window add [174:25] event listener listen into the resize [174:27] event. Let's just move all our stuff [174:29] into there. And sorry, this shouldn't be [174:31] named resize. I'm from the future. It [174:33] should probably just be in it. And [174:35] honestly, because we're only doing [174:36] something simple, you might as well just [174:38] keep it in the constructor itself. Let's [174:40] come back over here. Shift alt down [174:42] arrow. Control D. Sizes. Sizes. Control [174:46] spacebar and import sizes. And then we [174:48] can come here. Shift alt down arrow. And [174:51] we call this dots sizes on resize event. [174:55] We're going to shift alt down arrow [174:57] here. Ctrl + D. And I'll call that [174:59] resize over here. And now I can add a [175:02] console.log here just to make sure it [175:03] works. And if I do and come back here [175:05] and resize the window. You can see it's [175:07] going to print out our message over [175:09] there. Now let's create our camera. And [175:10] this is not a utilities. It's going to [175:12] go directly into our experience cuz it's [175:14] kind of tightly coupled in a sense. So [175:16] I'm going to create camera.js. I'm just [175:18] going to copy the experience into [175:20] camera. And let's just get rid of the [175:21] junk inside over here. Get rid of that. [175:23] yada yada yada. And now we can change [175:26] this to camera. Great. And let's create [175:29] a nit. I'll just call this a netit [175:31] camera cuz why not? A nit camera. And [175:33] we'll do this. camera. It's like, hey, [175:37] create the camera. So we'll just create [175:39] a this perspective camera equals new [175:42] three. [175:44] We'll set a FOV temporarily at 35. And [175:48] now we need to ask assess the sizes [175:51] object. So are we going to come over [175:54] here and say hey sizes bro uh am I going [175:56] to create a new sizes here? Is that what [175:59] I'm going to do? And I'm not going to do [176:00] that because the product manager already [176:01] knows. So I'm just going to ask the [176:03] project manager anyway. So how do I do [176:05] that? Well I import experience from [176:07] experience. So I'm going to come over [176:10] here and I'm just going to create [176:11] experience get its import. And what I'll [176:13] do is this.experience this.experience [176:16] experience equals new experience. But [176:19] again, we're not actually creating a new [176:20] one. This guard clause is going to [176:22] trigger over here, and we're going to [176:24] return the one that was already created. [176:25] I'll do this. So, this classes sizes is [176:29] going to equal this.experience. This [176:32] do.experience sizes. Now, we have this [176:35] sizes as a property of this class [176:37] grabbed from the experience sizes which [176:39] was grabbed and created over here. Now, [176:42] we can use that. But it does seem a [176:43] little bit weird that we're creating the [176:45] own class one and pointing to this one [176:47] over here. So why don't we just get the [176:49] instance itself and just directly use [176:51] that. So we can create a getter function [176:53] in the experience class itself over [176:56] here. Just create a static method [176:58] static. And we'll call that get instance [177:00] over here. And we'll just return return [177:03] experience.instance. [177:05] Now let's go back to camera over here. [177:07] And instead of this doexperience equals [177:09] new experience, just do this.experience [177:10] experience equals experience get [177:13] instance. We're calling the getter [177:15] directly. And now for our aspect ratio, [177:17] we can do this experience.pect [177:21] ratio. And then let's set the close and [177:24] the far value. [177:26] A th00and's obviously overkill, but [177:28] whatever. It doesn't really matter. And [177:29] if I just console.log out. Let's go back [177:31] to experience over here and just create [177:33] that real quick. So shift alt down arrow [177:35] one more time. Let's call this camera [177:38] control spacebar and import that. And I [177:41] go back over here. Take a look. We have [177:43] our aspect ratio printing out right over [177:45] here. Now, of course, what we need to do [177:47] is update the camera on resize. So, [177:49] we're going to come over here and we'll [177:51] just copy this top perspective camera. [177:52] Every time it resizes, we need to update [177:55] its projection matrix over here. We have [177:57] to update its Whoops. its aspect ratio [178:01] as well. And we're just going to reset [178:02] it to this experience, which also [178:05] listens to the resize already, right? [178:08] The aspect ratio is recalculating here. [178:10] And camera is just listening to that. [178:12] Let's go back to experience. And we need [178:14] to tell the camera to update based on [178:16] the sizes emitting the vent. We'll do [178:18] this. [178:20] And just call the resize function in the [178:22] camera. If you want to test that, you [178:24] can console.log it out over here, but [178:26] I'm going to trust that it works. And [178:27] let's just add a space right there. And [178:29] honestly, just for consistency, let's [178:30] just leave this as in it. That way, we [178:32] don't have to type it every single time. [178:33] Next up on the list, let's come over [178:35] here and create the renderer. Renderer. [178:38] This is also pretty tightly coupled. So, [178:40] I'm just going to put it over here. And [178:41] let's just let's copy our camera. Place [178:43] it in here cuz ain't nobody got time for [178:45] that. Ain't nobody got time to time to [178:48] retype that, right? And let's create our [178:50] renderer. So, let's come over here. This [178:53] renderer. I don't know how to spell [178:55] that, but hopefully that's right. And [178:56] we're going to create a new 3 webb GPU. [178:59] We're going to use the web GPU renderer [179:01] here. And we need to pass in the canvas [179:03] element. So it will be canvas. And that [179:06] is going to be from our experience. So [179:07] this experience canvas element we should [179:11] call I think that's what we called it. [179:12] We called it canvas element. And then we [179:14] want to set anti-aliasing. [179:16] Anti-aliasing so we don't have those [179:18] jaggedy edges. Alias to true as well. [179:20] And then I'm just going to copy and [179:21] paste some renderer options that we had [179:24] before. So again, just refresher, this [179:27] makes the shadows a little bit softer. [179:29] This just enables shadows. And we set [179:31] the renderer set sizes equal to the [179:33] size, width, and height. So it takes up [179:34] the full width of the canvas and its [179:36] pixel ratio. And on resize, we need to [179:39] update both of these. So we can just [179:40] copy and paste this and replace it in [179:41] resize as well. Then in the update [179:43] function, we need to call this renderer. [179:46] And we actually have to tell it to [179:47] render on each frame. We need to use [179:50] this.experience [179:52] scene from this.experience experience [179:54] this scene from the experience and this [179:56] do.experience camera as well. So again [179:59] this experience is over here but we're [180:02] getting the instance from over here. So [180:03] it's basically saying this camera you [180:05] the renderer use this camera which is [180:07] this pretty much and then use this scene [180:10] which we created over here. So now [180:12] project manager has to tell our renderer [180:14] hey this renderer on every time our [180:17] thing is ticking then also update here [180:19] over here please and we need to create [180:21] the renderer over here of course [180:23] renderer come over here control spacebar [180:26] and import the renderer. Now if we go [180:28] back you see that we have an error here [180:29] that says render is called before the [180:31] backend is initialized which must mean [180:33] there's something under the hood that's [180:35] loading and needs to be done loading [180:37] before we can actually start calling [180:39] render. So how do we fix that? Well, in [180:41] our experience class, we can change this [180:42] to an async function. And instead of [180:45] going through and just listening to [180:47] everything, let's just wait for the [180:49] renderer first. So, we'll do this.init. [180:52] And now we can just await this. So, [180:54] we'll just wait for it. And don't do [180:56] anything over here until this is [180:59] initialized. Let's do the same thing in [181:01] our renderer.js. We're going to create [181:03] this to a insync async function. And [181:06] we'll do await this.er [181:08] over here. Don't do anything with the [181:10] renderer yet until it is done loading. [181:12] So if I go back and refresh the page, [181:14] you can see that we don't get that [181:17] error, but we're now getting another [181:19] error here. Uh so we're getting an error [181:22] this.experience camera. Oh, sorry. [181:25] Because what I'm doing over here is [181:27] passing in the camera class rather than [181:30] the instance of the camera. So instead [181:32] of calling this perspective camera, we [181:34] can call this instance instance. And for [181:38] the renderer over here, uh let's go down [181:40] over here. This camera.instance. So the [181:44] instance of the camera itself. If you [181:45] want to leave that perspective camera [181:47] like we had originally, then it would [181:49] just be camera.perspective camera. And [181:50] then whoops, I actually also renamed [181:52] this. So let's come back over here and [181:54] change that to perspective camera. And [181:56] now we have no errors. Is this the only [181:58] way to do it? Basically, it's saying [182:00] await this async function. And then this [182:02] is the one that's actually targeting the [182:04] created render. Is there another way to [182:06] do this? Uh, absolutely. You can have [182:08] like a guard clause here like if this [182:11] renderer exists and and this.er ready [182:15] which is like a boolean value you create [182:17] over here. And then once this is done [182:19] you can do like this. Ready equals true, [182:22] right? And then this way you don't need [182:23] this. You just start the loop and this [182:25] guard clause will keep on detecting if [182:27] those are done and then update it. So [182:29] you could do it that way as well. But [182:31] yeah, you know it's it's kind of up to [182:33] you how you want to do it. [182:35] I'm just going to leave it like this. [182:36] Okay. So, we should be able to just [182:38] create our world now. So, I'm going to [182:40] create a new folder here called world. [182:41] And this will include our cozy cafe, our [182:44] Chad Cafe. Well, I guess both of them [182:45] are Cozy Cafe. I guess Cav Bear Cafe as [182:48] well. And let's just create world.js. [182:51] And we're going to add a dummy cube just [182:52] to test everything first. And I guess [182:54] you could also put this in experience [182:56] cuz it's kind of like tightly coupled. [182:58] When I say tightly coupled, it's like [183:00] pretty much just directly called in [183:02] here. like world would just be directly [183:04] caught in here. It's not like nested [183:06] deep in in anything else. So, but [183:08] whatever. It doesn't really matter. And [183:10] we'll do the same thing over here. [183:12] Go here. Camera, paste it in world. [183:15] Let's change this to world. Let's get [183:17] rid of this junk over here. Ain't nobody [183:19] got time for that. Ain't nobody got time [183:20] for that. Let's come back here. Control [183:22] space bar and import it to the [183:23] documentation and just copy this cuz [183:26] well, I guess we could also copy camera [183:28] position cuz remember last time the [183:30] camera spawned directly inside the cube. [183:32] So in order to see it, we have to shove [183:33] it out a little bit. Uh so so let's just [183:37] put it in here. And instead of scene, [183:39] we'll do this.experience scene, right? [183:42] We want to get the instance of the [183:43] scene. And for the camera, let's just [183:46] set its default position over here. [183:48] Let's get rid of this cuz we ain't need [183:49] that. Position.Z. And we're just going [183:52] to set that five initially. Let's go [183:54] back to world and make sure we update [183:56] this path to go one directory out. If I [183:58] go back, voila. Congratulations. We've [184:00] got our cube. Let's do this, guys. Let's [184:02] do this. Now, let's enable our orbit [184:04] controls again. So, we can just pan [184:06] around. We'll probably get rid of that [184:08] soon, but let's just go back and [184:09] initiate it anyway. So, I'm going to [184:11] shift alt down over here, and I'm just [184:13] going to do set orbit controls. Orbit [184:16] controls. [184:17] Let's just copy this puppy over here [184:19] down over here. And then we just pass in [184:22] the orbit controls, the camera instance, [184:24] the camera instance, and the canvas [184:25] element. And then we're enabling [184:26] dampling so it's a little bit smoothing. [184:28] Then we can update the controls. So this [184:30] controls update and let's make sure in [184:33] our experience over here we also called [184:36] this camera.update which we did not. So [184:38] let's just shift alt down over here and [184:40] do this camera.update. Let's make sure [184:42] to control spacebar and import orbit [184:44] controls as well. Now if I go back and [184:46] click and drag and middle mouse button [184:48] and right click, we have all those [184:49] controls. Nice. Sweet. So let's go back [184:51] to world and get rid of this cube. Ain't [184:53] nobody like you cube. Get out of here. [184:54] No, I'm just kidding. We love that cube. [184:56] Okay, so let's create some more utils. [184:58] And we're going to create one called [184:59] loaders.js. And this will just have all [185:02] our loaders. And then we're going to [185:04] create another one called resources. And [185:06] this is going to be everything that we [185:08] load. And then we're going to have one [185:09] more. And I guess it's less of utility [185:12] and it's more of like a data. So maybe [185:14] we can create like data over here. I [185:16] don't know. Whatever. We'll just shove [185:17] it in here. And I'll call this [185:19] assets.js. So first let's upload our [185:21] assets. Uh so let's come over to public. [185:25] And ain't nobody need these. Let's get [185:26] rid of those. And what we want to do [185:29] instead is create a new folder here. And [185:30] I'm going to call one for models. And I [185:32] think I'm going to add one for images [185:34] for later. Uh, but I don't know yet. And [185:36] let's just click and drag our models [185:38] over in here. And I don't like these [185:40] file names cuz they're too long. So I'm [185:42] going to hit F2 and just rename this to [185:44] Chad Cafe. And honestly, Cozy Cafe [185:47] doesn't make sense. Let's do Cab Vera [185:49] Cafe for this one. So in assets.js, JS. [185:52] This is basically where we list all our [185:54] assets, what type it is, and the path [185:56] there. That way, we can just when we're [185:58] loading it, we can just like pass all of [186:00] those in directly into the loader. Let's [186:02] come over here and let's export defaults [186:04] an array of objects with some [186:06] information. So, we want the name of it. [186:08] So, the first one we can call Chad Cafe. [186:11] Chad Cafe. And the type it's going to be [186:13] a GB model. GB model. And the path is [186:16] going to be /models/Chad [186:19] Cafe. Chad cafe.glv [186:23] and I forgot the comma over here. So by [186:25] default vit will know it's going to be [186:28] slashpublic. So all you have to do is [186:30] slashmodels. If you want to config [186:32] instead of using public by default, you [186:34] can create a vit.config.js [186:37] file and change it to like static or [186:39] whatever name you want to use it. But [186:41] I'm just going to use the built-in [186:42] default name of public. So we have Chad [186:44] Cafe and then we also have Cab Bear [186:47] Cafe. Cabar [186:49] Cappy. Get it? No cap. Like for real, no [186:51] cap. And then this one will also be [186:53] Cappy Bear Cafe. So let's go to loaders [186:56] and create our loaders. So I'm just [186:58] going to copy from sizes over here. And [187:00] we're going to come over here. We don't [187:01] need events here. Uh we're just going to [187:04] create loaders. Instead of resize, let's [187:05] control here uh control D to select the [187:08] next instance and do init loaders [187:11] over here. And let's create our object [187:13] of loaders. So we'll call this [187:15] list.loaders. And we'll just shove all [187:18] of them into an object. create the glTF [187:20] loader. So this loaders do gltf loader [187:23] gltf loader. So every time we refer to [187:26] this object and then give it a object [187:28] property over here. We're basically [187:29] giving it a key. And then once we hit [187:32] equal, we're creating the value there. [187:33] So it's going to be new gltf loader over [187:35] here. And then we need our draco loader [187:37] cuz we have compression here. So we're [187:39] going to call this draco loader. Draco [187:41] loader. And then this is going to be [187:43] draco loader over here. We need to set [187:45] the decoder path. So we're going to do [187:47] that again. Set decoder path. And we [187:49] need to do Draco. So we need to do the [187:52] same thing as last time. We need to go [187:53] into node modules 3. Sorry, not source. [187:56] It should be examples JSON. And under [187:58] libs, we should see the Draco. Just Ctrl [188:01] + C to copy the whole thing and paste it [188:03] in our public folder. So we're just [188:05] pathing to the / Draco folder. And we [188:07] need to tell our glTF loader to use a [188:09] Draco loader. So we'll just copy this [188:11] over here. And we'll just do set Draco [188:12] loader. Set Draco loader to this. [188:17] Draco loader over here. And I think [188:20] we're going to add some image loaders a [188:21] little bit later, but for now, this is [188:23] going to be enough to load our model. [188:24] And I don't remember this path being [188:26] right. This might be right. I don't [188:28] actually know unless they updated it. [188:30] But these are the older paths that are [188:32] typically used. Maybe add-ons is new. I [188:35] don't actually remember. I would have to [188:36] look. These are the ones that are on the [188:38] documentation. So now we can create [188:39] resources. And I think I'm going to copy [188:42] from sizes. And let's copy in here [188:45] because we need the event emitter. And [188:47] you'll see in a little bit why. So I'm [188:49] going to hold alt and just get rid of [188:50] this and this well as well and get rid [188:54] of that. And of course you already know [188:56] what we're going to do. We're going to [188:57] create an init function over here. Now [188:58] we don't actually need to initialize [189:00] anything. I guess we can call this init [189:03] loading like initialize loading. Uh but [189:05] I'm actually going to call it start [189:06] loading instead. So once resources is [189:09] created we're just going to start [189:10] loading immediately. Now we need to use [189:12] the loaders. Now, because loaders is [189:14] only used in resources, we don't have to [189:16] put it to the singleton. Project manager [189:18] doesn't need it. Resources basically has [189:20] its own aid called loaders. And because [189:22] it's only used once, we probably [189:24] overkilled splitting this up into a [189:25] separate file cuz it's only created [189:27] here, but whatever. It doesn't really [189:29] matter. We'll just do this. Loaders [189:30] equals new loaders. And make sure to [189:33] import that from loaders. And when we [189:36] create the new loaders, we actually just [189:38] want the over here this object. So we [189:41] can actually just directly target it [189:42] after we instantiate it and it'll just [189:44] place it into this classes this loaders. [189:47] Now we also want to set the assets. So [189:49] this assets and that's going to be the [189:51] assets that we created here, right? We [189:53] created this simple data over here. So [189:55] we're just going to grab that. We call [189:57] that assets I think. Yeah, from / [189:59] assets. So we can just get that import [190:00] there. And we'll create an object that [190:02] we can refer to in our other files and [190:05] give this into the experience singleton. [190:07] This is for our project manager. Every [190:10] item that we load is going to shove into [190:12] this object just like our loaders did. [190:14] And we're just going to refer to this [190:15] throughout our application. We're going [190:17] to create a cube, this Q, and it's going [190:19] to be this assets.length, which is [190:21] currently two. And we'll create [190:22] this.loaded, and this is going to be [190:24] zero cuz we didn't load anything yet. So [190:27] once the loaded hits the Q or two. So [190:30] when two equals two, we're going to [190:31] trigger an event. Hey, everything is [190:32] done loading. And then we're going to [190:34] give this item object away to the single [190:37] print. So let's come into start loading. [190:39] And we're just going to do, hey, for [190:40] const asset of this assets. So for each [190:44] object in our array over here, we're [190:46] just looping through each one of these [190:48] objects over here. We're going to check [190:49] the asset type. So if so, if asset, [190:52] we're going to check the type. If it [190:53] equals equals equals GB model, which is [190:57] right over here, we're just checking, [190:58] hey, is it type GB model? Great. If if [191:01] it is, then we're going to do this [191:02] loaders, and we're going to select the [191:04] gltf loader, gltf loader, and we're [191:07] going to load. We're going to take that [191:08] asset.path that we also plug in in there [191:10] and we're going to load that asset. But [191:12] now we want to shove it into this items [191:14] over here. So let's come over here and [191:16] what we want to do is do single asset [191:18] loaded. Single asset loaded. Which means [191:20] once a single asset is loaded, what are [191:22] we going to do for it? Well, we're going [191:23] to shove it into this items object over [191:25] here. So what we need here is the asset [191:28] information as well as the actual file [191:30] that is loaded itself. So we can pass [191:32] that in in the loader itself. So if you [191:35] go to the gltf loader documentation, you [191:37] can see the first one is the string with [191:38] is the path which is what we've passed [191:40] in asset.path and on the second one is [191:42] onload. So once it's done loading, what [191:44] are you going to do? We're going to [191:46] trigger a callback function over here. [191:49] So we're going to just call this pretty [191:50] much. So once the file is done [191:52] downloading, we're going to trigger a [191:54] function over here and that's going to [191:56] be this single asset loaded. We're going [191:58] to put pass in the asset name as the key [192:00] and we're going to pass in the file [192:02] itself. And then here what we can do is [192:04] just do this items. Create the key from [192:06] the asset name that we passed in. And [192:08] we're going to set the value equal to [192:09] file just like this. Then we can [192:11] increment this.loaded because it's done [192:12] loading this.loaded this.loaded plus+. [192:15] So every time we load one, we increment [192:17] by one. And if this.loaded equals equals [192:20] equals equals this.q, which means how [192:23] many items are in the queue to load. [192:25] Then we can this.eit using the event [192:27] emitter here that resources are ready to [192:30] go. Great. So, let's go into [192:32] experience.js over here and let's create [192:35] the resources. So, we want to create the [192:37] resources first and then the world. So, [192:39] we're going to shift alt up arrow and [192:40] we're going to come over here and we're [192:42] going to call this resources. Let's make [192:44] sure to import that. Now, if I go to [192:46] resources, let's just console.log [192:48] console.log this items over here. And it [192:51] should log twice because we're calling [192:53] it twice. So, here you can see we have [192:54] Chad Cafe and then the object itself and [192:57] then caviar as the key which is the [192:59] asset.name that we gave. So now world [193:02] can listen to this. So what we want to [193:04] do is once this dot this experiences [193:07] once its resources are ready. So on [193:10] ready what do we want to do? We want to [193:13] create our stuff. So we're going to do [193:15] this is where we start creating our room [193:17] and things like that. So let's just come [193:20] over here now and let's create our first [193:22] room which is going to be Chad Cafe. [193:25] Chad Cafe.js over here. And I'm just [193:28] going to copy from worlds cuz why not? [193:30] Ain't no more time that Chad cafe. Let's [193:33] go, dude. Let's go. And we can get rid [193:36] of this. And now because it's coming [193:38] from experience the resources, we can [193:40] just set the room itself. So I'll do [193:44] this. Chad cafe. This Chad cafe equals [193:48] this.experience.resources. [193:50] And I'll call it Chad Cafe. Actually, it [193:52] should be capitalized because in assets, [193:54] if I control P and go to assets, this is [193:56] capitalized. Let's just lowerase it cuz [193:58] ain't nobody got time. We should just [194:00] keep it consistent. You feel me? You [194:02] feel me? And oh, I called that Cabby [194:04] Barrett. Sorry. It should be Cabby Barra [194:05] Cafe. What's wrong with me, man? What's [194:08] wrong with me? Let's create an [194:09] environment so we have like lighting and [194:11] stuff. You can just if you don't want to [194:12] split up, you can just directly play a [194:14] world. I mean, nothing wrong with that. [194:15] You can just put like lighting in here. [194:18] You don't really need a a second one. [194:19] And I misspelled that. So, let's just do [194:21] that. And let's just copy Chad Cafe over [194:24] here. I don't think we're going to need [194:25] resize or update here, but whatever. We [194:27] can just leave that in for now. And all [194:30] we need in in netit is probably So, [194:32] let's just create a basic ambient light [194:34] for first. Ambient light. And I'm going [194:37] to set it to a new three. Light. We're [194:40] going to give it a color of # fff. I [194:43] think that is by default anyway. And [194:45] intensity of one, which is also default, [194:47] but I'm just going to set it anyway. And [194:48] let's just do this.experience. [194:51] Scene add. And we'll just add this. [194:54] ambient light just like this. I don't [194:55] know if we need this here. We could [194:57] probably just do con ambient light. I [194:59] don't think we'll ever refer to it [195:01] outside this class. So, whatever it [195:03] doesn't it doesn't matter if you use con [195:05] or whatever. And in world. So, now what [195:08] we can do is import both the chat cafe [195:10] and the environment cafe over here. So, [195:12] let's come over here. Oh, sorry. I [195:14] should probably rename this first [195:16] properly. Environment. [195:18] Let's go back over here. Let's do this. [195:21] Chad cafe. This Chad Cafe this Chad Cafe [195:25] equals new Chad Cafe. Get that import [195:28] over there. Shift alt down arrow. Same [195:30] thing over here. And we'll do [195:31] environment. Environment. Environment. [195:36] Just like that. Let's control space to [195:38] import that as well. And in Chad Cafe, [195:40] we also need to add this to the scene. [195:43] So we'll come over here and we'll do [195:45] this.experience [195:47] scene add this chat cafe. And of course [195:50] from the resources objects, sorry, the [195:53] Chad cafe is in the items object. So [195:54] let's go get the resource classes items [195:57] object and the Chad cafe inside the [195:59] resources items object. Going to get the [196:02] scene of the chat cafe object. So if I [196:05] go back, we see 3. Lights is not a [196:08] constructor. So yeah, that's cuz I have [196:10] a typo. So let's go back over here. This [196:11] should be a capital letter over here. [196:13] And now if I go back, you can see that [196:15] indeed we have Chad Cafe over here. Now, [196:18] I noticed when I resize, it's kind of [196:20] glitching out. And that's probably [196:21] because we also need to tell the [196:23] renderer over here to resize. You can [196:25] see when I resize, it's fine. And I just [196:27] realized this. We should wait for the [196:28] renderer before we create our resources [196:31] and our world. So, I added a directional [196:34] light helper as well as a sunlight. You [196:36] will see me make adjustments to the [196:38] scene throughout the video without me [196:40] mentioning it because it's just playing [196:42] around with lights at this point. Now, [196:44] there is one issue here. I hate how [196:47] every time I refresh, I have to start at [196:49] 0 0. So, we should probably set a [196:51] default starting position. Another issue [196:53] I see is Chad's face is not the same [196:56] color, even though the image used the [196:58] same color. Now, the reason that's [197:00] happening is cuz I never saved a PNG [197:02] version of this. I'm actually still [197:03] using the EXR version. And that's also [197:05] why I think my file size was literally [197:08] twice as big as the Cabra one. And here [197:11] you can see after I reexported with PNG, [197:13] it is significantly smaller. Okay, let's [197:15] add a default camera starting position. [197:17] So, I'm going to go into let's just go [197:19] do it in camera. Why not? And every [197:21] update I'm going to console.log [197:23] console.log this.instance.position [197:27] as well as this.cont controls.target. [197:31] So, we can set a default value. And [197:33] we're probably going to get rid of this [197:34] pretty soon, but we might as well just [197:36] get it now. And I guess this is also the [197:39] time to determine your FOV. 35 is a [197:42] little bit of a wide angle lens a little [197:43] bit. So maybe 45 is a little bit more [197:45] realistic. Yeah, really up to you. [197:47] Anyway, once you get a camera angle that [197:49] you like. So I think I'm going to [197:51] actually start it directly in front kind [197:53] of like this. And this one is obviously [197:54] the target cuz it's really really far [197:57] away. So we can just come over here in [197:59] our set orbit controls. We'll do this [198:01] controls target set. Let's paste this [198:05] over in here. And it's going to be the [198:07] really far away one. Great. And then [198:09] this one for the position. [198:12] Uh we can just do set here. instead and [198:15] set all three of them. Same thing. And [198:18] we'll just add two commas here. And oh, [198:19] it's actually the other way because I [198:21] forgot we're spawning at 00 0, which [198:24] means the camera is the one that's [198:26] farther away and it's looking at the [198:27] 00001. [198:29] So, it should be the other way. My bad. [198:31] Great. So, let's add a floor and an oval [198:33] like we said we're going to do. So, it's [198:35] technically part of the world. So, you [198:37] could probably put it as separate if you [198:39] wanted to, but I'm just going to put it [198:41] as part of Chad Cafe. And then Cozy Cafe [198:43] is also going to have its own separate [198:44] one. Now, because they're identical, [198:46] again, you could probably extrapolate it [198:48] and then use it as a reusable component [198:50] for parameters. That way, you don't have [198:52] to like tweak everything twice, but [198:55] we're only doing it twice. So, I'm just [198:57] going to keep it directly in here [198:58] itself. So, let's get rid of this [198:59] console log over here for some reason. [199:01] And you can put init here if you want [199:04] to. Maybe I call this init. And then we [199:06] create some more functions called init [199:08] cafe. [199:10] And we add the cafe over here. And then [199:13] we can have some like init plane. Nit [199:15] plane. Uh again, if you just want to put [199:18] it all in it, like that would be my [199:19] guess. It doesn't have to be like this. [199:21] In it back VG orb or whatever you want [199:25] to call it. Sphere. Sphere is probably [199:27] better. And then in init we just called [199:30] this.init cafe. This.init cafe. And what [199:35] am I doing? Why am I doing it every [199:37] single time? I can just copy and paste [199:39] it like this. just uh shift alt down [199:42] arrow and then control alt down three [199:45] times this dot and just like that. I [199:48] don't know what it's doing. And so we [199:50] just create a knit once and then init [199:52] calls all the other knit ones. Too lazy [199:53] to type out this myself. So I'm just [199:56] going to go to the documentation to copy [199:57] the plane cuz ain't no one got time for [200:00] that. And then we got to copy this. [200:02] Right. Right. Right. And then we just [200:03] add the plane there. We don't have to do [200:05] this plane. It doesn't really matter. [200:07] We're not going to use the dot plane [200:08] anywhere else. So, we can just leave it [200:10] as a const. Like I said, same with the [200:13] sphere. So, let's go for the sphere. [200:14] Ain't no got time to type that out. I [200:17] mean, that's why we got AI for today's [200:19] AI is supposed to type this out, you [200:21] know, [200:23] man. And now we just add sphere here [200:25] instead. Cool. We can't see our sphere [200:28] because, well, actually, we can. We see [200:30] it, right? But we need to flip it. And [200:32] it's really small. So, we need to make [200:33] it super super large. And of course, we [200:36] can't see it cuz it's like Well, sorry. [200:37] 1,000 is way too far. That's beyond our [200:40] camera limit. So, I don't know, maybe we [200:41] can do like 500. And we need to see the [200:44] inner side of the base. So, we're going [200:46] to come over to the material and instead [200:49] of double side, we're going to back [200:51] side. And the plane itself doesn't need [200:52] to be double side either. It just needs [200:54] to be the front side. Front side. [200:57] Whoops. Sorry. Front side. Great. So, [200:59] now we have that yellow background. And [201:01] our plane the issue with the plane is [201:03] that it's up directly up and down. So [201:05] what we can do is rotate that puppy. So [201:07] come over here plane. You got to rotate [201:10] row. You got to rotate on actually we [201:13] can just set its rotation itself. So we [201:16] can do rotation. Let's rotate it 90° on [201:19] the x axis, zero and zero on the other [201:21] ones. So it should be flat now [201:23] hopefully. Yeah. Great. And I don't know [201:24] why it gives me such a terrible color. [201:27] This color is so bad. this colors. So, I [201:29] just temporarily changed the color, but [201:31] you know, feel free to use whatever [201:32] color you want to use. And then, of [201:34] course, make the plane really large as [201:35] well. I'll probably make this just a [201:37] slightly different color so I know what [201:38] I'm looking at. And oh, I don't see the [201:40] plane because I'm looking that way. So, [201:42] sorry, this should be minusm.pi / 2. [201:46] Great. So, we have our plane. And uh, of [201:48] course, that color is not great, but [201:49] we'll just change it later. So, now we [201:51] need to add shadows. We did it before, [201:53] so I just asked my handy AI assistant [201:55] over here to do it for me. We need to [201:57] traverse through all our objects. Check [201:59] if it's a mesh. If it is, then set those [202:01] properties to true, basically. And then [202:03] I asked it to leave sphere untouched, [202:05] but change plane to mesh standard [202:07] material in order to be able to cast and [202:10] receive shadows, except I just had it [202:12] receive shadow, but not cast shadow cuz [202:14] the plane isn't going to be casting [202:15] shadow on anything. So that's all I did. [202:17] Copied that over there. Now, when you go [202:19] back, we notice the plane has some [202:21] issues over here. So we can come and [202:23] adjust the plane and we can just set it [202:25] and instead of position we'll do this [202:27] and then it's going to be in the Y. So [202:29] we can just try like 2.48. The only [202:31] reason I know that number is cuz I tried [202:33] and errored off camera first. And here [202:35] you can see that's pretty good. And one [202:37] issue that we have here though is none [202:39] of these are casting shadows. Probably [202:41] because our shadow camera is not that [202:43] big. So let's add a shadow camera helper [202:46] to our scene over here just so we can [202:48] visualize it. And here you can see the [202:50] inside one is the shadow camera and then [202:52] the other one is our sunlight visualizer [202:55] helper. So you can see just like in the [202:57] previous video I'm in my shadow camera [202:59] really really large and everything is [203:01] starting to cast shadows now. And of [203:03] course you will have to play with your [203:05] normal bias values. Tweak them around [203:07] until you get something that starts [203:09] working. And don't forget you can set [203:12] the target position for wherever your [203:15] directional light is looking. It doesn't [203:16] have to be 0000. Anyway, I think we have [203:19] enough. We can just copy and paste Chad [203:22] Cafe into Cabby Bear Cafe. If you want [203:25] to wait to duplicate just in case we [203:27] have any other thing, you can totally [203:29] just wait if you want to. Not a big [203:31] deal. And let's just control shift L to [203:33] select all the instances of Chad Cafe. [203:36] And I'm going to call it Kabi Vera. Kabi [203:40] Kabi Vera cast one needs to be [203:41] capitalized. Let's go in world. And I'm [203:44] just going to shift all down arrow. [203:45] Cababie Vera. Whoops. Vera. Uh, I guess [203:48] I kind of like camel case here better, [203:49] but whatever. I'll just leave it lower [203:50] case. And let's just make sure to import [203:52] Cabi Vera Cafe, too. Now, if we go back, [203:55] we see everything overlapping. So, let's [203:58] come into world. And let's just hide the [204:00] Chad Cafe for now and just take a look [204:02] at Cababi Cafe. Great. Now, this one [204:05] seems a little bit too bright. So, we [204:06] could have different lightings for each [204:08] one if we wanted to. And there's some Z [204:10] fighting over here. Or I think that's [204:12] just the outline itself. But either way, [204:15] uh, we probably need to make lighting [204:17] adjustments per scene. And we can change [204:19] that in a little bit. Never mind. Screw [204:20] it. Let's just do it right now. Uh, so [204:22] what I'm going to do is go into [204:24] environment and I'm just going to copy [204:26] the init function. And I'm going to [204:29] controll X to quickly delete that. If [204:32] you want to create separate files for [204:34] chat cafe environment and cavi bear cafe [204:36] environment, you can totally do that as [204:37] well, but uh, it doesn't really matter. [204:40] And I'm going to call this init [204:41] environment. [204:43] I know I misspelled that. I'm going to [204:45] fix that typo, but I'm not going to [204:46] waste your time doing that uh over here. [204:49] And I'm just going to controll X and [204:52] like that. And then I'm going to have [204:54] one and just copy this over for Cappy [204:56] Bear Cafe as well. And let's just make [204:58] sure to shift alt down arrow and change [205:00] this to in environment for both of them. [205:03] Technically, the plane and the BG orb is [205:06] also like part of the environment. So, [205:07] you can put it in here if you want to, [205:09] but I'm just going to keep it separate. [205:10] Now, I just want to talk about a few [205:11] tips when it comes to environments in [205:14] 3JS with real-time lights. So, it is in [205:16] the documentation, so I'm not going to [205:19] talk about that too much, but one really [205:21] nice helpful thing is using little GUI. [205:24] And this is the little interface over [205:26] here where you can change like light [205:27] position, intensity, color. That way, [205:30] you don't have to manually change stuff [205:31] and it's just a little bit nicer. And [205:32] then you can change like the target and [205:34] things like that. So we can just do mpmi [205:37] little gui-dsave-dev [205:41] to put it in our [205:44] uh dev dependencies. It doesn't really [205:46] matter if you put in dependencies or dev [205:48] dependencies. It's more just semantics [205:49] here. Dependencies are the ones that you [205:52] quote unquote use on deployment and in [205:54] production where dev dependencies are [205:56] not. But these are also still used in [205:59] production too. So it's more just [206:01] semantic clarity there. There are cases [206:03] where that matters depending on what [206:04] text stack you use, but for us it [206:06] doesn't really matter where it is. And [206:08] at this point, I feel like if you want [206:09] to set it up, I would just use AI to [206:12] help you set it up. Uh, yeah. So, you [206:14] can see my prompt here. That's literally [206:16] I just copy it and paste it. Set up a [206:17] little GI controls for my sun and [206:19] ambient light. So, you'll get a bunch of [206:22] folders. It's just a bunch of parameters [206:24] that you pass in. Make sure you have the [206:25] onchange here. Sometimes AI will not [206:27] give you that for this time. Claude did [206:29] a good job. So onchange is just like [206:32] every time you change it you need to [206:33] update some sort of thing. Now if I go [206:35] back here you can see I can change the [206:37] target of the light and I can change the [206:40] position of it the intensity and the [206:42] color and that's all super cool and we [206:44] can see that all in real time there. You [206:46] can also have enable or disable for it [206:49] as well which I did not add into here [206:52] but you can toggle like on and off [206:54] ambient light, toggle on and off [206:55] sunlight and so on so forth. Another tip [206:57] I have is to use empties to place your [207:00] lights and just copy those positions. So [207:02] if you have a bunch of empties here, [207:04] like I added a bunch of empty cues on [207:06] position on these lights, you can do [207:08] Ctrl F2 to bulk rename the objects that [207:11] you've selected. And we can just search [207:13] for empty and replace it with light. And [207:15] I'm just going to hit okay. And I'll [207:17] rename those all to light. And we can [207:18] actually export this as part of the GB [207:21] file of the other cafe. And we can just [207:23] look for all the empties in the GB file [207:26] that way. But for now, I'm just going to [207:27] export it as a separate GB just to show [207:29] you what you can do with it separately. [207:32] But again, I would keep this inside the [207:34] same GB file. I would not use a separate [207:36] GB file unless you want to use the same [207:38] empties for both of them. So, let me [207:40] just show you. I uploaded our empty [207:42] object. I added to our assets and then I [207:45] can just use it directly in chat cafe. [207:47] All I have to do is refer to that name, [207:49] right? Because in our resources object, [207:51] it created that ID for us and it works [207:53] out of the box. So what I did then was I [207:56] asked AI to generate me spotlights that [207:59] are at each empty and pointing downwards [208:02] and also adding a helper. So you can see [208:05] traverse light empties and each empty in [208:07] the scene create a spotlight pointing [208:09] down with a helper attached to it. And [208:11] all I had to do was copy this and [208:13] replace my init environment and it [208:15] worked directly out of the box. I could [208:17] probably also ask it to add each [208:18] spotlight to the little GI but I did [208:20] not. And of course, you can just again, [208:22] you can just export it with Chad Cafe [208:24] and just traverse it with Chad Cafe. [208:26] That way, you don't traverse two [208:27] different objects and that way you don't [208:28] have two separate files and all that [208:30] kind of stuff. I'm going to undo all [208:31] those changes. So, don't even worry [208:32] about it if you don't see them. Um, [208:36] because it was just a neat little trick [208:38] to do. So, if you're one of those people [208:39] that like to hand paint everything like [208:41] highlights and shadows, you might want [208:42] to work with emission textures, uh, [208:44] sorry, emission nodes. And the way to do [208:47] that quickly is to use AI to generate [208:50] you a script that will replace every [208:52] principal BSDF with an emission node [208:53] instead. So here you can see my prompt [208:56] over here. Write me a script that [208:57] changes principal BSDF and then make [208:59] emission strength one cuz the first time [209:01] they set all emission to zero for [209:03] whatever reason. But yeah, you don't [209:04] even need a good prompt. It will do do [209:07] this simple task really well. Another [209:09] tip and trick, if you decide you no [209:10] longer want the outlines, you can [209:12] actually ask AI to generate you a Python [209:14] script that will delete all your [209:16] outlines. And I only oneshotted it, and [209:18] it wasn't really even a great prompt [209:20] anyway, so I just copied it and paste it [209:22] in here. Now, make sure uh according to [209:25] this script, everything has to be [209:26] visible. So, if you accidentally have a [209:28] hidden one, it's going to throw an error [209:31] that's saying the name does not exist. [209:33] But take a look. Everything has an [209:34] outline. We just run this script and [209:37] voila. [209:38] All the outlines are gone. Now, if you [209:40] want to, you can tailor up the script to [209:42] put only certain objects in certain [209:44] collections and remove anything that is [209:47] in that specific collection, like remove [209:49] outlines, have Blender, have the AI [209:52] generate a script to only remove [209:53] outlines inside that collection. You [209:55] could totally do that as well. And I [209:57] think it only gets rid of the outline [209:58] one, not outline. 01. Again, you can [210:00] just reprompt the script to get rid of [210:03] all anything that starts with the text [210:05] outline. So, that's like a really quick [210:07] way to do that as well. I guess I should [210:09] have mentioned it earlier, but to add [210:10] icons, like contact icons, one of the [210:12] easiest ways to do that is just finding [210:14] an SVG icon to download online. Make [210:17] sure you check the license so you can [210:19] use it. And then just clicking and drag [210:21] it in over here and import as SVG or its [210:24] origin point might be messed up. Yeah, [210:25] it's origin point's definitely messed [210:27] up. Either way, let's just do origin [210:29] geometry. And when it has the Z [210:30] fighting, just move like some of them up [210:32] and down. And they're all curves. So, [210:35] what we can do is convert them to a [210:38] mesh. But first, if you want to, you [210:40] could probably extrude it as a curve, [210:41] but you can also extrude it as a mesh, [210:43] too. Now, one bad thing about using SVGs [210:46] as meshes is the topology is often [210:48] terrible. There's ways to clean it up. [210:49] Like, you can merge by distance and [210:51] change it really small till you get rid [210:52] of overlapping vertices potentially. You [210:55] can also like select the edge rings, I [210:58] guess, shift duplicate, GZ, and then use [211:01] these as the one instead. Well, I guess [211:03] you don't have to duplicate both of [211:04] them. Just duplicating one and then [211:06] extruding outwards S or insetting and [211:08] deleting would be fine here, too. Uh, so [211:10] if you want to clean up, you can, but [211:12] like using one thing that's bad in [211:14] topology is not really a big deal. And [211:16] then, of course, you can give it a solid [211:19] a solid a solidify modifier if you want [211:22] to. Sorry, I started studying. And it's [211:24] the same thing as extruding as when it [211:26] was a curve. If you ever apply your [211:28] modifier and want to change the width of [211:29] it, you can just like select the face, [211:31] hit L, and it'll select the entire [211:33] outline and then you can just do Alt S [211:35] and scale it that way. Okay, so I just [211:38] wanted to mention that I did add a few [211:40] extra details here. I'll come back and [211:42] revisit this a little bit later, but I [211:44] added some contact signs over here that [211:46] I renamed Twitter contact and this, [211:49] which I can actually join this because [211:51] I'm not going to target it. Um, same [211:54] with Chad Cafe. CH cafe. It's the same [211:56] thing. And I added a few other objects [211:58] over here like a car and I named it car [212:00] wheel, car front, and so on so forth. [212:02] But don't worry, we'll come back here [212:04] and I'll make sure every object that I [212:06] created off camera, I'll make sure to [212:08] mention it as we continue with the [212:10] tutorial and you can apply it to your [212:12] own scene. So, I just reuploaded them. [212:14] And in our init function, I got rid of [212:16] the plane because I kept the plane in [212:18] the model this time because I made a few [212:19] adjustments to the plane. So you can see [212:21] if I go back uh I have all my updated [212:24] models here. I didn't touch anything [212:25] else. And now I think what we can do is [212:29] start with the controls. So make sure to [212:32] set your lighting and then I will see [212:34] you on the other side. So let's come [212:35] over here and just do controls.js. [212:38] All right. So let's just copy from [212:40] camera.js into controls.js. [212:43] And I don't need this. Uh we well [212:46] probably we might need this stuff. I'm [212:48] just doing Ctrl X to quickly get rid of [212:50] everything. I don't want this in it. [212:53] Cool. And let's just call this controls. [212:56] And let's come over here. Shift alt down [212:58] arrow and add our controls over here. [213:01] Make sure to save both files and just [213:03] find the import of dot /controls. So [213:06] we're importing it over here. I am [213:07] getting a init function error and that's [213:10] because I think in resources uh sorry in [213:13] environment, yeah, I got rid of init [213:15] here. So, I don't know if we'll ever [213:16] need this file, but I'm just going to [213:18] keep this temporarily. Ignore this [213:20] error, by the way. This is probably [213:21] related to one of my browser extensions. [213:23] Now, you might be asking, why don't we [213:24] just put controls in camera.js? Why do [213:26] we have a separate file for it? Can you [213:29] just put everything in camerajs? And the [213:31] answer is absolutely you can put [213:32] everything in camera.js. But the reason [213:35] I'm splitting it out is because in the [213:37] real world, you kind of have like a [213:38] camera, right? And then you also have [213:40] controls for your camera. Whether that [213:42] be like your arms to hold the camera, [213:44] whether that be like a camera rig arm [213:46] for like a movie or a tripod or [213:48] something, you typically like have your [213:51] camera and then you also have a set of [213:53] controls for your camera. And I kind of [213:55] represent that through code by splitting [213:57] it up into two different files. But of [213:59] course, you could keep all the control [214:01] logic in camera if you wanted to. And I [214:03] feel like that is also just personal [214:05] preference. But I feel like for this [214:07] sort of interaction, it's more common to [214:09] bring out controls into a separate file. [214:11] By the way, I should mention now's a [214:13] good time to determine if you want to [214:15] use a perspective or an orthographic [214:17] camera. You can follow along with either [214:19] one of them. I'm going to be using a [214:21] perspective camera. Great. So, let's go [214:23] back to controls and let's add a event [214:26] listener over here. And I don't know if [214:28] I want to do the window or the canvas [214:30] itself, but I think we actually want the [214:32] canvas itself. So, let's do this. ments [214:34] and let's grab that canvas element which [214:36] is right over here that we created in [214:38] experience.js. So let's come over here [214:40] and we want to add and we want to listen [214:43] to wheel and we'll add a little bit on [214:45] for the touches. So let's create that [214:46] function right now that we want to do [214:49] for the wheel. Let's console.log the [214:52] event object that comes with this event [214:54] listener just to see what we can use to [214:56] move the camera position. Now this is [214:58] review so I do encourage you to pause [215:00] the video and give it a try on your own [215:02] but we will do it together. So as I [215:04] scroll here, you can see we have this [215:06] value over here called delta y. That [215:08] pretty much gives us a value that we can [215:10] play with. So now we know how to get the [215:13] camera. So we can do this.experience [215:15] camera. And we want the instance of the [215:18] camera. So we'll do that. And we can [215:19] just do plus equals e. deltayy deltay. [215:23] And let's multiply it by a factor like [215:26] 01. So we only move one unit per tick [215:29] rather than 10 each time. Depending on [215:31] your computer, this might be a little [215:32] bit different. And whoops, I forgot to [215:34] add to the position, not just the camera [215:37] itself. And let's choose position.x. And [215:39] now when I scroll, you can see that it [215:41] is going. [215:43] It's a little bit jaggedy because it's [215:45] having the orbit control zoom as well as [215:47] the movement. So I'm going front and [215:50] backwards on the X, which means I must [215:52] have rotated my model when I was [215:53] modeling. So it might be X for you. I [215:56] think it's going to be Z for me. When I [215:57] scroll, you can see. Yeah. Now I'm going [215:59] left and right on the Z-axis. When I [216:01] scroll down, it's going to the left, [216:02] which I do not like. So I'm going to [216:04] subtract this instead. You can also just [216:06] multiply by a negative number. Your [216:07] result will be the same. And now when I [216:09] scroll down, you can see that we're [216:10] going right and then we're going left [216:13] just like that. Now, one issue we do [216:15] have here is the orbit controls. It is [216:18] currently conflicting with our custom [216:20] controls cuz it also has like wheel [216:21] events and stuff like that. So we can [216:23] disable it and then we can reenable it [216:25] in a little bit. But before we do that, [216:27] we have to figure out a solution for [216:29] E.L.A.Y. because it's different on every [216:31] single computer. Now, one way to do that [216:33] is by clamping or we can use a online [216:36] package that does this for us called [216:38] normalize wheel. So, we can just copy [216:40] this and install that. Again, [216:42] controlback tick to open this. Create a [216:44] new terminal and just install that. And [216:47] now what we can do is import normalized [216:50] wheel from normalized wheel and then [216:52] normalize that event object. So, let's [216:54] come over here. Let's do const normalize [216:57] wheel equals normalized wheel. Grab that [216:59] event object there. And now we can just [217:01] use this instead of the event object [217:04] delta y. Now if you console.log [217:06] normalized wheel console.log, you can [217:08] see it gives us pixel y instead. So [217:11] let's use pixel y. And let's increase [217:13] this by a factor of zero. Let's do pixel [217:16] y. And everything should be the same [217:18] over here. All right. So let's go back [217:20] into camera.js and let's get rid of our [217:23] orbit control. So I'm going to delete [217:25] that. And I'm also going to sorry not [217:28] delete it but get rid of that. Now one [217:30] issue here though is if we ever initiate [217:33] set orbit controls we kind of like also [217:34] have to do this. We can put it in little [217:36] GUI or our own custom interface to [217:38] toggle it on and off like with an HTML [217:40] element button. Um the other issue is [217:43] also once we get rid of set controls we [217:45] also have to like get rid of this here [217:47] too. So we can add a guard clause just [217:50] to save a little bit of time instead of [217:51] just putting in little GI if this [217:53] controls. That way we only can just get [217:56] rid of the function itself and don't [217:57] have to worry about getting rid of this [217:59] if we need to cuz this controls doesn't [218:01] ever exist once we don't create it. Now [218:04] you can see when I go back uh the camera [218:06] is that way. So if you modeled your [218:09] scene that way you probably don't have [218:10] an issue here. But I need to rotate my [218:12] camera. So I'm going to do that. So [218:14] let's go back to my camera over here. [218:15] And I'm just going to play with the Y [218:18] rotation. So I'll do this.instance [218:21] instance.rotation [218:23] doy whoops equals math.py / 2. Great. [218:28] And now I'm back looking just like this. [218:30] Sweet. Okay. Now before we move on, we [218:32] want to use linear interpolation to [218:35] smoothly move the camera. Right now it [218:37] feels a little bit janky that we're just [218:38] adding to the camera. So this is review [218:40] from the previous video, but we need a [218:43] target and we're going to let the [218:45] request animation frame update do the [218:47] rest of the work. For those of you who [218:49] are not familiar with linear [218:51] interpolation or need a refresher, it's [218:54] basically the idea that you have your [218:56] distance and time. So we can say t for [218:59] time. Instead of going a constant amount [219:02] every single time we tick to go to our [219:05] final target position, whatever that [219:07] target might be, what we do is we create [219:09] a target and we run a mathematical [219:11] formula that makes it go infinitely [219:13] closer over time, closer and closer, and [219:16] gets like a smooth sort of thing like [219:18] that. Now, there's a lot of different [219:19] formulas for looping, but that's the [219:22] general idea. You have a target [219:23] position, you have a starting position, [219:25] and you update the target position and [219:27] everything in between is just managed by [219:30] automatically by the mathematical [219:31] formula rather than constantly ticking [219:34] it up until whatever value you get to. [219:36] By the way, you can also use the [219:38] direction one. I forgot what they called [219:39] it, but you don't have to use pixel y. [219:41] Anyway, let's create the target. So, [219:43] let's come over here and let's just [219:44] create this.target. And I think now [219:47] because we're going to refer to the [219:48] camera so much, we might as well just [219:51] create a this variable for this class. [219:54] This camera equals this. That way we can [219:56] just refer to this camera. This camera. [220:00] It's just a little bit cleaner. That is [220:01] totally optional though. We can set the [220:03] the starting target position equal to [220:06] the starting position over here. So [220:08] we'll just come over here and we'll do [220:10] this camera camera. [220:14] And that'll be the starting 3GS vector. [220:16] So this is going to be a 3GS 3 vector. [220:18] We can uh add some other parameters here [220:21] like our speed. So we can call this like [220:24] speed. [220:25] And we can just right now the speed is [220:28] at 0001. So we can get we can probably [220:30] put it over here. I don't know if this [220:33] needs to be a global variable or we can [220:34] just leave it in the function. Doesn't [220:36] really matter. This speed and let's keep [220:39] time speed here. That's right. Should be [220:41] this speed. Then we also need our linear [220:44] interpolation factor. So basically how [220:46] smooth it is. So we can just do that. [220:48] And then 01 is a very common one. So [220:50] we're going to start with that and see [220:51] if we have to change that later. Now if [220:53] you didn't catch it, I made an error [220:55] here. This is currently just a reference [220:57] to this camera. We need to make a clone [221:00] of it. So luckily we can just create a [221:02] clone and create a entire new copy of [221:05] that initial camera position. Okay. And [221:08] instead of targeting the camera position [221:10] itself, we are updating the target [221:12] position and letting everything do the [221:13] work it's for. And we're letting the [221:15] update function do the work for us. So [221:17] let's go into experience.js here. And [221:20] let's make sure we update our controls. [221:22] So I'm going to shift all down over [221:23] here. And I'll do this. [221:27] Which remember we created right over [221:28] here. So now this is going to be [221:30] infinitely looping and we should just be [221:32] able to this camera.position position [221:35] and we can use the built-in lurp [221:36] function of 3GS and we want to lurp to [221:40] this dot target position and with our [221:42] thislurp factor which is going to be the [221:45] 01 over here. So lurp will take this [221:48] truck position and slop it in right the [221:51] resulting vector right directly in here. [221:53] So you can think of this basically as [221:55] like an equal pretty much. Um but yeah [221:58] whatever it just looks like this. So now [222:00] as I can scroll you can see it's very [222:02] very smooth. So maybe we can do is [222:06] probably make it I think 10 times [222:07] faster. So let's get rid of zero. [222:11] Yeah. And now we have a very smooth [222:14] camera. So just play around with it [222:16] until you get something that you like. [222:18] So this feels a little bit too smooth. [222:20] So maybe like that. Yeah. Feels a lot [222:22] nicer. So yeah, just play around with it [222:23] until you get something that you like. [222:25] So the next thing I want to do is make [222:27] it work with touch events. Now, if you [222:30] don't want to use the browser one, it's [222:32] a good time to suggest or sorry, mention [222:36] that in package.json, if you do vit-host [222:40] and let's cancel our current development [222:42] server over here. So, it's going to be [222:43] this one. And make sure to save that. [222:46] And you rerun mpm rundev. You're going [222:48] to get this URL over here. And if your [222:51] phone is connected to the same internet [222:53] as your computer, you should just be [222:55] able to visit this URL on your device [222:57] and see your application on there. So if [223:00] you want to test it that way, you can [223:01] totally do that. I will be using the [223:03] browser testing tool. So let's go back [223:05] to controls and we need to listen to [223:07] touch events. Why are we using touch [223:09] events instead of pointer events? Isn't [223:11] it better practice to use pointer events [223:13] over touch events? And the answer to [223:15] that is yes. But in specific cases, [223:18] there are times where pointer events [223:20] don't really work well on Safari iOS, [223:22] and we would have to spend some time [223:24] debugging it. So, it's just easier just [223:26] to use touch events. But if you want to [223:27] go down that route and use pointer [223:29] events, the logic is basically the same. [223:31] And of course, you can always use [223:33] pointer events and touch events and like [223:35] detect the device that you're on to [223:36] switch between them. But we're for [223:39] simplicity sake, we're just going to use [223:40] touch events. And the logic is again [223:42] basically the same. So, let's just come [223:44] over here. And at this point, we're [223:47] going to use canvas a lot as well. So, [223:49] it's probably just better just to [223:51] extrapolate that onto a class variable [223:53] as well. So, I'll do this. Equals [223:56] this.experience.canvas [223:57] element. And then this will just be [223:59] this.vas. [224:01] This canvas. And let's just copy this. [224:04] And what we want are touch start. So, [224:07] the moment we tap down on our screen is [224:09] going to be to touch start. And we're [224:11] going to register that position. And [224:13] then when we move our finger, that's [224:16] going to be the touch move to update our [224:18] finger position along as we move across [224:20] our screen. And then we have a touch [224:22] end. And then we have a touch end event [224:25] listener. Sorry, I should probably be uh [224:27] typing this out as I talk about it. And [224:29] then we have a touch end one. And that [224:31] means when we lift off our pointer [224:34] finger, what do we want to do? And I [224:36] know I misspelled this. So I'm going to [224:37] control D to select all of them and just [224:39] get rid of that. Uh, sorry. Ctrl D is [224:42] the next instance. So, what do we need? [224:44] Well, first let's think see what we [224:46] actually get. I'm just going to hold alt [224:48] and create two cursors and just drag [224:50] intr x to get rid of that. Let's just [224:52] console.log what we have in the vent [224:54] object for now. And let's also do that [224:56] in for touch move. So, when I tap down [224:59] and I drag, let's open this touch event [225:02] and see what we get. We are interested [225:04] in this object over here called touches. [225:06] And then each of these touches that we [225:08] have here has a lot of information. [225:10] Reason touches is an object here is [225:13] because you can have like two fingers, [225:14] right? Two fingers on the screen at the [225:16] same time. Then you would have two touch [225:18] objects in here. But we're only doing [225:20] one at a time. So that's all we have to [225:22] account for. Now in this information, we [225:24] have a lot of things that we can use. So [225:27] if you want to tap down and scroll up, [225:29] you can just subtract two coordinates. [225:32] Similarly, if you want to go from the [225:33] right and swipe left, you would just [225:35] subtract two coordinates. So, if I tap [225:37] over here, you can imagine the client X [225:40] is a range, right? It's just going to be [225:42] on the right. So, let me just click over [225:44] here, get some new touch events, come [225:47] over here, go into touches, and you can [225:49] see in over here, the client X is 1050 [225:52] or very close to this. So, it goes [225:54] remember the coordinate system is 0 [225:56] comma 0 over here. So if I start at 179 [226:01] and I drag over here, that means I end [226:03] at like about 500, which means it's [226:06] going to be a positive value. Whereas if [226:08] I start over here from zero and subtract [226:11] 500, it'll be a negative value, which [226:13] means I swipe right, which means I want [226:15] move my camera to the left. So if you [226:17] want to do it up and down, the logic is [226:19] the same. You'll just subtract different [226:21] coordinates. That is the whole idea of [226:22] what we're about to do. Let's create our [226:25] first touchdown variable as our initial [226:28] starting point. So what we can do is [226:30] this dot initial touch initial touch [226:33] equals e touches that touches array and [226:36] we want to grab the first one and then [226:38] we want the client x value from there [226:42] and then as we move we want to create a [226:44] delta value of how far we've moved to [226:46] update the target position. So we can [226:49] come over here and just do const delta x [226:52] equals this.initial touch minus the new [226:56] touches object that we get every every [226:58] time we touch move. We're getting that [227:00] new touches object with all that new [227:02] information. And we should probably call [227:04] this x just to be a little bit more uh [227:06] specific over here. And then we just [227:08] simply want to do the same thing over [227:10] here which is this.target position.z [227:12] right over here. And we don't need to [227:15] normalize this. We can just use delta x [227:16] this time times the speed. And now we [227:19] need to update the initial touch so we [227:22] aren't dragging extremely large delta [227:24] instances. So after we use it, we can [227:27] just set it equal to the one that we [227:30] already used right over here. Just like [227:33] this. That way the next time we touch [227:35] move, we're going to use the new touch [227:36] move and the previous one over. Now we [227:39] do need some guard clauses. You'll [227:40] notice that sometimes when I drag and [227:43] cancel it, it kind of jerks a little [227:45] bit. Now, why is that? Well, it's [227:46] because the touch move event is actually [227:48] firing the same exact time as the touch [227:51] start event. And the other reason we [227:53] need the guard clause is if we start on [227:55] an HTML element and drag to the right, [227:58] going to have an undefined object [228:00] because my touch start is the one over [228:02] here that setting the initial touch that [228:05] we're going to continuously update and [228:06] subtract. So if I start touch start on [228:09] an HTML element that's not the canvas, [228:11] well it's not going to have that to [228:12] register on touch move, which is fine [228:14] after the first time we touch move [228:16] because it will set it over here. But [228:18] you know, we just want to do the initial [228:20] one as well. So all we have to do then [228:23] is just check if thisinitial [228:26] x equals equals null, then we just have [228:28] that guard clause and return a little [228:30] bit early. You'll also notice that I [228:32] added a touch multiplier over here and I [228:36] set initial touch X equal to null up [228:38] here. This is optional, but this is [228:40] generally best practice when you're [228:42] creating a class variable just to put it [228:44] a some sort of default starting value. [228:47] And then if you want to use different [228:48] lur factors and different speed factors, [228:50] by all means, go for it. I just placed a [228:53] touch multiplier and multiplied it by [228:55] the speed. But if you want to do this [228:58] drag speed or whatever, definitely go [229:00] for it. It's really just personal [229:01] preference. You'll also notice I got rid [229:02] of touch and event listener. I don't [229:04] think we need that, so I got rid of it. [229:06] Now, what I want to do is when I move my [229:08] mouse, I want to give the camera a [229:09] little bit of offset and some sort of [229:12] parallax. That way, it doesn't feel like [229:14] I'm just looking at a static image and [229:16] there's some interactivity with my [229:18] camera. Now, how do we do that? Well, [229:20] the easiest way again just like we did [229:22] with the ray caster in the previous [229:24] video is to normalize the coordinates to [229:26] go from the center as 0 comma 0 and left [229:30] is negative 1, right is one, up is one [229:33] and bottom is negative 1 rather than [229:35] starting the coordinate system over [229:36] here. So you can remember from this [229:39] video we did that with a recaster [229:41] example. We normalized the coordinates [229:43] here. Now, we're probably going to be [229:45] using this normalization in a multitude [229:48] of different components. So, it would [229:50] make sense instead of just doing it one [229:54] time into the mouse move onto the [229:57] canvas, we just take it to its own [229:59] separate class or a math utilities [230:01] function. So, there are two options [230:04] here. We can create something over here [230:06] like math.js or mouse.js and export a [230:10] utility function that we can import and [230:12] reuse. Now, the reason you might not [230:13] want to do that is because the math will [230:15] calculate every time you run that [230:16] function across all the files that use [230:18] that utility function. So, what we could [230:20] do is just use one class for the mouse. [230:23] And that's exactly what I'm going to do. [230:25] It's technically a utility. So, I'm [230:27] going to put it in here, but it would [230:29] also make sense because it's to so [230:32] tightly coupled with like controls and [230:34] eventually our raycast cer. It might [230:36] just make sense to put it in the [230:38] experience instead of utilities. So, [230:40] it's really up to you, but I think I'm [230:41] going to put it in experience because [230:44] it's very related to controls. So, I'll [230:46] just do mouse.js. [230:48] Then, let's come over here and copy this [230:51] into mouse.js. And let's just get rid of [230:53] update uh sorry, the stuff inside and [230:56] just determine what we need for now. So, [230:59] let's come over here and let's create a [231:00] cursor object. And whoops, for some [231:02] reason, I accidentally imported this [231:04] somehow. I probably mistyped something. [231:06] And what we need is to create a cursor [231:08] of XY coordinates. And we'll just use a [231:11] three dot vector 2. Vector 2 and just [231:15] set it by default at 0 comma 0. Now if [231:18] you want to use an object like X0, Y0, [231:22] this is also perfectly valid as well. [231:24] You don't have to use a three vector 3. [231:26] You can make your own object. Great. So [231:29] now this time, do we want to put it on [231:30] the canvas element? So only when we are [231:33] moving our mouse over the canvas element [231:35] or do we want it also when we're on our [231:37] HTML DOM elements or whatnot? Honestly [231:41] here I don't think it really matters and [231:42] we can always change it later. I'm just [231:44] going to attach it to the entire window. [231:46] Add event listener and we'll do mouse [231:48] move. Now again this is where it comes [231:50] in. Should we use pointer move or should [231:52] we use mouse move? Well the web standard [231:55] is generally pointer move rather than [231:56] mouse move. But I only want it to work [231:58] on mouses and not mobile devices. So [232:01] should I use pointer move? Well, [232:02] actually you can use pointer move anyway [232:05] and only return if the event type is [232:07] through the mouse. Otherwise just guard [232:09] for that and don't execute it. That way [232:12] it will get rid of mobile devices. So we [232:14] can do point to move over here and we [232:16] can add our normalization here. I [232:19] already explained this in the previous [232:20] video, but if you need help, uh, you [232:22] know, feel free to drop a comment. But [232:24] just spend a little bit of time tracing [232:26] this and I'm sure you will be able to [232:28] and you'll be able to figure out how it [232:30] normalizes the center to be 0 comma 0 [232:33] and going to the right goes to negative [232:34] 1 and right. Hey, I'm from the future. I [232:37] forgot the minus sign over here. Now [232:39] again, you can just log the e over here [232:41] if you want to verify it, but we only [232:43] want to check it if the e.po pointer the [232:46] event.pointer pointer pointer type [232:50] equals equals equals mouse otherwise we [232:53] are just going to return and not execute [232:55] anything hey from the future I know I [232:57] said it rightly but I forgot to this is [233:00] does not equal equal mouse and return if [233:02] you do equal equal mouse then we don't [233:04] want to return we just uh want to do [233:07] everything in between right uh so sorry [233:11] I accidentally misspoke but I do fix [233:13] this later to do not equal equal equal [233:15] great so now we just create this again [233:18] in experience.js. So let's shift alt up [233:21] arrow here this time and create a mouse [233:23] over here because we're referring to [233:24] mouse and control so it makes sense we [233:26] do it first. Although for these two [233:28] specifically order is probably not going [233:29] to matter but for some of the other ones [233:32] over here order is going to matter but [233:33] not for this one. And we might as well [233:35] get rid of console.logz this. We already [233:38] know what that is doing. And now we can [233:39] go in controls and refer to this mouse [233:41] object over here. So, let's just come [233:44] over here and let's do this mouse. This [233:47] mouse equals this.experience.mouse. [233:50] And I called it cursor, but I don't know [233:52] if that's good. Maybe we can call it [233:54] instance just so it's a little bit [233:56] clearer and consistent with our other [233:58] stuff. So, mouse.instance, [234:01] but it's up to you and what makes sense [234:03] to you. You could also do mouse.pointer [234:05] and change this to pointer. That would [234:07] also make some intuitive sense. Or you [234:09] could change this entire thing. instead [234:10] of mouse call it a pointer but whatever. [234:13] Don't forget to rename this to mouse and [234:16] import it over here as well. [234:20] Great. So let's go back to controls.js [234:23] and let's add some logic here. So the [234:25] basic logic is you have some sort of [234:28] offset and then you create a new target [234:30] after adding your offsets and then you [234:32] lurp to that target. So you get your [234:34] position that changes every frame. You [234:36] add the offset and then you lurp to both [234:38] that position with the new offset. Now [234:40] the issue with this is it does work but [234:43] the issue here well I got the axis wrong [234:45] but it does work. The issue is that so [234:48] basically going to the offset is really [234:50] really slow because the lur factor is [234:52] really really small here. So you could [234:54] increase this to make it a little bit [234:55] snappier but then the position changing [234:58] is also snappier and faster and you [235:00] might not want that. So you could use [235:02] two different values for the lur [235:04] function. But the other issue is also [235:06] the camera rotation. So later, let's say [235:09] I move my cursor over to the left. I [235:10] also want my camera to move that way and [235:13] then also a little bit to the left. Kind [235:14] of like this. Now, because my camera is [235:16] rotated like let's say it's over here. [235:19] And I don't I don't actually remember [235:21] what angle I rotated at. But now that [235:24] it's rotated like this, if I decide to [235:26] let's say rotate it along the X-axis or [235:30] Z-axis or whatever axis you want to go [235:32] for, it'll use the global axis rather [235:34] than the local camera axis. This will [235:36] lead to a little bit of issues. Like [235:38] once I want to, let's say I want to [235:40] rotate it along the camera's X-axis, [235:43] it'll actually do it along the global [235:45] X-axis like this. I want XX. Like in [235:50] Blender, you get the local axis and [235:51] rotate it like this. So, what's the [235:53] easiest way to solve that issue? Well, [235:56] it's actually to put the camera in the [235:57] group and animate the group instead of [236:00] the camera itself. [236:02] So, that's pretty much just like using [236:04] an empty. So if I add an empty cube over [236:07] here, you can imagine this is like the [236:09] group and we just parent the group or [236:12] wrap the group. Sorry, wrap the camera [236:14] with the group and this is the one that [236:16] I move around and then the camera inside [236:20] is the one that I rotate. That way I can [236:23] just basically access its local axes [236:25] inside. So this is the one I move and [236:27] then this is the one that I give the [236:28] offsets to and everything like that. [236:30] Now, you don't have to do this because [236:32] there are built-in things in 3GS like [236:35] getting the world direction. So, even if [236:37] your camera is rotated, as long as you [236:39] get the world direction and a [236:41] perpendicular vector, you can use like [236:43] the cross productduct of an up and down [236:46] vector to get the side vector to [236:47] determine which direction your offset [236:50] actually is. So, that way you're also [236:52] quote unquote technically working in the [236:55] local axis. So if you ever want to do [236:57] gxx, well, as long as you have the world [237:00] direction and the up vector and you take [237:01] the cross productduct, you're going to [237:03] get a perpendicular one left and right. [237:04] So that is also another solution instead [237:06] of using a group. So I'm sure you've [237:08] seen the cross productduct between two [237:09] vectors gives a perpendicular vector to [237:12] both of them before, but we're not going [237:14] to be doing this method. Not that it's [237:16] hard, it's just like the easiest thing [237:18] is just to create a camel group, which [237:19] is basically a camera rig. Okay, so [237:21] let's go back here. And what I'm going [237:24] to do is create a camera rig here or [237:26] camera group. So right over here, let's [237:28] do this dot camera rig. You can also [237:30] call it camera group, whatever. It [237:32] doesn't really matter. And we'll create [237:33] a new three dot group over here. And [237:36] we're just going to add the camera to [237:37] the group and then add it to the scene. [237:38] So shift down all arrow over here. And [237:41] we just add this camera. The camera [237:43] instance. Remember this camera is [237:46] pointing to the instance of the [237:47] perspective camera itself. So if you log [237:49] it, it should show a perspective camera. [237:51] And then we just do this.perience. [237:52] experience scene add this camera rig [237:56] which includes the camera inside. Now, [237:58] if it makes more sense for you to add [238:00] the camera rig inside of camera itself [238:03] and then just refer to [238:04] this.experience.camer rig.instance, you [238:07] could totally do that as well, but it [238:09] doesn't really matter cuz this is kind [238:10] of like a one-off thing. So, we can just [238:12] do it here. But if it makes more sense [238:14] for you to do it in camera, you can [238:15] totally do that as well. So, now let's [238:17] update our code to move the group [238:20] instead. So, let's come over here and [238:22] instead of camera, we do camera rig. And [238:25] that's the one that we want to load to. [238:27] And let's set a target offset. So, let's [238:29] come over here and what do we need? [238:32] Let's see. Target offset. It doesn't [238:34] matter. We can figure it out as we need [238:36] it. I think we need this. Offset to lurp [238:39] to for the camera itself. So, this [238:40] should also be a new three vector 3. And [238:43] we need Whoops. And this should be [238:44] this.target position. Now, we don't have [238:47] lur target anymore. Now, if I go back [238:49] over here, you can see that my camera is [238:52] going farther back because my settings [238:54] that I did for my camera is now doubling [238:57] pretty much because I'm moving my camera [238:59] rig over to the target position, which [239:01] is this over here. And then my camera is [239:04] also moving to this relative to the [239:05] group. So, it's pretty much doubling. [239:07] Now, there are a lot of solutions to [239:10] this issue. I think what we can do [239:12] honestly is instead of cloning the [239:15] camera position, we set the camera rig [239:19] in here and just do it there. Uh we [239:22] could also do it in controls, but I feel [239:24] like now it would be cleaner to do the [239:26] camera rig. And then instead of instance [239:28] over here, uh we can get rid of this. [239:31] We'll just set it at 0000. I think [239:33] that's the default. So I don't know if [239:34] we need that, but whatever. Um and let [239:37] me just Yeah, let me just paste this. [239:39] And let me just copy this. And let's [239:41] just copy this inside over here. And [239:43] this one will be camera rig over here. [239:46] And let's just set it up here. Not that [239:48] I don't think that really matters. Um, [239:50] but yeah, let's set the positions first. [239:53] And then add the camera with a 00 over [239:56] here. Just like this. And then target [239:58] position is not going to be the camera [239:59] instance that is copied. It's going to [240:02] be the camera rig. So let's shift all [240:04] down arrow here. And let's do camera [240:06] rig. And this one will also be camera [240:09] rig. Uh I guess I could have just [240:11] control D to select the next instance. [240:12] And now we're copying the camera rig [240:14] position which is the original camera [240:17] position. The camera rig does not have [240:19] that instance variable. That's not what [240:20] we called it. Sorry. This should be [240:21] camera rig. And this is no longer this [240:24] camera. This is this instance over here. [240:26] And now if I go back and refresh the [240:28] page, you can see it's working. But now [240:29] we're moving our group. And our camera [240:31] is parented inside of our group. And we [240:33] can just add some offsets to our camera. [240:35] Great. So, let's start doing our to our [240:38] offset. So, we just do this.target [240:40] offset and we're going to set it equal [240:42] to this dot mouse.x times our offsets [240:46] strengths. Now, I didn't type that in [240:48] the video, but it's pretty much just [240:51] right over here if you didn't notice [240:53] that. Uh, but you know, be my guest and [240:55] do whatever you want. And I think this [240:58] should actually go in the Z-axis, right? [241:00] We're touching the Z here. So, the X is [241:02] going to be Z position. And then we want [241:04] the so the X position isn't going to be [241:06] moving. It depends on your scene and [241:08] what your axes are, but this is going to [241:10] be mine and this should be Y over here. [241:13] Now, we just need the camera itself. So, [241:15] this camera instance and we're going to [241:19] lurp to the this.target offset uh vector [241:23] that we just created. Oops. This target [241:25] offset just like this. Uh and sorry, [241:27] this is no longer instance. It's just [241:29] position because we already did this [241:31] camera equals this camera position. Then [241:33] we need to add a liver factor. So I want [241:35] it a little bit snappier. So I'm going [241:36] to do 0.2. If we go back, you can see [241:39] that it's working and it's a lot faster [241:41] this time. Not super smooth like the [241:44] navigation menu itself. And then I also [241:46] have this inverted. So let's do negative [241:48] over here. Now when I go right, it goes [241:50] right and up and up. Cool. If you ever [241:52] want to increase the distance, feel free [241:54] to, you know, change the strength. [241:56] Great. Now before going on for the [241:58] rotation, we should do the same exact [241:59] thing for the rotation over here. [242:01] Instead of rotating the Y over here, we [242:04] are just going to change this to the [242:06] camera rig over here. And we can just [242:09] Ctrl X and bring that down over here. [242:12] Just like this. Great. And it should be [242:14] the same. But now the X is wrong because [242:16] the group is rotating no longer the [242:18] camera. So let's actually go back here. [242:19] And now we can just bring this up back [242:22] over there. And I'm just holding alt and [242:24] up and down arrow to move the lines [242:26] really quickly. I think we can get rid [242:27] of this e this negative as well. Great. [242:29] And everything is working again. Okay, [242:32] now we just need to do the same thing [242:33] except with a rotation. So let's just [242:36] come over here and instead of target [242:38] offset, we do target rotation just like [242:40] this. We'll create a uler here. Set the [242:43] default rotation to 0 comma 0. And in [242:45] this case, we can just we should just be [242:47] able to offset the local X and Y [242:50] rotation. We can do the same thing over [242:52] here. And instead of target offset, we [242:54] do target rotation. And then shift alt [242:57] up arrow over here. And instead of a [242:59] position we do rotation. But the issue [243:01] here, oh sorry, let's put target [243:02] rotation here. Now the issue here though [243:04] is you can't rotate. You can't lurp the [243:08] rotation like this. If you want to do it [243:09] in one line, you have to use slurp and [243:11] quanternians which is a little bit more [243:13] advanced. Not that it's harder to [243:15] implement. It's just a lot more to [243:17] explain. So what we can do instead [243:19] actually is just do each individual [243:21] component by itself using three math [243:24] utils. So we can just do this.rotation. [243:26] rotation and let's just do the x1 first [243:31] dox and we'll set it equal to 3.mmath [243:34] utils.lurp [243:36] and we'll take the this camera current [243:39] rotation [243:41] x and we're going to lurp it to the [243:43] mouse offset x over here over here and [243:46] we'll have our lurp factor. If you want [243:48] to extrapolate this or abstract this [243:51] into a variable you can totally do that [243:53] but I don't need to do that. And we can [243:54] do the same thing for the Y. And let's [243:57] just Ctrl D to control D and do the Y [243:59] over here. And we can get rid of this. [244:01] So now we're just doing this [244:02] individually here. And sorry, I'm so [244:04] used to React that I just have current [244:06] here. Sorry, let's get rid of current. I [244:09] was thinking about using use ref in my [244:11] head for some reason. Now, if I go back, [244:13] it is inverted. If I go right and left, [244:15] it's going the other way. And up and [244:17] down is left and right, which is fine. [244:19] All we have to do is just swap it. So [244:21] this should be Y and this should be X. [244:24] And then for X uh and then for Y [244:27] rotation we need to make it negative. [244:29] Now when I write it's going to the right [244:30] and when I look left it's going to the [244:32] left and up and down. And it's a little [244:35] bit too strong. So I'm going to multiply [244:38] both of these by another factor of like [244:41] 50%. Now it's a little bit more subtle. [244:43] Sweet. So, I hope it makes sense even [244:46] though we're working in the local axis. [244:48] Why we need to do X? Cuz let's say I'm [244:50] moving my U mouse to the right of there, [244:54] which is the X coordinate. Well, I'm [244:56] rotating on the Y-axis, right? Well, in [244:58] Blender it's the Z-axis, but in 3GS it's [245:00] right. So, if I move my mouse to the [245:02] right, I'm rotating along the Y-axis in [245:04] 3GS. And if I go up and down along my [245:08] phrase, I'm doing on the local X-axis, [245:10] which is why I'm using the Y-coordinate [245:12] to drive the X rotation. Let's add a [245:15] little bit of clamping. That way, they [245:16] can't scroll off into infinity. And that [245:18] way, by having set values, we can [245:20] determine what progress value for [245:22] between 0 and one uh that we are along [245:25] our path. And then we can trigger stuff [245:27] relative to those progress values. So, [245:29] let's come back here and we'll just [245:31] console log our camera rig position. [245:35] console.log camera and we just want the [245:37] X value. Oh, sorry. It should be the ZV [245:39] valueue. That's what we want to log and [245:42] we want to clamp it. Well, actually, we [245:44] want to clamp the target position, I [245:46] add. So, we can just uh Well, actually, [245:48] it doesn't really matter whether we [245:49] console this or the target position, but [245:51] we will clamp the target position. Let's [245:52] just find a good ending point however [245:55] you want to. 85 is probably a good one [245:58] to keep note of. So, I'm just going to [245:59] copy that and I'm going to go to the end [246:02] and where I kind of want it to like [246:04] chill out. So, probably around here. [246:05] Cool. And let's just go down like that's [246:08] 17. So, I'm going to copy that. So, now [246:10] we have two values to create. So, we can [246:14] probably just do this.bounds [246:16] equals you could do a new three vector [246:18] too if you want to. I'm just going to [246:20] make a um well in this case it would be [246:23] min and uh so let's just if you're on [246:26] Windows you can do windows v to look at [246:28] the ones that you copied. So max in this [246:31] case uh technically goes left but it's [246:33] going positive which is kind of awkward [246:35] but whatever. And then min we can do the [246:38] minus value. If you want to flip those [246:40] you can totally do that. If it's really [246:41] bothering you you can just like rotate [246:43] your entire scene 180°. So, we have our [246:46] max and min bounds. And now we just [246:48] clamp the target position in between [246:50] these bounds. Let's go over here and [246:52] let's just shift alt down arrow over [246:54] here. We're going to clamp the result [246:57] 3utils.clamp. [246:59] And you can see it takes the value and [247:01] the min and max value. So, we can just [247:03] place this value is the one that I want [247:06] itself. And then I'll just do [247:08] this.bounds min and this.bounds. [247:11] And let's do the same thing over here. [247:14] Now, since we're doing the same thing [247:16] over here, we could take it into like a [247:18] helper function, but honestly, it [247:19] doesn't really matter. Now, you can see [247:20] when I scroll to the right, it's going [247:22] to stop because my target position is no [247:25] longer updating after I hit the [247:26] threshold. So, it's just going to [247:28] smoothly stop on the side. Let's get rid [247:30] of this console log. We don't need it [247:32] anymore. Great. So, let's create our [247:33] progress value. And we can instantiate [247:36] it up here. Um, so we can just put it [247:38] here. This progress. And we're going to [247:40] start it with uh this camera rig's [247:42] starting Z position, which if I remember [247:45] correctly is 1.2. So this is probably [247:47] around like 60% of the way uh between 12 [247:51] and 17. So this progress equals this [247:55] camera rig.position.z [247:57] minus the this.bounds.min. [248:00] Then we divide it by the range. So how [248:02] do we get the range or the total [248:03] distance between these two? Well, we [248:05] just subtract them, right? So we'll do [248:08] this.range range equals dobbounds domax [248:12] this do.bounds bounds.m min. So minus [248:15] minus is just plus basically that will [248:17] give us the total distance between these [248:19] two values and who what happened here? [248:22] My bad. Divided by this range and then [248:25] we can just copy and paste this in the [248:27] update function so it updates on every [248:29] single frame. And it doesn't really [248:31] matter where we place it. I'm just going [248:32] to put it at the top there. So let's [248:33] just console.log this.progress and see [248:35] where we start. And it's not working [248:37] because of course order of operations. [248:39] It's going to divide first. So don't [248:40] forget these parenthesis. Very important [248:43] parenthesis over here. So if I go back. [248:45] Okay, great. Now it's showing me the [248:47] percentage. So if I go here, it should [248:48] be one. Yeah, feels kind of awkward. [248:50] Left is one. Whatever. Doesn't really [248:52] matter. And then over here should be [248:53] zero. Nice. So let's go to the console [248:56] log. We want to animate it. We want to [248:58] give it a good naming convention. That [249:00] way it's just easier to navigate to. So [249:02] here you can see that all my trails are [249:04] numbered in order. That'll just make [249:06] coding a little bit easier. It's [249:07] optional. You can also organize the [249:09] names in code if you want to. And since [249:11] we're here, we can also give like IDs to [249:13] the ones that we want to target. Uh you [249:16] can always create headboxes if you want [249:18] to. So I don't remember if we did that [249:20] in the previous video, but instead of [249:23] using the actual object itself, you can [249:26] use a headbox and then just map it to [249:28] the object name that you want to, right? [249:30] Just create a map. Uh and you can use [249:32] the box for the raycaster intersection, [249:35] which I want to do later. And since [249:37] we're already here for naming, anything [249:39] that you want to have a raycaster target [249:42] on, we might as well attach a raycaster [249:44] as well. Um, and anything that you think [249:47] would be relevant. Like if you want a [249:49] certain type of animation, like up [249:51] animation, you can also add that like as [249:53] part of the name. That way you can just [249:55] search for it through all your objects [249:57] and everything that has an up animation [249:59] you give the same animation to. So it's [250:02] really up to you. But everything that I [250:04] want to have a raycaster, I think I'm [250:06] also just going to add right now. So [250:08] I'll do raycaster. And I'm just going to [250:11] copy and paste this on everything that I [250:13] want to be able to click on and interact [250:15] with. Great. And now all we have to do [250:19] is reexport everything. Great. Now we [250:20] can just go in Chad Cafe and find all [250:23] the trails. Let's create an object here [250:25] called this.trails. [250:27] And we'll just have an empty array. and [250:29] everything that includes trails, we're [250:30] going to add it to this array to give [250:32] GSAP to animate. And let's just make [250:34] sure I think GSAP is already here. Yeah, [250:36] it is. So, let's just come over in this [250:39] traverse function. If it's child mesh, [250:42] so if child is a mesh, if [250:44] child.name.includes, [250:47] and we just check for trail. If it does, [250:50] then we just push it to the array over [250:52] here. So, let's just copy this.trails [250:53] over here. Thistrails.push push the [250:56] child just like this. And we can get rid [250:59] of this because it's one line. We don't [251:01] need to use brackets. But if you want to [251:03] use brackets, we can add brackets there [251:05] cuz why not? It's just a little bit [251:06] cleaner. We can create some animations. [251:08] So let's come over here. Shift alt down [251:10] arrow. And let's do init animations. [251:12] Init animations. And we need the [251:16] progress value that we created in [251:17] controls.js, which is this right over [251:20] here. So we can do this.progress. This [251:22] progress equals [251:23] this.experience.progress. [251:25] progress.progress. [251:27] Oh no, sorry. It's going to be [251:28] controls.progress controls.progress. My [251:30] bad. So this is the class and then this [251:33] is the progress value that we're [251:34] getting. We're just shoving it into [251:36] this.progress. [251:38] And sorry this should be over here. It's [251:40] just a little bit cleaner that way. Just [251:42] like set. And then let's also actually [251:45] uh for every single trail we want to [251:47] scale the set the scale to start at 0 [251:51] comma 0 comma 0. So we can also do that [251:54] right over here. Child.scale set and we [251:57] set everything 000. And then we're going [251:59] to use gap to animate that a little bit. [252:01] Great. So let's just copy init cafe. And [252:04] let's just change that to init [252:05] animations. [252:07] Init animations. And we don't need this. [252:11] What we can do now is create a gap [252:13] timeline. So let's import GAP from GAP. [252:16] Import GAP. Just like that. And let's [252:18] create a timeline. just on timeline t1 [252:21] equals gab. timeline. And we want to [252:24] pause the timeline cuz we're going to [252:26] manually set the timeline progress [252:28] ourselves with our own progress value [252:31] that we calculate over here rather than [252:33] using the gap timeline one. And then for [252:35] each of the trails, so this trails do [252:37] for each of the trails, [252:40] let's grab its index to give it a little [252:42] bit of an offset on each single [252:45] progress. We're going to play an [252:47] animation for it using Gap tween. So, [252:50] I'm missing a set of harnesses here. My [252:53] bad. And sorry, I don't know why I wrote [252:55] this. There. It should just be trails. [252:57] Uh, sorry, trail for each trail inside [252:59] this.trails. I was just typing on [253:01] autopilot. And then we'll do this. T1.2. [253:05] And we'll do trail.scale, which again is [253:08] just an object of vector 3. So, that's [253:11] our tween target over here. And we can [253:13] just set uh its scale to to one comma [253:16] one comma one. So let's do that. And we [253:19] will do the x to one, the y to one, and [253:22] the z to one. And the duration can be [253:25] like 0.2 seconds, I guess. So I added [253:29] this console log just to show you that [253:31] there is an issue here. If I go back, [253:32] the name it's using is actually the mesh [253:35] data name, not the object name that we [253:37] gave it into the Blender outliner. Now, [253:39] why is that happening? Honestly, I don't [253:41] know. It might be a glTF exporting [253:43] settings cuz sometimes it will rename to [253:47] match this and other times it will not. [253:50] So I think what we need to do is run a [253:53] Python script over here. Just create a [253:55] new one. And I'm just going to copy this [253:56] and paste this AI generated script that [253:58] will just make the object name the [254:00] object name that we give it in the [254:02] outliner. Cool. Now everything has the [254:03] object name. Sweet. Now we again, yeah, [254:06] we have to reexport, but whatever. All [254:08] right. So now we should have all the [254:10] trails properly. Let's make sure we call [254:12] the update function in over into [254:15] world.js because we need to update the [254:18] cavary scene over here. So let's come [254:20] over to world.js [254:22] and uh have some guard clauses in [254:25] update. So let's copy these over here [254:28] with alt paste it. Shift get rid of [254:31] this. Let's do update. But we don't want [254:33] to uh update them cuz they might not [254:36] exist and they won't exist by the time [254:39] this is ready by the time experience [254:40] calls it. So we need a guard clause over [254:42] here. If this chat cafe or this cafe we [254:44] carefy doesn't exist, return it. And of [254:47] course we need to go to experience.js [254:49] and shift up arrow and call world.update [254:52] over here as well. Now one issue though [254:54] is we haven't created caviar cafe. So we [254:56] actually can't do this right now because [254:58] it will always be false and it'll always [254:59] return. So let's just get rid of that [255:00] temporarily. Well, actually, let's shift [255:02] all down arrow first and comment that [255:04] out because we'll need that later. And [255:06] let's just get rid of it temporarily [255:08] with this line here as well. So, back in [255:10] Chad Cafe, let's just console.log the [255:12] progress. And you'll notice that it [255:14] never changes after my first scroll. And [255:17] that makes sense because I made a [255:18] mistake. We only it's only referential [255:21] here. It doesn't update every single [255:22] time. So, let's see. I think the easiest [255:26] solution is just get rid of it entirely [255:28] and just directly refer to experience. [255:30] progress itself. [255:33] So that's what I'm going to do over [255:34] here. And I'm just going to do it like [255:36] that. Great. And now you can see that's [255:38] exactly what we wanted. And now we can [255:41] have the trail trigger the animation [255:43] across the different progress values. [255:46] Let's go into enit animations over up [255:49] here. And let's give it some offset rel [255:51] relative to the index. So it's I think [255:54] it was about 0.44. And then we're going [255:57] to subtract the index multiplied by some [256:00] value like 01. So this way it'll be like [256:03] 0.43 so on so forth for every single [256:06] trail. And it's still not working [256:08] because I did not actually update the [256:10] Gab progress itself which we need to do [256:12] right now. So I'm going to go back all [256:14] the way down to update. And the timeline [256:16] might not be created by the time that uh [256:20] the experience calls world update and [256:22] update. So we're going to do another [256:24] guard clause here. If the timeline does [256:25] not exist, do do anything. If it does, [256:28] we want to set the progress of this.t1 [256:31] equal to the this experience [256:34] controls.progress over here. And now you [256:37] can see when I scroll, it's animating, [256:40] but it's not going the right way, which [256:42] is fine cuz we can just fix that. But at [256:45] least it's doing something. Okay, so [256:46] let's come back. And now that I think [256:48] about it, I don't want a timeline [256:49] because timelines play sequentially. And [256:52] I only want to play the trail after I [256:56] pass a certain threshold back and forth, [256:58] which means we just need some sort of [257:01] ID. Sorry, not ID, or I guess you could [257:03] also take an ID approach, but some sort [257:05] of flag approach for each trail. And the [257:08] other issue with the trail is that each [257:10] trail should be synced up into each [257:12] other. So, I think what I should do back [257:14] in Blender, instead of keeping them [257:16] separate, I should just Ctrl J and just [257:18] name it trail one for both of them. That [257:21] way, we don't have two separate trails. [257:23] Oh well, I'm just going to deal with the [257:25] fact that we have more than one trail. [257:27] But if you want to go back and just [257:28] simplify and make your life a little bit [257:30] easier, be my guest. Anyway, the logic [257:32] is basically the same. So, let's come [257:34] over here and let's get rid of the [257:36] timeline entirely. We don't need that. [257:38] We're going to need the progress value [257:39] to set someone's eventually. And let's [257:42] go back over here. And I'm just going to [257:43] collapse a bunch of these. And instead [257:45] of having a timeline here, we're going [257:47] to create an array of trail groups to [257:51] loop through together. So we'll do trail [257:53] groups. And we need the trails [257:54] associated with each group cuz we have [257:57] like 1 2 3 4 5. And that's going to be [257:59] shoved into here. And then we need a [258:01] threshold value. So the threshold of [258:04] what value we pass before we activate [258:06] it. And I honestly have no idea. I'm [258:09] just going to start at like 0.45. And [258:12] then we need to have a flag that says if [258:14] it's shown or not. So has shown. And [258:18] we'll just set that to false just like [258:20] this. Great. And let's make sure this is [258:22] an array of objects. So let's add that. [258:25] And sorry, this should be comma. And now [258:26] we can just copy and paste this thing. [258:29] How many how many over times? Let's see. [258:31] One, two, three, four. And I'm just [258:34] going to increase uh sorry, decrease the [258:36] threshold because we're actually going [258:37] the opposite direction. So again, feels [258:39] a little bit odd, but whatever. You can [258:42] also dynamically create these uh if if [258:44] your threshold is like constant amount, [258:46] you don't have to manually create these. [258:48] So you could this trail groups and loop [258:50] through it and manually do everything, [258:51] but whatever. The trails, we want to [258:53] push it into a trail group. So this [258:55] trails for each trail. Now let's console [258:59] each trail name to determine how we can [259:01] split up the string. Okay, so these are [259:04] our names. So what we want to do is [259:05] split over here and then that will break [259:08] into [259:09] mustard underscore and this number [259:11] underscore into an array. And then we [259:14] can grab the first index of that array [259:16] which would be this one cuz remember [259:18] arrays are index base zero. So this [259:20] would be the first one. Sorry uh this [259:22] would be the first. Then we can use [259:24] parse int to get the index that we want. [259:26] Here you can see parse int will from 077 [259:30] will remove leading zeros. So it will [259:33] just remove the leading zeros and it'll [259:35] stop at the next underscore for parse [259:37] int. So that's all we have to do. So [259:39] let's come over here and let's do const. [259:42] Our index is going to be parse int [259:44] trail.name [259:45] and we're going to split it at trail at [259:48] the word of trail and we're going to get [259:49] that second index of that array after [259:52] splitting and we're going to parse that [259:53] int. And since we started at one rather [259:56] than base zero, we're going to have to [259:57] subtract by one because arrays start at [260:00] index zero. So let me just console.log [260:03] the index now. Oh, and sorry, I have a [260:05] typo here. This should be right after [260:07] here after we split. And now you can see [260:09] our index matches up. 1 0 1 0. Again, [260:13] ignore this underscore over here. 0 two [260:16] and this is one so on so forth. So [260:19] basically what we can do is get rid of [260:20] those of course. And if this trail [260:23] groups if the index exists basically [260:25] there's an object here if that exists at [260:28] the given index and at that given index [260:31] this trail groups at that index we want [260:34] to grab the trails. So if this exists [260:37] grab the trails and then just push that [260:40] specific trail into that group there. I [260:44] mean sorry that array there. And because [260:45] every index is already mapped, it's [260:47] going to push two of them into there [260:50] because they share the same index. Now [260:51] in our update function, we can come over [260:53] here and ain't nobody need that no more. [260:55] And now we just do for let I equals Z I [260:59] less than this trail groups length. We [261:01] want to go through every trail group. I [261:04] ++ you know the for loop. Let's create a [261:07] variable here group and just get the [261:10] index of the trail group and get the [261:12] trail group at that specific index. That [261:14] way it's just a little bit more clean. [261:16] Of course, that is also optional. And [261:18] let's create another variable called con [261:19] should show. And we would determine this [261:21] if the progress itself. So this [261:24] experience controls.progress [261:27] is uh let's see it should be less than [261:29] or equal to the group. [261:33] Basically as soon as the progress goes [261:35] below 0.45, we want to trigger it. [261:37] Although if you do greater than or [261:39] equal, actually no, equal would be the [261:41] thing that triggers it. So, uh, you [261:44] could just do equal. Um, but if you're [261:47] going from greater than over to less [261:50] than, it might make sense to, uh, flip [261:52] the sign, but honestly, it probably [261:54] doesn't really matter. [261:56] But we can figure it out once we get [261:57] there. So, if uh, let's see, should [262:00] show, and it has not already shown cuz [262:02] we don't want to animate it again if [262:04] it's already shown. So if group dot has [262:08] shown so if the group has not shown and [262:11] it should show then we want to show it. [262:13] So for each trail so for each trail in [262:16] the trails array of the group object [262:18] over here just set the scale and no [262:21] timeline just between set the scale to [262:24] one comma 1 comma one and then because [262:26] it's showing we can do group has shown [262:29] and we'll set that to true. And of [262:31] course, we just do the opposite over [262:32] here with an else- if that's over here. [262:35] Else, and just paste that over there. [262:37] And now we just grab everything over [262:40] here. Maybe make it a little bit faster [262:41] when it goes back to zero. And as shown, [262:44] goes back to false because it's no [262:46] longer showing. Now, I used a for loop [262:48] here because it's technically quote [262:50] unquote better for performance in an [262:52] update function every time we're running [262:54] this on 60 fps. But because we're only [262:56] dealing with five here, if you want to [262:58] just use trail groups, trail groups for [263:02] each, right? And then that way you it's [263:05] a little bit cleaner. You don't have to [263:06] do this. It's just like for each group [263:08] and just refer to that. Oh well, it [263:10] doesn't really matter. Um, but yeah, [263:12] that's just something I want to point [263:14] out as well. I go back and refresh the [263:16] page. As soon as I hit the threshold, [263:18] let's see. [263:19] Hopefully it starts showing. And it [263:22] does. what all of them show really [263:23] quickly because uh they're really really [263:25] close to each other. So I might turn [263:27] these on into really really large [263:29] differences uh just to just to see [263:33] what's up 20. And let's do it. [263:37] Great. Yeah. And now it's a lot more [263:39] spaced out just as I expected. And it's [263:42] not working when I go back. Oh yeah. [263:44] Yeah. Sorry. What am I doing? I didn't [263:45] even I didn't even flick this. I'm so [263:47] dumb. Sorry. My bad. Now we can do it. [263:50] Cool. And then we can go back as well. [263:53] Now, if you just wanted to go one [263:54] direction, well, you can just get rid of [263:56] the else if uh statement entirely. And I [263:58] just realized this should be uh sorry, [264:01] this should be outside of the for each [264:02] loop. Great. Now, what we're ready to do [264:04] is add a little bit of ray casting [264:06] interactions. That way, when we click on [264:07] this, it opens a new tab. When we click [264:09] on this, it pops up a little modal. And [264:12] uh yeah, that's pretty much it. So, we [264:14] kind of have like two types of ray [264:15] casting interactions. a little bit of a [264:16] review, so I'll go a little bit faster. [264:18] But it's a new system, so let's do that. [264:21] And you can imagine that we could just [264:23] put it in Chad Cafe per usual. But since [264:25] it's so much complexity, I think it's [264:27] better just to separate out in [264:29] experience and create another one here [264:31] called raycaster.js. [264:33] Let's just copy from mouse to create a [264:35] raycaster. And of course, let's not [264:37] forget to rename this. And we don't need [264:40] all that junk over there. So I think one [264:42] of the most important things about the [264:44] raycast cer is we need to actually get [264:46] those objects somehow. Let's create an [264:47] array of objects. Remember the raycast [264:49] cer takes an array of objects that we [264:51] need to intersect with. So let's create [264:53] that and I'll do this intersect objects [264:56] is going to be an empty array. And we [264:58] need to populate this later. So of [265:00] course we also definitely need this [265:01] mouse equals this.experience.mouse [265:04] right which is our pointer over here cuz [265:07] we need these normalized coordinates [265:08] here. And oh, okay, this might be an [265:11] issue now because we are only checking [265:14] for mouse and no longer touch events, [265:17] which is fine. I think we can just add [265:18] another touch event listener. It's not [265:20] really a big deal. Or we could pass in a [265:22] parameter that bypasses the the guard [265:24] clause like or or um I don't know. [265:27] There's multiple ways to solve it and it [265:29] it doesn't really matter which one. [265:30] Anyway, let's create a function here. [265:32] And what we need to do, it's like [265:34] populate intersect objects or something. [265:36] populate intersect objects and we need [265:40] to pass in a bunch of objects. So we'll [265:42] just call this objects and then for each [265:44] of those objects so objects do for each [265:47] of them uh we can push it we can push [265:49] that object into this intersect objects. [265:52] Now because every intersect object has a [265:55] different sort of let's see different [265:57] sort of starting point different sort of [265:59] data that we need instead of just [266:01] logging the mesh itself we should take [266:04] the we should take the original object [266:06] and some sort of other information over [266:09] here if that makes any sense because [266:10] we're going to need that extra [266:12] information rather than just the object [266:13] itself. So for each object let's just [266:16] push it to the array. So this intersect [266:19] objects and we're going to push an [266:22] object. So this will be an array of [266:25] objects. We're going to spread the [266:28] object itself to make a copy of it. And [266:31] I think I want to get the original scale [266:34] as well. So I'll call it original scale. [266:36] Original scale. I'm going to set that to [266:38] object.m mesh.scale. And we can clone [266:41] it. That way when we adjust it, it [266:44] doesn't affect the original one. And [266:46] then we also need a boolean value here [266:48] to because when I hover it, I want to [266:50] scale up and scale down. So I'll come [266:52] over here, probably do is scaled or [266:54] something like that. And we'll set it to [266:55] false by default. Not everything will [266:58] have is scaled. So I think uh is is [267:02] hoverable or or something like that [267:05] might make sense here. Uh maybe not is [267:07] hoverable, but like does does hoverable [267:10] affect or whatever. But for now, I think [267:13] it's fine if we just scale uh every [267:15] single one. Cool. Let's go back to Chad [267:18] Cafe. Uh so let's just control P go to [267:21] Chad Cafe and let's import the raycaster [267:23] over here. [267:25] Actually h I think we can just do it [267:28] directly. So let's do init raycaster [267:30] over here. Init ray caster. Let's create [267:35] this. Uh we can just do it in order, but [267:38] I don't really care. I'll just do it [267:40] right over here. Doesn't really matter. [267:43] Actually, now that I think about it, I [267:45] don't know if we need to [267:48] for cuz we're going to need to traverse [267:51] and add it to an object, which means we [267:53] would create a intersect objects here. [267:55] Traverse, push it in there. We might as [267:57] well just do it part of in cafe then. [268:00] So, we can just check if the child name [268:02] includes raycaster. [268:04] If it does, uh, I guess we can just [268:07] create con intersect. It'll just be an [268:10] object and we just make some key value [268:12] pairs. So we'll create some ids with the [268:15] child name itself. So intersect objects [268:19] and we'll create it create the ID from [268:21] the child name itself and we're just [268:23] going to set it equal to the mesh object [268:24] itself. And then I think we can go into [268:28] let's see raycaster and populate [268:30] intersect objects and pass in the key [268:33] value pair of objects. So we can come [268:35] over here and we'll do this.experience [268:36] experience [268:38] raycaster.pop populate and let's just [268:41] pass in a bunch of objects. So let's [268:44] just make sure we have those. Uh see now [268:47] the issue here is if we get the mesh [268:49] object itself and then set the type of [268:52] object and then set what we need to do. [268:55] Might be better to go into Blender and [268:57] underneath one of these include like if [268:59] you wanted to just a scale up just do [269:01] scale. If you wanted to link somewhere [269:04] else, you can probably do like Twitter [269:06] link and then that way uh you can just [269:09] check determined by type based on the [269:12] string name. That might be a little bit [269:14] cleaner and automatic in the long run [269:16] and then you create like a map to each [269:18] URL and each ID. But I think we can just [269:22] manually do it because we only have a [269:24] few so it's not a big issue. But if you [269:26] want to make it scalable, I would [269:28] consider renaming here and reexporting [269:30] to make it a little bit more automatic. [269:31] Anyway, I think what we can do now is [269:34] let's just make sure to console.log [269:36] intersect objects just to make sure we [269:38] have all of them. Let's also make sure [269:40] to initialize our raycaster. So, I'm [269:43] just going to put it over here. [269:45] Raycaster. And forget to import [269:47] raycaster. [269:49] Go back to check FA and let's get rid of [269:52] this because we got rid of that as well. [269:54] Now, if I go back, you can see that it's [269:56] here. But we have an issue. Where are [269:58] these underscores coming from? And why [270:00] in glTF report when I look at it, [270:02] there's not a bunch of objects here. [270:05] It's the actual names that we give it. [270:06] Why is this doing this? Well, it's [270:08] because 3JS per material has to engage [270:11] in a draw call. That's like some GPU [270:14] thing that you don't really have to [270:15] worry about as a beginner. And it will [270:17] split up. So, because Beast mode alpha [270:20] Chad has seven different materials, it's [270:22] going to underscore seven times. Same [270:24] with these other ones. My YouTube [270:26] contact has the outline material, the [270:27] gray material, and then the sign [270:29] material itself. So, it's split into [270:31] three for each of those. So, what is our [270:33] solution here? Well, our solution is [270:36] just to either bake everything into a [270:38] single texture and that will just save [270:40] on draw calls or we just use the group [270:42] instead of the individual mesh. So, [270:45] instead of this over here, let's take it [270:47] outside of if child mesh. Come over here [270:50] and if child.name.includes raycaster and [270:53] and child.type type equals equals equals [270:56] group. Let's put this in a parenthesy [270:58] over here or or child.ype equals equals [271:01] equals object 3D. And now we can [271:03] console.log over here the child. Now [271:05] when I go back you can see that we just [271:07] have a few groups for each one. So beast [271:09] mode alpha we got the group there. So [271:11] this check is just if in case it's not a [271:13] group and you have a single material. [271:15] This is what this is for. But for all of [271:17] mine they're groups. Let's just save us [271:19] some copying and pasting time. And let's [271:21] just do object wrap this so we only show [271:23] the keys. Sorry, this should be object. [271:25] And now we can just copy this. And now [271:27] let's just come here and make a bunch of [271:29] objects. So what do we want? Well, we [271:31] want the mesh itself. We want the type [271:33] of the object. Again, you can automate [271:35] this with the naming convention. And [271:38] then uh I guess if it's a link, we can [271:40] make like a link one. And we'll have [271:43] like a URL associated with it. And we [271:45] can have like scale like if we want to [271:47] hover and scale and then we can do like [271:49] scale factor. And then the last one is [271:52] modal. So I'll do modal. We could [271:54] probably put like a ID value here or or [271:57] selector selector ID. I don't know like [272:01] hashtag something like hashtag lol. I [272:05] might change this a little bit later. [272:07] I'm not exactly sure at the time of [272:08] recording this. So let's just paste our [272:11] stuff over here and move it [272:13] appropriately. So, I'm going to hold Alt [272:15] just to quickly get rid of these and [272:17] backspace them out. Just like that. And [272:20] alt for the last one. [272:23] And now that I have six cursors, I'm [272:25] just going to come over here. Ctrl Alt [272:26] down arrow to quickly add cursors and [272:29] just paste it in there. Now, we can just [272:31] temporarily put w.com over here. So, [272:33] beast mode alpha chad is not type link, [272:36] it's a scale. And then we can do scale [272:38] factor and just make adjustments until [272:40] whatever. Oh, and yeah. So here you can [272:43] see that everything I'm doing and I did [272:45] forget these are just keys. They aren't [272:48] strings that we want. Well actually now [272:51] that I think about it we could pass the [272:52] intersect objects itself rather than the [272:54] mesh. Well ah whatever it's already [272:57] here. Let's just control D to select the [272:59] next instance of mesh over here. And [273:01] let's just type intersect objects wrap [273:03] all these strings with a bracket over [273:06] here. And let's move the comma outside [273:08] over there. Just like that. And now [273:11] we're just passing the mesh in directly. [273:12] And yeah, I guess it's kind of messy. We [273:14] could probably put all this entire thing [273:16] into an init recaster function, but we [273:18] already got rid of it, so I'm not going [273:20] to add it back in. But if you want to [273:22] split it up, yeah, you can totally do [273:23] that. Great. So now we should have [273:25] access to all the objects. Let's go back [273:27] to our raycaster.js over here, and let's [273:30] just store all the objects. So we push [273:32] to intersect objects over here. We call [273:35] it, right? And then it shows it in here. [273:36] And we actually only want to grab the [273:38] meshes itself from the objects that we [273:41] passed in. So let's just do let's create [273:43] another one called this meshes over here [273:45] equals this.sect objects. [273:48] Uh so the way this works is for every [273:51] intersect object inside of intersect [273:53] object. We get grab the objects mesh [273:56] property. So if I go in here, it's just [273:58] grabbing the mesh one. Well, this one's [274:01] trail. Sorry. Uh yeah, it's just [274:02] grabbing this. and map just returns an [274:05] array of the thing that you're selecting [274:07] which is right here. So this meshes is [274:10] just going to be an array of our object [274:12] meshes here. Let's go in our update [274:13] function because when we hover on [274:16] objects we want them to pop up and go [274:18] down. So let's do that and let's just [274:20] make sure our h let's see our experience [274:23] is calling up raycaster.update. So let's [274:25] go up here and let's make sure this is [274:27] raycaster. Great. And we might have to [274:30] add a guard clause here later but we'll [274:32] figure it out once we get there. So, [274:33] let's do this.caster. This raycaster. [274:37] Uh, actually, we we didn't create a [274:38] raycaster yet. So, let's come over here [274:40] and let's create a raycaster. And then [274:42] we can do like a this.hovered object. [274:45] Hovered object. And we'll just set that [274:46] to null for now. We just need to do the [274:48] same thing. Set from camera. This, which [274:51] is basically our normalized coordinate [274:52] system. And then we need to use the [274:54] camera. So, this experience. Well, [274:56] actually, let's just do this.instance. [274:59] And let's grab it from up here as well. [275:04] And let's just do this camera equals [275:06] this experience. [275:09] Well, uh, sorry. Now we just need this [275:12] camera. It doesn't have to be this [275:13] camera instance. And I guess just for [275:15] semantic clarity, this is probably [275:17] better just to instantiate it here too, [275:20] but doesn't really matter. Cool. And [275:23] this is our review. So we need to grab [275:25] our intersects array from the raycaster [275:28] to determine if we have anything that is [275:30] intersecting. So const intersects and if [275:33] there's anything in intersect. So if [275:35] intersect.length, [275:37] we just want to grab the first one cuz [275:39] we have nothing behind. We're not doing [275:41] any sort of layered just console.log [275:44] intersects just to make sure that we are [275:46] getting something. All right. Now that I [275:47] go back, let me just hover over and I [275:50] think it's showing that because I'm like [275:52] hovering over Yeah, I'm hovering over a [275:54] bunch of the meshes inside the group at [275:56] a single time. But it doesn't matter [275:57] because we just select the first one. [275:59] Great. So let's just grab the first one [276:01] and intersected. So intersected object [276:04] equals the first one over here. Now we [276:06] need to do some recursion to get the [276:09] parent object because our stuff is very [276:11] very deeply nested. If you remember from [276:13] bellispark, we went one layer up of the [276:16] intersect object to get the entire [276:18] parent. That's not going to work for us [276:19] cuz we have multiple layers. So we have [276:21] to do a little bit of recursion and get [276:23] the actual object that we want to get. [276:25] So we can create a function for that. [276:27] And I guess we'll just put it over here [276:29] and do get and we pass in our [276:32] intersected objects. Intersected object [276:34] get parent object of our intersected [276:36] object. Then just a little bit of basic [276:38] recursion here. So I'll do let object [276:40] equals [276:42] intersected object while the object is [276:44] not found. Cons parent equal this.sect [276:47] object. We need our base case. So if [276:50] parent return our parent and then we set [276:53] the object equals to the object parent. [276:56] So object.p parent. So basically the [276:58] recursion here is we get the object does [277:02] it match anything in intersect objects? [277:04] If not go to the next one and so on so [277:06] forth and then every time it goes to the [277:08] next one it goes one layer up until [277:09] eventually we hit the parent value that [277:11] matches with an intersect object. Well [277:13] then it exists and then we return the [277:16] parent object. Cool. So, we can [277:18] basically use nearly identical uh newly [277:21] identical logic that we did in here. And [277:24] this pattern is so common actually. Uh [277:27] you're probably going to see it a lot. [277:29] So, I'm just going to copy and paste [277:30] this in in multitude of different [277:32] contexts, not just 3GS. [277:35] Um so, we just want to use gap to play [277:38] our animation. And let's use a function [277:40] to get our parent object to animate or [277:43] in this case our group. And I'll just [277:46] call this con parent object. And we're [277:49] doing the same thing here. If parent [277:50] object this time instead of uh a flag [277:53] variable, we're just checking if our [277:55] hovered object is not the intersected [277:57] object, then we play it. Otherwise, we [277:58] don't. So we created this hovered object [278:00] state over here. So we just check that. [278:02] So if our parent object does not equal [278:05] equal does not equal equal hovered [278:08] object, then let's set this.hover object [278:10] equal to the parent object equal to the [278:13] parent object. That way it's not going [278:14] to run again. It's going to go to our [278:16] else statement. And we just can run [278:19] gab.2 over here. We'll take our parent [278:21] objects [278:23] scale and we can like multiply it by a [278:25] factor. So by default I think it starts [278:27] at one but we have this original scale [278:30] over here. So we can refer to that. It [278:32] could be parent object. Whoops. It could [278:35] be parent object [278:37] dot original scale. And then we can just [278:39] multiply by a factor here like 1.2. And [278:42] then this time we can just use else. And [278:44] then let's check if this.hover object [278:47] exists because it might not exist [278:49] exists. Then let's just get rid of this [278:51] junk over here. Then actually let's just [278:54] use this. And we just get rid of all [278:57] this. We don't need this. And then we [278:59] set this hover object back to null over [279:02] here after we leave it. And let's get [279:06] rid of this. Well, I think that's it. We [279:08] might have some errors, but we can find [279:10] it when we get it. Don't forget to [279:11] import gap. Let's see. Uh, of course, [279:13] we're getting a bunch of errors. I'm [279:14] sure I mistyped something pretty [279:16] obvious. Yeah, parent object is like the [279:18] actual object itself with all that extra [279:20] data. So, we need to grab the mesh [279:22] itself. Sorry, my bad. And then this [279:24] isn't parent object here. This is this [279:27] hoverboard object. Sorry, my bad. Just [279:30] like this. This should also be mesh over [279:32] here. Should be x, y, and z. Sorry, I'm [279:36] rushing too much. It's a vector 3, so we [279:39] need to grab those. do that [279:42] like that. See, hopefully this works. [279:46] Uh, that's I mean, it's doing something. [279:50] Oh, this works fine. Oh, I need to fix [279:52] this origin point. It's kind of awkward [279:53] putting it on the on the right there. [279:56] Uh, um, that it's not resetting [280:00] properly, which means let's see where is [280:02] this else statement. Uh, oh, sorry. It [280:04] should be if I'm not intersecting [280:06] anything, put it back to normal. Sorry. [280:08] So, else statement should be relative to [280:11] the intersect length one. My bad. Cool. [280:14] And now it works. Voila. Oh my gosh, [280:17] that is so epic. All right. So, just for [280:19] user experience, let's come over here [280:21] and change our cursor every time we [280:24] hover as well. So, we'll just do [280:25] document.style.cursor. [280:28] Otherwise, just set it to default over [280:31] here. Default. And that should work. I'm [280:34] not even going to bother testing it. [280:35] Now, if you want, since some of them are [280:37] not clickable, you can probably do like [280:39] a clickable here and check for this [280:41] flag. If it's not clickable, then don't [280:43] show the hover state. Otherwise, show [280:45] the hover state. But, uh, I don't really [280:47] care that it's not clickable. I'm just [280:48] going to change the pointer anyway. But [280:50] that's a user experience decision. [280:52] That's up to you. Okay. So, I think the [280:54] next thing we can do is create our click [280:57] function. So, I guess we might as well [281:00] just do it in init. And let's just come [281:03] over here and let's just do uh [281:06] this.experience. Actually, let's just do [281:08] it what we did before. So, let's just do [281:10] this. [281:12] This canvas equals this experience [281:14] canvas element. And this will just be [281:16] this canvas. [281:18] And let's do add event listener. [281:23] We need the same thing from here. We [281:25] need our intersect objects over here. [281:27] So, let's just come over here. Grab our [281:30] intersect objects during clicking. And [281:32] if there is no intersects.length, then [281:35] we just return. Now, this time I'm using [281:37] a guard clause because over here I'm not [281:40] using a guard clause because maybe we [281:41] want more stuff underneath here. So, I'm [281:43] just using an if statement. Here I'm [281:45] using a guard clause because I don't [281:46] want to execute anything in my click [281:48] function if there's nothing in there. [281:49] You can also copy this logic over here [281:53] just like this. And then if no parent [281:55] object, if no parent object, then just [281:58] return. And then we can just switch [282:00] switch the parent object.ype. [282:02] Then for our cases we have scale. I [282:05] forgot the types that we uh actually [282:07] did. So, and actually now that I think [282:09] about it, I don't want to do scale at [282:11] all. Yeah, I don't want to do scale. So, [282:13] I'm going to get rid of scale cuz the [282:15] hover does the scale. If you want to [282:17] click on it to scale it, you can have [282:19] the scale here and run another Gab [282:21] timeline. But I I don't need to do that. [282:23] I don't want to do that. So, that means [282:25] we only need modal and URL. So, I'm [282:27] going to do modal. Actually, let's do [282:29] URL first because it's just easier. [282:31] Let's just do window.open parent object. [282:34] And then we need those security measures [282:36] that are very standard for the web. [282:41] If we go back and try, it should already [282:43] work. I don't think there's any issue. [282:44] Yeah, it already works. So, let's just [282:46] shift alt down arrow and let's do case [282:49] scale. Now, I think I'm going to change [282:50] that to animation later, but for now, [282:52] I'm just going to do return. We're not [282:54] going to do anything uh with this case. [282:57] And then now for modals. Okay, this is [282:59] going to be interesting. So if it's a [283:01] model, what are we going to do? Well, we [283:03] have the selector. Well, I guess [283:05] selector ID. Selector ID kind of makes [283:08] sense, but it's probably more standard [283:10] to call like element ID. Now, if we do [283:12] it the Bellis Park way, right? We did it [283:15] where we just created one single model [283:17] and we swap the content for that that [283:19] single model. And honestly, you could [283:20] create the model itself in JS, you know, [283:23] using a string literal and creating like [283:25] the div in in in JavaScript if you [283:28] wanted to. I think for us, you can [283:30] totally take this approach. There's [283:31] nothing wrong with that, but I'm just [283:33] going to do it a very easy way. And I'm [283:35] literally just going to create all four [283:37] modals and just make them exist uh in [283:40] inside the HTML element itself. So, so [283:42] we want a modal and then inside that [283:44] modal, I'm just going to make it really [283:45] simple. It'll just be like a model [283:47] wrapper. And inside the model wrapper, [283:49] let's do the model title and the model [283:54] paragraph. And I'll just do that. So, [283:58] this should probably be an H1. [284:01] And then this should just be a P tag. [284:02] Sorry, my bad. Great. And then once you [284:04] get a design here that you like, you can [284:06] just shift alt down arrow four times. [284:08] Uh, and then for each of them, we can [284:10] give them their unique ID. So, for this [284:13] one, I can this one I'll call project [284:15] one Chad. [284:17] And let's just shift all down arrow and [284:19] project two chad. [284:22] And we can add two more for the caviar [284:24] one later. Uh but yeah, that's pretty [284:26] much it. And I'm just going to go into [284:28] just the default style over here and add [284:30] some styles. Cool. So just very basic [284:33] styles over here. And I actually forgot, [284:36] but I also want to give a back button to [284:40] each of these. So I'm going to do [284:42] button. And I'll do back button like [284:44] this. And I'm just going to do close. [284:47] Oh, sorry. I should probably call it [284:48] close button. Close button. So, I [284:51] updated to block element modifier naming [284:54] convention BM. Very common. Uh, that's [284:57] also optional. And you can see very, [284:59] very basic, very basic CSS here. I just [285:02] centered it. Give it a set height and [285:04] everything. So, you can see here it's [285:06] just this and a close button that we can [285:08] click on. Before we animate it, we kind [285:10] of wanted to determine, do we want it to [285:11] be offscreen or do we want to just leave [285:14] it on on screen? is just leave it on [285:16] screen and I'm just going to do opacity [285:17] zero. Just leaving opacity zero still [285:20] means you can interact with it. So we'll [285:21] do pointer events and we'll just set [285:23] them to none. That way we can't interact [285:26] with the model. But we want to be able [285:27] to interact with it once it is faded in. [285:31] So we could add another class list or we [285:33] could use gap to directly target that [285:35] and set pointer events to auto. Or if [285:38] you want to toggle on a class, maybe we [285:40] could do like um and here you could do [285:43] pointer events. Pointer events auto. [285:46] That way we can like scroll and do all [285:48] that other stuff with the model again. [285:50] And you can attach that class as the [285:52] G-Stop animation fades in or you can [285:54] just target directly with Gab. It's kind [285:56] of up to you. Anyway, we we can probably [285:58] get started uh now with that. Now, I do [286:01] want to mention when it comes to [286:02] managing a bunch of HTML elements, you [286:05] typically want to have like a utils over [286:07] here and like HTML elements or DOM [286:10] elements, DOM elements. And then [286:13] basically the whole idea is you just [286:15] have a bunch of selectors and you just [286:18] go in and select everything, right? Like [286:20] document query, select all or whatever. [286:23] And then you create an object of DOM [286:25] elements and then the ids or the class [286:27] names become the same thing. So you have [286:29] like model wrapper and then it'll like [286:31] auto index if you have like more than [286:32] one class right and then for ids well [286:34] the id itself would be the key value [286:37] pair. So this would be the id and then [286:40] the id would be the actual dumb element [286:42] over here which is like a div or [286:44] whatever and then this way you just use [286:47] these elements throughout your code and [286:49] you don't have to have manage a bunch of [286:51] selectors everywhere because all the [286:53] selectors live in here and then you [286:54] generate an object that you refer to. [286:56] So, are we going to do that? And the [286:57] answer is no, because we only have like [286:59] four things to manage and probably a [287:01] pre-loader, which we'll also just do [287:03] directly in the pre-loader. But if you [287:05] ever want to manage a bunch of other [287:06] stuff, I do kind of recommend doing that [287:08] where you have like a DOM element object [287:10] that you can refer to. So, for us [287:13] though, we're just going to do it [287:14] directly in the raycast caster. We can [287:16] check simply and select over here. We [287:19] can simply check if it has an element [287:21] ID. So, we can create a new field here [287:24] called element. And if element ID [287:27] exists. So let me go into chat cafe. So [287:31] if element ID exists [287:34] then we want to just document document [287:38] dot getelement by ID and just get the [287:41] element ID in there. Let me control B [287:44] just to get that. And should be the [287:47] object sorry object.element ID and [287:50] whoops this should be come after. So if [287:52] element ID exists, set it to the [287:55] element, the actual DOM element. [287:57] Otherwise, just set it to null. Great. [288:00] And now we have access to the ID [288:02] associated with each object if there's [288:03] one here. So we do have it. Let's go [288:06] into index.html over here. And let's get [288:09] our IDs. So project one Chad. Then cozy [288:12] project one is going to be project one [288:14] Chad. And then project two Chad is going [288:17] to be this one over here, element ID. [288:20] Let's go to our model over here. [288:22] Actually, before we do that, yeah, we [288:24] should probably break here cuz we don't [288:25] want to check anything after if we [288:27] already do URL. Same with return. Return [288:30] will actually cancel our entire function [288:32] and the rest of it, which I guess is [288:33] fine cuz we're not really doing [288:35] anything. But we might as well just stay [288:36] consistent. Same with model over here. [288:38] And we can check if the model is open or [288:41] closed, not based on the class that we [288:42] add actually. So that was good that we [288:45] actually added a class over here. So on [288:47] open. So I I'll just call this model [288:49] open actually model open. So let's check [288:51] for that in our array cer const is open [288:57] equals parent object do element doclass [289:01] list contains does it does it contain [289:05] model open if it is it means it's open [289:07] otherwise it's closed. So if it's open [289:09] if is open so if it's open we want to [289:11] fade it otherwise we want to bring it up [289:14] and then once this function is complete [289:16] we can do onmplete callback function [289:18] over here and we can just remove we can [289:20] just instead of remove contains we just [289:22] remove it and then otherwise we want to [289:25] fade it in. So we'll just copy gap.2 and [289:28] we'll do add over here. Actually this [289:30] should be on start not on because as [289:32] soon as we click it it will be on start. [289:34] Uh we can also directly just leave it [289:37] outside. We don't have to use the Gab on [289:39] start, but whatever. I'm just going to [289:40] put in Gab on start. Let's see. We have [289:42] an issue here. Element ID is not [289:45] defined. That's because this should be [289:47] object. Sorry. This should be object [289:49] element ID here. Cool. Let's go back. [289:50] Refresh the page. Should be working [289:52] nice. Oh, and now we just need to [289:54] disable raycaster and everything once [289:57] the model is open. And then we also need [289:59] to activate the close button. So, let's [290:00] do the close and then let's disable [290:02] everything if the model is open. So I [290:04] created this simple function over here [290:05] that will take in our object this entire [290:08] object over here. We'll grab the element [290:11] inside of this spread operator over here [290:13] and we'll get the close model of that [290:15] element. If the close button does not [290:17] exist because some HTML elements that we [290:19] pass in won't have close buttons just [290:21] return and don't do anything. Otherwise [290:23] if close button does exist attach click [290:25] event listener. Grab the event object [290:27] and stop propagation. We don't want to [290:29] have it bubble up to anything like the [290:31] canvas itself. Although I don't know if [290:32] this will actually be necessary for this [290:34] project, but better just for good [290:36] practice, we'll leave that in there. And [290:37] then we just take the object element, so [290:39] the model itself, and we set its opacity [290:41] to zero. Same thing here. On complete, [290:43] remove model open cuz it's now closed. [290:45] Very, very similar to what we did over [290:47] here. And now what we can do is just [290:49] directly initiate it over here. And [290:51] instead of just doing this in one line, [290:52] we can take this out into a new one. And [290:55] let's do const [290:58] equals this old object and push the new [291:01] object. And then for every new object if [291:04] new object then let's just call [291:05] this.init modal close button and pass in [291:08] the object itself. Sorry, it should be [291:10] the new object. Great. Now when I go [291:12] back, you can see it works just like [291:14] that. Okay. Now what we need to do is [291:16] disable the raycaster and everything [291:18] else while the model is open. So let's [291:20] quickly do that. That's really really [291:22] simple. So let's just do this is model [291:26] open and we'll set it to false initially [291:30] and everywhere that let's see close [291:32] button on complete let's create a [291:35] function over here we could also this [291:38] actually doesn't need to be on complete [291:39] you can put it afterwards anyway this is [291:42] model open is going to be false over [291:44] here is going to be true and then this [291:47] one will be yeah this one can be false [291:50] cool and actually we can just check [291:52] instead Instead of doing this now, we [291:54] can just check uh this is modal open or [291:57] not. We don't need this check anymore. [291:59] Now, we're still using this for the [292:02] pointer vents auto to write to add the [292:04] pointer vents auto again. Although, at [292:07] this point, I maybe it would just be [292:10] better just to not have adding and [292:13] removing lists. I think later I might [292:15] want to use that class for something [292:16] else. So, it's it's fine just to leave [292:18] it. And then this is also fine just to [292:20] do that. But if you just want to do this [292:22] and we don't really need this here [292:24] anymore, that's fine. But we can keep [292:27] this at least. And now we just want to [292:29] guard from everything. So click over [292:31] here. We just do if this this moto open [292:35] then just return early. And then same [292:38] thing with the update function. I don't [292:39] know. Do we have to guard for anything [292:41] here? [292:43] I don't think so. We can just actually [292:46] do it here too. If you have something [292:47] else, make sure to wrap it. If you also [292:50] when you want to click on it and the [292:51] motor is open, if you want to reset [292:53] this, then put this inside of this here [292:57] too. That way it goes back to zero. But [292:59] I don't think I want to do that. Um, and [293:02] now that I think about it, this doesn't [293:04] make any sense because it's not going to [293:08] we're never going to close the model [293:09] this way. The close button is going to [293:11] close the model. So this is actually [293:14] completely unnecessary. We can just do [293:15] this. See, now when I go back, let's [293:18] see. See, I click. Cool. Oh, the cursor [293:20] is not resetting. So, this is an issue. [293:22] I need to fix that. Go back. And I do [293:24] want to fix this. So, actually, I'm just [293:27] going to I'm just going to copy this [293:29] whole thing over here. Let's just open [293:31] it up and let's put it here and return. [293:35] This will make everything scale to zero. [293:37] And then re revert back to default as [293:39] well. And yeah, now it's working. [293:43] Now, one thing I don't like is I don't [293:45] want to be able to scroll while the [293:46] model is there. Now, if you want to, [293:49] that's fine. You can just leave it as [293:50] is, but I don't want to, right? So, [293:52] let's go to controls.js and we simply [293:55] just have to check for it. So, [293:57] everywhere in our wheel in our touch [293:59] start and our touch move, let's just add [294:01] the same guard clause. If this [294:03] experience ratecaster is modal open, [294:05] it's true, then just return. Cool. And [294:08] now when I do it, sweet. Now it feels a [294:11] little bit odd that the rotation is [294:12] really large when there. So you could [294:15] check if the modal is openly you know [294:18] with a turnary oper operator here. If uh [294:21] the is modal open is model open check [294:23] right if if it's open then multiply it [294:26] by another value otherwise don't um that [294:29] way it's just a little bit smoother but [294:30] whatever I'll just leave it on. Okay so [294:32] the last thing we have to do is make all [294:34] this stuff work with touch event. So, [294:37] let's go back to mouse and h now that I [294:40] think about it, I don't think this is a [294:41] good idea to restrict. Let's just do the [294:44] split as usual. Mouse move and touch [294:46] move. And uh yeah, let's just do touch [294:49] move. Touch move and touch end. Touch [294:53] end. And then we need to grab the touch. [294:56] So, we'll do const touch equal e [294:59] touches. Just grab the first one. We [295:01] don't care if they are having two [295:03] fingers on there or not. Let's change [295:05] this to touch over here. Now, this is [295:07] repetitive. You could put it into [295:09] another function and just call that [295:10] function in all three of them, but we [295:12] only have these three, so it's not [295:13] really a big deal. We can get rid of [295:15] resize and update. Uh, and sorry, this [295:18] should be touch start. [295:20] Okay. Now, I think this is going to [295:22] cause an issue with our control offset [295:25] because we specifically checked for [295:26] that. So, when you tap it wouldn't do [295:29] the offset. Um, but I think we can just [295:32] Let's just confirm that. I think. Uh, [295:34] no. I mean, I know it will, but let's [295:36] just get it working first and then [295:38] figure out how to fix it later. So, if I [295:40] go back, you can see it works. Now, I [295:42] don't have an iOS device, so I feel like [295:44] we still have to add touch events just [295:46] in case this doesn't work on an iOS [295:48] device. But, you can see we have the [295:50] issue here. Now, when I tap, uh, there's [295:52] an offset. So I guess the easiest [295:55] solution is just to check if it's a [295:56] mobile device with screen width and then [295:59] if it's a small screen width then [296:02] disable offset entirely. But if [296:04] someone's small screen is like this on [296:06] desktop then then they wouldn't have the [296:08] offset but it would work fine. Probably [296:10] no one's looking at this website that [296:12] small. Another solution instead of [296:14] updating it here we can actually just [296:16] update it in the function itself. That [296:18] way we can get rid of this and it [296:20] doesn't affect anything else but [296:21] whatever. I think the solution I'm going [296:24] to go for is literally just checking if [296:27] I'm on a mobile device. So I think we [296:30] can actually let's see maybe we can do [296:32] it in the sizes check. I don't think [296:34] that makes sense. Let's just do [296:35] device.js [296:40] and let's come to sizes and change it [296:42] over to device. Let's just do this is [296:45] mobile is mobile device. Let's get rid [296:48] of this. And then the cliche. And then [296:50] let's just test if we're on a mobile [296:53] device over here. Cool. And we don't [296:55] need event emitter here. So we can get [296:57] rid of that junk. And this honestly [296:59] doesn't need to be a class. It can just [297:01] be a utility function. But I might come [297:05] and add extra stuff here for the stuff [297:08] later. So this can just come whenever, [297:11] honestly. Let's make sure to import [297:13] that. Yeah, I might do device specific [297:15] things later. I don't know. But for now, [297:17] it's just going to check if it's a [297:19] mobile device. Um, sizes can also check [297:22] if it's a mobile device based on screen [297:23] width. So, sizes kind of like screen [297:25] width though it also check like tablets [297:28] and whatnot or whatever. So, in [297:30] controls.js, let's just simply check for [297:32] that. If this experience device, so if [297:36] it's a mobile device, uh, we just [297:38] return. We don't have any offset. So, we [297:42] just return early. But we still want to [297:44] move the position, but we don't want to [297:46] do any of the looping offset. Now, when [297:49] I refresh the page, [297:51] cool, it's working. Okay, so let's go [297:54] back to Raycaster just to be safe. Well, [297:56] just to be safe, let's go to Raycaster. [297:58] Let's take out this entire function over [298:00] here. And let's just call it let's just [298:03] call it handle [298:05] click uh for whatever. That's a terrible [298:09] name. Whatever. And we'll just create [298:11] the function over here. function [298:14] and just paste it in there. Click and [298:16] touch just like that. Now, if you prefer [298:19] to put handle click and touch as a [298:21] standalone function like this and as [298:23] part of the class the that's fine as [298:26] well. Just note that you might have to [298:28] dobbind this just to make it work, but [298:31] that will depend on how you want to [298:33] format it. Anyway, this is kind of a [298:35] mess, but it's fine. It's [298:37] understandable. As long as it's [298:38] readable, that's all that matters. And [298:40] we'll do touch start or touch end works [298:43] here. I I feel like I'm going to prefer [298:44] touch end here. And same thing, just [298:46] same exact function. And now it should [298:49] work. Let's give it a try. Oh, it's not [298:51] working. Yeah, that's I'm dumb. Yeah, we [298:54] can't use a function here. It has to be [298:56] an arrow function because then we lose [298:58] scope to the variable. We could pass in [299:00] parameters, too, but like it's better [299:02] just to use an arrow function at this [299:03] point. And we get rid of that. And I [299:06] already have it. I can just get rid of [299:08] the syntax there. It looks like we got [299:10] an error. Probably one of these brackets [299:12] is extra. Cool. And great, now it's [299:14] working. [299:17] Now, I will say this is the outdated way [299:20] of detecting if it's a mobile device. We [299:21] can also detect if it's a touch device [299:23] and things like that, but for now, this [299:25] is universally applicable. So, I'm just [299:27] going to keep doing this. Cool. Last [299:29] thing on our agenda is a loading and [299:31] then I'll talk about a lot of other cool [299:33] stuff a little bit faster because I feel [299:35] like we've covered enough foundation to [299:37] speed up. So let's do that. So how do we [299:40] add a preloader? Well, we can just come [299:42] in over here and do again as you can [299:44] expect preloader.js. [299:47] Now I kind of actually want you to [299:48] implement the preloader yourself and if [299:50] and then compare on how I would do it [299:53] because there's a lot of different ways [299:54] to approach the preloader as well. And [299:56] so I think the idea is very similar that [300:00] once the preloader is done, we need to [300:02] emit some sort of event. So I'm just [300:04] going to copy from sizes over here. And [300:06] uh so I'm just going to copy this from [300:07] sizes over here. And I'm just going to [300:09] paste it over there. And let's change [300:11] this to preloader. So we definitely need [300:13] access to the resources because this way [300:16] we know when it's done loading. Let's go [300:18] to somewhere like mouse and just grab [300:21] the instance for ourselves over here. [300:24] And we can get rid of all this stuff [300:26] because we definitely don't need it. [300:27] Well, so if we want to make a loading [300:28] bar, we need somehow to note the amount [300:31] of Q. Well, of course, we can use this [300:33] over here. We can actually get rid of [300:35] this console log. I don't know why I had [300:37] it for so long. Simply emit the progress [300:39] value. So, let's do emit progress. And [300:41] let's add the value over here, uh, which [300:44] is going to be this.loaded divided by [300:46] this. Q. That's going to be the progress [300:48] value that we're going to refer to. So, [300:49] we can pass in a value. And then we can [300:51] grab that value in our preloader over [300:52] here. So let's just shift alt down arrow [300:54] over here and this is going to be [300:56] this.resources. Let's do this.resources [300:58] from progress. We're going to grab the [301:00] value. So we can grab value from the [301:03] event emitter. And then here we can also [301:05] listen to this.resources.onready. [301:07] And this one doesn't have a value which [301:09] is fine. We can call this play intro. [301:12] We'll create this function right now. [301:13] And then we'll give the progress bar a [301:15] value here as well. Just get out of the [301:17] constructor and play intro over here. I [301:20] guess this kind of depends on you if you [301:21] want to play an intro or not. You could [301:22] also do like show button and then click [301:24] on button and then enter. I'm just going [301:26] to automatically make it fade as soon as [301:28] it goes to 100%. But if you want to wait [301:30] for a button, you can totally do that. [301:31] And I'm sure you can be able to figure [301:33] it out. You know, totally believe in [301:34] yourself. You got this. For me, I'm just [301:37] going to create a very, very simple one. [301:39] And I'm going to again, you can create [301:40] the preloader in your JavaScript if you [301:43] want to. I'm just going to do it [301:45] directly in uh my index.html over over [301:48] here. So, I'm just going to do [301:50] preloader. So really simple, just [301:52] pre-loader and then a preloader inner [301:55] and then a pre-loader progress wrapper [301:57] and then a progress bar. You can see my [301:59] style.css. It's literally just centering [302:01] the the progress bar. So just a bunch of [302:03] dips and you can see what that looks [302:05] like over here. And so just make sure [302:07] the progress bar width itself is 0% or [302:10] whatever whatever you want to animate. [302:12] I'm just animating the width on top of [302:13] the bar. So there's this one div that's [302:16] the back and then the other bar is going [302:17] to be animating over there. Really [302:19] really simple. And let's go to [302:20] preloader.js and let's just finish this [302:22] puppy up. So we can do this innit DOM. [302:26] But honestly, if you don't want to be [302:27] organized, you don't have to do init [302:29] elements. Again, this is why you might [302:31] want to have like multiple like a single [302:33] source of truth for the DOM elements. [302:35] But we can just create it directly in [302:37] over here. So we'll just do this [302:39] overlay, which is like the entire [302:40] preloader itself. And I'm going to do [302:42] document.query selector. You can just do [302:44] dot the preloader itself. And then the [302:46] bar itself, the one that we want to [302:47] animate is going to be that's going to [302:49] be the bar itself. And then here we can [302:51] do let's see this.onloading [302:54] unload. Call it whatever you want to [302:55] call it. Shift all down arrow. I'm going [302:57] to move it up because it's up here. And [303:00] I'll just do onload. Honestly, play [303:02] intro. It could be like if if you have [303:04] like a intro animation and then an outro [303:07] animation, it might say make more sense [303:09] to call this one play outro. play outro [303:12] cuz once you first land on the preloader [303:15] it'll play an intro animation then we [303:17] have the loading bar then once we hit [303:19] enter or once you finish loading then we [303:21] play an outro for the preloader so it [303:23] makes more sense to say play outro here. [303:24] So during the load we can do very very [303:26] basic thing here. We can just do this [303:29] bar and let me just call this progress [303:31] bar progress bar just to be a little bit [303:34] more consistent and we'll just width and [303:36] we're just going to set it a string [303:38] literal here. Whoops, I forgot the [303:40] dollar sign. Value times 100. Basic math [303:43] over there. And then we need a [303:45] percentage. And let's make sure in [303:46] experience.js to create the preloader. [303:49] We can come over here and do preloader. [303:54] Make sure to import it at the top. And [303:56] preloader also needs to import [303:57] experience. I must have accidentally got [303:59] rid of this. So, let's import that. And [304:02] let's fix this typo here. Whoops. Uh, I [304:05] must have accidentally changed it when I [304:07] was renaming the bar. Of course, we need [304:08] to pass in value over here so we can [304:10] actually use it. Go back and refresh the [304:12] page. [304:14] Woo, it's working. Now, we only have two [304:17] assets, so it goes 0.5 to one. If you [304:19] want to do some fancy math where there's [304:21] like a delay in between or some [304:23] artificial loading, which a lot of [304:25] creative websites do, you can totally do [304:27] that. But as you add more assets like [304:29] images and things like that, it'll, you [304:30] know, sort itself out. So, let's get rid [304:32] of that console log. And I'm actually [304:34] going to rename this to preloader. And [304:36] now if we play outro, we just make it [304:38] fade to zero. And on complete, I want to [304:41] remove it completely from the DOM. So we [304:43] just do dot remove there. Don't forget [304:44] to import gap from GSA. And now if I [304:46] refresh the page, as soon as the bar [304:48] hits 100, it's going to fade out. Now [304:50] that's a little bit too fast. So we can [304:52] probably add a delay here of like 1 [304:53] second. So we hit the loading bar and [304:55] then delay 1 second and then fade out. [304:57] You will notice there's this really [304:58] awkward thing where it hits the loading, [305:01] it delays one second, then it plays the [305:03] opacity, and then it like teleports out [305:04] and gets removed. Why is that? Well, [305:06] it's because of my CSS styles. I simply [305:09] put transition to everything over here. [305:12] Opacity. So, we can actually get rid of [305:13] the ease because Gab handles the ease [305:15] there. So, if you want to custom ease, [305:17] you can put the ease over here, right? [305:19] So, now if we go, it loads, waits 1 [305:20] second, and then fades out just like [305:22] that. And you can see that remove an [305:23] action here. It's part of the DOM over [305:25] here. Once it's done, we remove it from [305:27] the DOM. So, the last thing I want to do [305:29] is probably just emit an event that says [305:32] this. And I'll just You can call it [305:34] ready again if you want to. There's [305:36] nothing wrong with using the same [305:37] variable name here, but I'll just do [305:39] preloader finished. Preloader done or [305:42] preloader finished. And we can listen to [305:43] this in experience.js. So, if you want [305:45] to, you can listen to this event like [305:47] this. Preloader. I guess we could move [305:50] something possibly like the raycaster in [305:52] here. I don't know. It's it's up to you [305:54] and what you want to work for. Just make [305:55] sure nothing else is conflicting with [305:57] it. And you might have to add some guard [305:58] clauses here if you're waiting for the [306:00] preloader to be done before you [306:02] instantiate something. I don't know if I [306:04] need that yet, but that is an option [306:05] there if you need it. If you don't, then [306:07] just get rid of this, but uh that's also [306:09] an option as well. So now all we have to [306:12] do is just deploy it. So create a GitHub [306:14] account if you don't already. I kind of [306:16] already assume that you know this, but [306:19] create a repository if you don't have [306:21] one already. Let's come over here. I'm [306:24] just going to cancel ganit get init [306:27] promote add origin over here get add [306:29] everything get commit dash m let's go [306:33] dudes [306:35] portfolio [306:38] and let's push that up there oops I [306:41] forgot to do this only the first time we [306:43] got to do that and then every other time [306:45] we can just do get add all get commit [306:47] and get push let's refresh the page [306:50] let's go to versell.com sign up for an [306:52] account the last thing you push push [306:54] should uh show up over here once you [306:56] connect your GitHub. Then just hit [306:58] import and deploy. And we have nothing [307:01] special, so we probably don't need to do [307:03] anything here. But you can see it by [307:04] default runs our mpm run build command, [307:07] which is the one that we have in here to [307:09] build out everything into a disc folder. [307:12] So you can run mpm run build here on [307:15] your local device just to see the output [307:17] here. You can see everything is disc in [307:19] here. Then if you want you can do mpm [307:21] run preview to preview the built out [307:24] files in the disc here. But this gets [307:27] deployed and you can see it's done. We [307:29] can continue to dashboard. Open this up [307:31] and you can see that Alpha Chad's Cozy [307:33] Cafes is now live and we can share it [307:34] with anyone. All right. So now I'm just [307:37] going to do a lot of extra content a [307:38] little bit quicker and just kind of like [307:40] talk over them because I feel like at [307:42] this point you can definitely pick up a [307:44] lot of things a lot quicker and there [307:46] might be a few gaps here and there that [307:47] you might have to spend some time trying [307:48] on. But like don't worry, you know, [307:50] failure is part of learning and I'm sure [307:52] you will be able to figure it out. Just [307:54] make sure to believe in yourself. I know [307:56] that sounds really cliche but the belief [307:58] in yourself is actually really powerful. [308:00] Okay, so the first thing I want to just [308:02] tackle some general issues out when [308:04] you're working with uh I guess in [308:06] mouse.js [308:08] when you have this instance set over [308:10] here it's already set because it's [308:12] belongs to the window itself. So by [308:14] default your pointer is going to start [308:15] at 0000 that we normalize into the [308:18] center. So anything that's directly [308:20] there even if you don't interact with [308:22] anything yet might be activated. If [308:24] that's the case, you can simply have a [308:26] guard clause until you have a first [308:28] interaction. Very similar to how you [308:31] can't play audio unless there's some [308:33] sort of user interaction. You can just [308:35] guard for the raycast caster updating or [308:37] triggering anything until the user does [308:40] a first interaction, whether that be a [308:41] click or pointer. That doesn't concern [308:43] me because the only thing it animates is [308:46] Chad and it makes his animation play. [308:48] But it doesn't really concern me. So [308:50] that's just one way to fix that and [308:51] something you might encounter later. If [308:53] you ever see like something scaled up [308:55] and you're like wondering like why is it [308:57] scaled up when nothing else is scaled [308:58] up, it's probably because it's directly [309:00] at 0, 0. I also want to talk about code [309:02] smells in general. So I feel like we [309:04] have a few of these like probably a long [309:07] method somewhere. I think the update [309:08] functions in some of our things are a [309:10] little bit long. You could extrapolate [309:12] those into other functions. Um sorry, [309:15] extrapolate. No, like take it out. And [309:17] then a little bit of shotgun surgery, [309:19] but it's not really bad. Like sometimes [309:21] you want the readability over the dry or [309:24] the, you know, do not repeat yourself [309:26] principle. Like for example, in [309:27] mouse.js, we do the same thing here [309:30] three different times. Does it really [309:32] matter that we didn't take it out to, [309:34] you know, its own function and just call [309:35] that? Honestly, here I feel like the [309:37] readability just makes a lot more sense [309:39] than to put it in another function. But [309:42] if you want to put it in another [309:43] function, you can totally do that. So [309:44] here is a little bit of shotgun surgery. [309:46] If we want to change this here, we also [309:48] have to change it here and so on so [309:49] forth. But whatever. Overall though, I [309:51] think we did a fairly good job with [309:53] clean code. I feel like there's a few [309:55] areas where we could make it a little [309:57] bit cleaner. If this project were to [310:00] extend beyond this, I would definitely [310:01] restructure a little bit of it. But for [310:03] this kind of project, we haven't done [310:05] too bad because we can change things and [310:07] we can add things later if we want to. [310:09] Again, if we had more HTML elements, [310:10] more interactions, I would consider [310:12] having like, you know, more helper [310:14] classes with like HTML elements [310:16] preparation and maybe like a bunch of [310:18] animation wrappers that we can reuse or [310:20] export and just reuse rather than having [310:22] a bunch of custom G-Soft animations [310:24] everywhere in multiple different files. [310:25] But yeah, for us, I don't feel like [310:27] that's really necessary. Next thing I [310:29] want to talk about is this day and night [310:31] mode toggle. Now, there's a few [310:33] interactions tied here, but I'll give [310:34] you the general concept. I'm not going [310:36] to cover the CSS part where the user [310:38] interface changes color because there's [310:40] a lot of online free tutorials on on [310:43] that already. So, uh, first thing I'll [310:45] talk about the moon and the night. So, [310:48] you can imagine this is a very simple [310:49] gap animation, but I do want to mention [310:51] a few things. If I go over here to Cozy [310:53] Cafe, I just want to show you how I set [310:55] this up real quick. So, I modeled the [310:57] sun and then I did Q origin to geometry [311:00] and then I just control period just to [311:02] move it somewhere that I like the [311:03] rotation of. So, oh sorry, let me [311:06] confirm it like this. And then when [311:08] after I modeled the room, it doesn't [311:10] have the same origin point anymore. But [311:11] if you do shift S and do cursor to [311:14] selected, it'll snap to the origin [311:15] point, not the, you know, where you kind [311:16] of expect it to. And then you just do Q [311:19] or, you know, right click, set origin, [311:21] origin to the 3D cursor. Now both of [311:23] them share the same origin point. Then [311:25] you can rotate around. Of course, just [311:27] make sure you adjust this to get where [311:29] you like. And uh yeah, now you can just [311:32] rotate it however you want. Now because [311:34] they are on opposite sides generally [311:36] they have a different rotation. So this [311:38] would have like a rotation of 180 and [311:40] this one would have zero I guess cuz I [311:43] just left it there. But because I [311:45] applied my rotation with control A and [311:48] applied my rotation over here. See that [311:50] I actually give them both the same exact [311:53] animation. If one of them has a 180 [311:55] rotation while the other one has zero, [311:57] you might actually have to do two times [312:00] math divided by pi. one of them might [312:01] have to go to 360 and then like math.py. [312:04] So, because I applied my location, I [312:06] could just give both of them the same [312:08] exact animation cuz it's rotating [312:10] relative to its new quote unquote 0000 [312:13] rotation values. Next thing I want to [312:16] talk about are these lights. So, how did [312:19] I make them gradient fall off? Now, this [312:21] is a little bit advanced for this [312:23] course, but those are shaders. And we've [312:25] actually already been working with [312:27] shaders. Everything that you see in 3GS [312:29] is pretty much a shader, which is [312:31] basically a program that runs on your [312:34] GPU. But basically, when we talk about [312:36] shaders and generics, we kind of mean [312:38] like custom math functions or like in [312:40] Blender, we also call these shader [312:41] nodes. So, it's pretty much just these [312:44] because behind every one of these nodes [312:46] is literally just a bunch of math. So, [312:48] when we call shaders, it's kind of just [312:50] like, uh, we wrote some sort of math [312:52] function. And then shader nodes are just [312:54] nodes to help people with math. So, [312:56] there's a lot of that there, right? [312:58] Like, let's say I just uh let me create [313:00] a plane real quick and just give it a [313:01] new material over here. And I hook up a [313:04] gradient texture over here. Just like [313:06] that. You can see now there's a gradient [313:08] on my plane over there. Now, there's a [313:10] lot of math behind this and why it looks [313:12] the way that it does on the plane. Now, [313:13] if you are interested in knowing the [313:15] math behind it, you can check out this [313:17] video over here. Some of the imports [313:19] might be a little bit dated, but I [313:21] explained all the math behind well maybe [313:23] not all the math but on the foundational [313:25] math behind like the gradient texture [313:27] node here in Blender and also how to [313:29] recreate that in 3JS. So the concept is [313:31] basically the same. All I did was [313:33] recreate those shader nodes using using [313:36] the 3GS shading language TSL over here. [313:38] So let me go back to Chad Cafe and you [313:40] can see that I didn't create any of the [313:42] shapes actually in here. I just used [313:44] lights and then generated copied those [313:46] positions and generated the lights. the [313:47] same with the car over here. You can see [313:49] that I just generated the cone in 3GS. [313:52] Now, why did I do that in well, I [313:54] actually used a cylindrical geometry [313:56] instead of a cone. Now, the reason I [313:58] generated them in 3GS here is one, lower [314:00] file size, and two, if I ever want to [314:03] make adjustments, it's easier to [314:04] dynamically make that in 3GS rather than [314:07] going in Blender, changing it, [314:09] reexporting it, and so on so forth. The [314:11] only time I would consider making a [314:13] geometry in Blender for something like [314:15] that is if the model is really complex, [314:17] but for a simple cylindrical shape that [314:19] kind of looks like a cone. There's no [314:21] need to do it in Blender. I mean, if you [314:23] want to do it in Blender, that's totally [314:24] fine as well because just want to save [314:26] time and don't want to play around with [314:27] parameters, I get that too as well. So [314:29] here you can see there's this thing [314:31] called color node. You can imagine [314:33] that's like a color node in Blender, [314:36] right? Like this is this is pretty much [314:37] a color node, right? So basically I'm [314:40] just creating a custom shader using TSL [314:42] not actual math like the low lowest [314:45] level language cuz TSL is an [314:46] abstraction. So I'm just using their [314:48] abstracted math to create a custom color [314:50] node for there. And you can see it's [314:52] just like a light smooth step kind of [314:54] like a gradient fade out sort of thing. [314:56] It looks really scary and intimidating [314:57] but once you get the basics it won't be [314:59] that bad. Definitely check out that [315:00] other video that I have. You'll notice [315:02] that it's actually not really that [315:04] scary. It starts getting scary when you [315:05] get to the more complex shaders. I mean, [315:07] the Blender shader node system is also [315:09] pretty scary once you get to the really [315:11] complicated shader node setups. Another [315:14] thing to mention is, yes, you can use [315:15] Gap to animate things like this on [315:18] targets, on position, all that sort of [315:20] stuff. The same way we use Little GUI to [315:22] modify it. We can also modify it with [315:23] Gap. Again, at the end of the day, all [315:26] of these are kind of like vectors and [315:27] JavaScript objects. So, you probably can [315:30] animate them if you can tweak them some [315:33] other some some other way. Next I want [315:35] to talk about are like briefly [315:36] animations. So when you see this car [315:38] over here and like this floating icon [315:41] over here and of course the hover [315:42] interactions like when it's very very [315:44] similar or sorry when it's very basic [315:47] animations I'll just do them in [315:48] JavaScript directly because adding all [315:50] that animation information data in the [315:52] GB file isn't really necessary for [315:55] simple interactions and they're not as [315:57] easily tweakable if you do it in Blender [315:59] beforehand. Now I did give one single [316:01] animation. Again, I would not do this in [316:03] Blender, but just to for demonstration [316:06] here, I animated this up. So, let me go [316:08] over to timeline and let me just show [316:12] you that real quick. You can see I have [316:13] two key frames. So, if you're ever [316:15] curious on what to do, you just select [316:17] your object and then just hit K and then [316:20] you can do rotation and then you can go [316:22] to some amount of frames like over here [316:25] and uh set or new rotation and then just [316:27] hit K and do rotation or whatever thing [316:30] you're keying again. And just like that. [316:32] So that's the really really basics of [316:34] animation. There's like auto keying, [316:35] drivers, whatever, blah blah blah. But [316:37] that's like the basics. For very basic [316:39] ones like these, you can just hit you [316:40] can just check animation and you'll be [316:42] able to find the animation once you log [316:44] out the animation clip. Not every kind [316:46] of animation in Blender will export. So [316:48] be careful there. But for very simple [316:50] transformations like these, you can be [316:52] pretty confident that they will export [316:54] through the GB file. For audio, I used [316:56] Hower.js. The reason I'm using Hower [316:58] instead of doing it myself is because [316:59] Hower kind of take cares of a lot of [317:02] cross compatibility issues with the [317:04] different browsers and audio which is [317:06] why I use Hower.JS to convert fonts into [317:09] W and W 2. For web fonts, I use [317:11] transferters. So if you would like any [317:12] of these, just upload it over here, [317:14] convert. And the really nice thing is it [317:16] will also give you a stylesheet. So if I [317:18] go here and open the stylesheet, you can [317:20] see that it'll set it up all here. All [317:21] you have to do for us is just control [317:23] shift L and then just do slashfonts or [317:26] wherever you saved it in your public [317:27] folder. I just put in font. So that's [317:29] all you have to do there. And then you [317:30] can just use this and import this into [317:32] your wherever your root is or wherever [317:36] you want to use it. Here you can see I [317:37] just imported stylesfont or favicon [317:40] generator. I use this one but there's a [317:42] lot of other ones online but this is [317:43] really really nice cuz it also gives you [317:45] the index.html element to link up in [317:48] your head. right over here. They give [317:50] you all this over here. And if you come [317:53] into media, you can see it gave me all [317:55] that OG image I uploaded myself. But [317:57] this is all given to us. Again, all you [317:59] have to do is just select the hrefs and [318:02] do / media or wherever you uploaded the [318:04] image there for your public folder. Just [318:06] be careful about using SVGs here cuz it [318:08] might add like a background even though [318:10] your stuff is transparent. So just be [318:12] aware of that. All right. So last on the [318:14] agenda, I just want to talk about this [318:15] split over here. So the easiest way to [318:17] do that is using scissoring. So if I [318:19] come over here, if you click over here [318:21] and go to the code over here and type in [318:23] scissor, you can see that it's using [318:25] scissoring. And then that's also in the [318:27] documentation. So if you come over here [318:29] and look up scissoring, [318:32] you can see over here. And then you [318:33] pretty much can just copy this. Now, the [318:35] downside of this one is that it's only [318:37] going to be like here, you can see [318:39] multiv- views. It's just going to be [318:40] like perpendicular lines rather than [318:43] custom ones. So what I had to do instead [318:45] is use render targets. This is a WebGL [318:47] version, but I did it with TSL or [318:50] WebGPU, but instead I used render [318:52] targets. And then I used some custom [318:55] shaders to make the line and blend [318:58] between the render targets a little bit [319:00] distorted and funny. Whereas you can't [319:01] do that as easily with a scissors. [319:04] There's like there are some methods [319:06] where you can use a scissor test and a [319:08] custom like stencil buffer to have like [319:10] jaggedy edges, but it's not going to be [319:11] as easy as using render targets. So if I [319:14] come to my renderer folder over here, [319:17] you can see that it's just some math [319:18] like I have a slider and then based on [319:21] how far I am from that slider coordinate [319:23] which I got from my HTML element and my [319:25] mouse events and mouse move or pointer [319:27] as well. I calc do some distortion [319:30] pretty much like this is all just random [319:32] math that I generated with AI to give [319:34] some sort of distortion around the [319:36] slider. Other than that it's basically [319:38] just the slider itself with some added [319:40] distortion. Again, it looks really [319:42] scary, but if you convert it into like [319:44] blender nodes and things like that, it [319:46] won't be as intimidating as it currently [319:48] looks. So, the whole idea with the [319:49] render target is you can imagine you [319:50] have like two different scenes that you [319:52] render to what they call offscreen [319:54] textures and then you create a custom [319:57] shader to determine how to to smash or [320:00] composite those scenes together. Last [320:01] thing I want to talk about are the image [320:03] textures that you can easily replace [320:04] later. Here you can see I no longer am [320:07] attaching the export over here. I got [320:09] rid of it. But you can see the project [320:10] name is still there. And the thing with [320:13] materials is that it actually keeps the [320:15] space unlike mesh names. So when you [320:17] search for it in like chat cafe and go [320:19] to project, you can see that I'm [320:21] actually searching it with the space [320:22] over here. And then I'm just setting it [320:23] into our assets. Right. So here I am now [320:26] uploading my images and loading them [320:29] here, which means we have to update our [320:30] loaders and add a texture loader here. [320:32] I'm doing this because I'm using WebGPU, [320:34] but if you're on WebGL, you're going to [320:36] use the image texture loader. And then [320:38] you can imagine in resources we just add [320:41] check the asset type and then you use [320:43] the respective loader that we can later [320:45] access and it just puts it in our items [320:47] folder. So every time you want to load [320:49] something new like maybe a cube texture [320:51] you can do cube texture and so on so [320:52] forth. I just want to recap on some of [320:54] the ways that we accessed one file to [320:57] another file. So one of them was to emit [321:00] an event. Another one was to call a [321:02] public method from another class. We did [321:04] that with register objects in ray [321:06] caster. Right in Chad and Cababie Bear [321:08] Cafeway, we both called raycaster's [321:10] public method of register objects. And [321:13] then second, we also did something like [321:15] refer to the variable itself through [321:16] experience. Like when we were checking [321:18] if it was mobile or not. Now speaking of [321:20] mobile, I just want to talk about like [321:22] sizes over here. If you want you can do [321:24] something like you know if if window is [321:27] like less than if window inner width is [321:29] less than like 364 you can do like this [321:32] emit and mobile and then obviously the [321:35] converse of that is like this emit [321:36] desktop and then you could listen to [321:38] that throughout your application as [321:40] well. I didn't have to do that cuz we [321:42] only check things but like it's really [321:44] really case by case basis. There's [321:46] multiple methods to interact with each [321:49] other. Now, when it comes to [321:50] quoteunquote best practices generally in [321:53] JavaScript, the way to denote like a [321:54] private function is to give it an [321:57] underscore. So, this populate intersect [322:00] objects is a public method. So, you can [322:02] leave it exposed like that. Well, I [322:04] mean, they're technically all callable [322:05] cuz in JavaScript it's not like strictly [322:07] there. So, for everything that's like [322:09] internal, you can label with an [322:10] underscore. So, that's just like a [322:12] naming convention thing. Although, now I [322:13] think you can use the hash uh the [322:15] hashtag to make a private method in [322:17] JavaScript. Although I don't know how [322:20] common it is. I usually still see the [322:21] underscore. Typically though, this is [322:23] why people prefer TypeScript. Okay, so [322:26] now I just want to talk about what's [322:27] next. We did the intro course, we did [322:30] this course, and we know how to [322:32] structure a little bit larger projects. [322:34] What comes after? Well, if you want a [322:35] very comprehensive course, I recommend [322:38] doing 3JS Journey by Bruno Simon, which [322:40] the code was based off. He's arguably [322:42] the most famous 3GS developer right now [322:45] in the entire world. So definitely check [322:47] him out. He's got his own course and [322:49] it's only $95 for a ton a ton of [322:52] content. So, he's a very generous [322:54] person. So, if you want to actually [322:56] think about becoming a 3GS developer [322:58] full-time career, maybe you can check [322:59] that out. Or even if you're just a [323:00] hobbyist, if you want to do a little bit [323:02] more Blender stuff and like get into [323:04] realism and know a little bit more about [323:06] Blender shader nodes, you can check this [323:07] one out. If you're more curious about [323:09] going in shaders in general for WebGPU, [323:12] you can check this out. Right now, it's [323:13] still dominant with WebGL and GLSL [323:16] resources. So, you'll definitely find [323:18] more on WebGL, but if you want to go for [323:21] the more futurist quote unquote [323:23] futuristic stuff, you can check out that [323:24] video. So, if you're more into shaders, [323:26] you can go here. Although, this does [323:28] provide somewhat of a prerequisite for [323:30] this one as well. Just one section here, [323:33] but but honestly, you might not need it [323:34] depending on your level with Blender. [323:36] But honestly, I don't actually recommend [323:38] you go for any of these. Sorry, that I [323:40] know that looks really bad. I honestly [323:42] don't recommend you go for any next [323:45] video. I actually recommend you try your [323:48] own project and then just learn along [323:50] the way and try and fail and try and [323:51] fail. You might find those things in [323:53] other videos and other courses, but but [323:56] you can skim videos rather than just [323:58] like watch them end to end and copy the [323:59] idea. So just think of something you're [324:01] really really passionate about and [324:02] believe in yourself and do it. I'm sure [324:05] I think you would have I think you have [324:07] enough knowledge to do a lot of really [324:09] really cool stuff. Uh, I know it'll be [324:11] tough, but that's definitely my [324:12] recommendation. But again, you know, you [324:14] do you. You know how you learn best. And [324:16] yeah, that's pretty much it for the [324:17] video. Thanks very much for stopping by. [324:20] And as always, take care, peace out, [324:22] subscribe, and I hope to see you in my [324:25] next video. Bye.