Angular/ThreeJS - Video 149 bevel enabled

hey everybody so uh yeah uh been working on trying to get these uh these values configurable it looks like uh Bev bevel enabled is next um I thought do a couple other quick things one is to sort of do a shout out to uh India again um they're the only ones showing up right now on my list for the last seven days about 15% of the people in the last seven days have uh been from India and then uh like in the last 28 days it was 9% with almost 1% coming from Madagascar and then uh in the last 90 days uh United States was up to 3.2 with Madagascar AT3 so they seem to be growing my percent my number of views are definitely going up um and then my percentage is mostly coming from India and Madagascar which is pretty cool and interesting and I definitely appreciate you guys thank you so much for watching my videos uh another interesting thing was I I don't feel as comfortable showing my list of subscribers I could see about half the subscribers I have 69 subscribers so that means that um and about half of them have whether they can be seen or not and I did see a person who I greatly admire show up in that subscriber list and I'm not going to call him out but I genuinely appreciate you I hope you know who you are and uh it's just an honor that you're subscribing to my channel um I genuinely genuinely genuinely appreciate it now um so I know the yesterday at the end of the video I noticed oh man I can do something that I've been wanting to do a long time and that's sort of had have an animation going down a tunnel and I thought that would be really cool and so basically what I did was make an O the letter O and then I made gave it a big height which I don't know why it's called height I think it should be called depth but it's called height and then I sort of angled the camera up so that it was centered up in it and now it's going down and so this is it the camera going down into an o that is a normal uh material I actually do have three lights in here uh like an orange a green and a uh White Light sort of in honor of India um and um I have that but you can't see it because Normal materials do not show that um and then uh so if I go to a basic uh it's just a white and it doesn't care about light either but now if I change over to a bong now you see like the colors now these are like the colors of the Indian flag um that I got from this thing um but uh yeah they don't look right and I have noticed that about in 3js that the colors don't seem to seem to match up uh the way they would like on a web page I don't really understand what that's all about it will be very interesting to explore that some point in time um but I guess that's enough of that um so basically I want Beville enabled to be a bullan and in the mesh list I would like it to show up probably right over bevel segment or probably the very first bevel thing and um or even yeah even above curved segments um and it should be a bulling so it should be like a checkbox like these guys over here speaking of that um so there's you know there's upgrading and staying upgraded and I have upgraded this but then yesterday I was notic I had saw a video about angler material and how they have version two and version three and how you can so I upgraded like if you look at my packages uh Json I have the latest angular material let's see material um you I have 1801 now what I don't know is is this in fact angular 3 uh or material 3 version three or is this like some sort of backwards compatible version two because if it's if I somehow have version three version two and it's just backwards compatible I really want to upgrade that to version three um and I don't really know how to do that or or how to even check I do know that now with version three when you inspect these things apparently there's something called design tokens in there um and uh in in here and that does I think that is the design token yeah they calculate the variable um and yeah so I think these are the version three designed to tokens I think this is the way this looks in version three so I guess I'm good um I did notice that in angular material now they don't have the same like they had like this I signed up for like the Indigo theme and that theme doesn't exist anymore now they have what looked to be like I liked those old themes they were really cool but they weren't particularly professional and the new ones are very very professional um so um yeah I don't know if I can what I can do to change my theme so that it can be one of the modern version three themes but anyways that's all beside the point but that's really honestly if you want to keep an angular application up to date that's a stuff you have to think of not just whether you um whether you've gotten your packages and your libraries all up to date but whether you're also sort of staying in tune with the the the new sort of mental reality that the angler team is moving down you know um you it's not just the language like when you're typing like if you looked at like 1990s JavaScript and you looked at like the way you would interact with an array it's so dramatically different than the way with the same language you interact with an array today because we've added all these new things so it's not the same even though it's the same language it's the it's not the same today and you have to stay up not just like technically but you also have to stay up like with the culture of the language change but anyways uh so that's enough of that um let me see so first thing I need to do I think what I've been doing is uh last time what I did was I just changed this and broke it all so we're gonna say byebye to the animation and we'll say that and I'm going to call it beveled enabled and it doesn't exist yet so this saved us a step last time uh and it will break it and then um so it's just telling us hey what you did is wrong um so now let's come over here and we'll add our bevel enabled right there so that breakage wasn't I I don't know what they could have done but that wasn't too too useful but this one is super useful so now it's going to break but it's going to tell us hey this is what's broken so now we can just hold this control button down and click on that and click on the error and it'll take us to where the problem is and I'm going to say bevel enabled colon true so now we have our oh Comm so now we have bevel enabled and it's gone where we've reset um so so now nothing is broken uh we create our mesh item we set the bevel enabled to true and that's done but we cannot do anything with it if we look in at our mesh and we look in here we see that there is no Bev enabled so what I do next is since it's just a one andone change uh we'll just go ahead and copy our um control for um the check box so this is one right here so this okay so if you're if you are if you have an application and it's angular and you've included um material this but you don't have any checkboxes you're not using any checkboxes this won't work for you um because you have to import those things um I'll go over that here in a second but so basically my very first bevel thing or my very first uh so I have a case statement yeah if it's a text geometry then we show height and width so I'm gonna make this my very first thing in in push the wrong button in here and I'm going to call this bevel enabled which does not exist yet so this if you if you click into this form it'll be broken I'll just this Rebel en and I feel like that doesn't really need a good explanation okay so now add the mesh edit the form look in here it'll be broken in the control in the cube shape oh need to make it a text and we have our bevel enabled there now this is broken uh if we look in the in the um console you'll you'll see an error because the bevel enable control form name doesn't exist uh so we know that because you know I've done like the last six of them and that's exactly what happened last time and so now we can come in here and we can do a search on I want to put it before c curve segments everywhere so do a search on curved segment so this we go into Zombie Land right like just like okay this is how this works mesh item bevel enabled isal to form value now if you want to kind of keep yourself mentally fit you know you can think through yourself okay this is where we set up our our our subscriptions uh and basically anytime there's any kind of form value change we're going to update the bevel enable in the form value and then it might even make sense to think to yourself oh the form doesn't even have uh a bevel enabled form group or form item yet so uh so this won't even work anyways then you look for the next one if we if I remember correctly we have to change this in three places and here's the second one this is where we create our form in our form group and this is where we're going to create our Bev enable control so enabled and a lot of times I'll mess this up uh I'll like I'll change change sometimes I'll say bevel enable and then enabled and all that so it's always good when you do your last kind of search uh when you're kind of searching through like this and you you fix everything to just sort of keep in your mind all right what is do did I get did I name it consistently everywhere um it's sort of one of those things that you know it's just easy to kind of get totally hyperfocused on something and then you do it differently so here so this is good and then this is our last place and this is our patch value this is when it gets updated and and that has done it so I just want to double check as I go through that I called it the same thing bevel enabled bevel enabled bevel enabled so it's the same everywhere so that's good it's kind of like one of these things where it takes you two seconds to look through but if you got it wrong it could take you five minutes to figure it out later so if you do that every time you probably come out ah head in the long run um so it should all work I think it should all work um we updated it everywhere so let's see uh we're g to convert this into a q or to a text and then turn it to a normal and we'll sort of get in close so that we can see it with the camera so I think all we need to do is sort of get into like see like let me just get in here on the Y get first okay so our so we're kind of uh it's very thick the height is it annoys me so much that that's called height the height is too big so we want to change that to let's change it to just change this it's easy to see so all right so now we're looking these are the bevels and they're a little easier to see if we change the bevel segments to one all right so theoretically now if I turn bevel enabled off yep bevel Ling is offing is on on off on off so that's pretty cool um and that was pretty easy and we're 15 minutes in and I guess that's it that so I guess the only thing that I will do next is just go back to our 3js oh no there's one other thing um so in here this is something I've been forgetting now is I need to make it so so basically this will typically work um like as long as you change something else but if if beveled enabled was the only thing you change um this code won't catch it so let's just add an or here here and say re and the reason it was erroring out there is because we were trying to compare a bon to a number and that solves that issue um and um anyways uh everybody uh thanks for everything everybody who watches I really appreciate it and uh Happy coding bye guys bye

Channel: Marty Trujillo

Views: 16

Keywords:

Id: fYGTMLcnOcg

Length: 16min 31sec (991 seconds)

Published: Thu Jun 27 2024