Fancy vibrant shader and GSAP ScrollTrigger with Three.js #38

my name is yuri and we're gonna stream today some live coding so let me know if you can hear me well and let's get started with some coding it seems like in september even less people come to the lives yeah make some tea yeah i'm testing new camera today so hopefully it would work good for us i think the picture should be much better what do you think than the ones that i used before is there anyone is there anyone watching me am i alone in my room nobody's looking at me come on tell me something tell me that you see me is this stream working all right i assume it does so so let's start yeah thank you thank you guys there's some delay probably and yeah i usually feel alone those couple of minutes seconds while the delay comes and you see my message and then you reply to it so i've seen this website it's not new i think it's a couple of weeks ago maybe but it's pretty cool to me and they had a lot of those kind of effects done with the webgl and of course they are looking beautiful and i decided i should implement it today okay i'm gonna change the screen now yay so yeah the website so they have all these kind of effects on the 3d models of course they have some 3d models that somebody created beforehand but still they have some cool effects and i decided i would implement that and i decided i would also use a g-sub today and show you how you can connect kind of 3d scene to the website scroll bar and something like that and also well on the last stream i shared with you my success on youtube monetization so a week ago i enabled my monetization and you'd be surprised to know that i already earned for 20 dollars this is kind of the sad mood on today's live stream yeah my stats are not that great but still 420 is 420 all right i guess i need to close this all stuff yeah yeah hi hi everyone can you please share your geography it's always nice to know like where the people are from or watching you and meanwhile let's start creating stuff okay i'm gonna create the folder i'm gonna call it mape and then i'm gonna copy paste my team plate it's not gonna be just a gif so we're gonna be creating some kind of a website so let's do that okay created the math hey my friends yay oh it's still a crazy time over there are you working so late at night india yo okay so we got something working probably yeah so we got the usual you'll be playing with the shader russia with the uv coordinates visualized so let's start doing the 3d object it's actually going to be quite easy this time so let's go to the sketchfab and i'm ready to hear your proposals like what kind of object we should we should install in our scene and because i'm kind of in a sad mood i'm gonna look for a woman okay okay let's find the woman that we love on the sketchfab sounds good right all right all right which one should i pick okay this is a wonder woman actually like oh it's two too big one it's just 2.6 million no no i need some kind of simple model this is too too much just a simple beautiful woman model you know maybe this one just a simple asian woman seems good to me housewife mono what the heck how is this housewife it's just a generic woman come on i'm gonna burn in hell for that okay i think i'd like to real fast convert my model to the glb i bet you can make that online but i have installed some gltf pipeline stuff uh yeah just like that and i have the glb file where it's packed this is just needed because i'm using parcel unit you don't actually need this step if you're just using some other bundler of server or you get the url the other way italy it is okay i also need to open this whole editor so app.js i already have commented uh gltf loader here so i'm sorry it's not going to be a react3 fiber this time because i'm still struggling this whole stream actually is a bit of a challenge because you know i bought a new camera well hopefully i look much better than before oh much worse because you see a lot of wrinkles and all this stuff but anyway so but a new camera and and then i realized that to stream you need to connect camera to to your pc and then also to stream you need to charge your camera while you're streaming and turns out my micro hdmi or mini hdmi cable is just too fat to fit together with the charging cable so while i'm streaming i can't charge my camera so this means that we are running on the battery power right now and i'm not sure like it's gonna be enough battery power so i just need to fit the whole animation until the camera dies well or or you just won't be seeing me which is also seems okay anyways so we're kind of on a challenge to test the new camera and it's battery all right so we have the gltf loader um lower course that's what you shield f floater load and then i need to set the model and then some callback and then after the callback happens i'm going to just lock the jltf file and for that i need to import my model exactly all right and it was i think it was 80 when i started because for some reason i forgot to charge it okay so import model from [Music] scene processed glb all right because the parcel would just generate some some more rail for the build for the dist let's just start with it just so we are sure it's working all right yeah so this is going to be the url for the glp file with the hash number and this is already the loader working actually so i blindly typed all the code and it's working what a surprise and then we have a scene here and this is probably the stuff that you'd like to add to your scene like you'd like to add scene to your scene so you have some scene inside your scene it's going to be this scene at jltf scene which hopefully would get me a woman it did get me one but this woman is much bigger than i expected so uh the nice thing to do here is actually jltf scene traverse and then like oh so it's gonna traverse all the childs inside the scene because it's kind of it's kind of to get to the actual mesh here where is it and there are a lot of meshes actually uh that might be a problem by the way but still yeah let's try to do so if this is a mesh which you can just do like that let's just do mesh not the mesh scale set let's kill the woman i feel like i'm doing something bad here maybe we should just download some other model because there's gonna be too many woman references and i make it just i just end being bent for some reason okay i said yeah so let's scale the model a bit more it's kind of almost there so the scale geometry uh not the scale geometry just the geometry uh i think center just centering geometry but i'm not sure what's gonna happen if we have a couple of uh yeah something something really weird would happen guys shouldn't be doing that oh no we shouldn't be doing that i'm going to remove this plane that i've been adding at the debug so yeah well when we center it all the meshes that we had so for some reason they encoded the hands separately from the body and then the head is probably somewhere inside the body right now uh this is a complete random model so just a disclaimer it's not what i prepared to do right it's just it's just what happened when i downloaded the random model from the sketchup all right so geometry center is probably not the way to go but we can still use the model maybe just move it you know i'll scale it a bit more what's the topic today okay the topic today is this thing but with this cheese up wipe on it so right now we are bottom of the woman position eyes what the heck is happening why do i have a small dress here okay maybe we should take just just another simpler model because i have i have some well i've been doing some some gifs lately you've probably seen some of them like on twitter with the face stuff and i've been using the model for that one it's just this burbon simple model with one mesh and i think we better be off with that one so let's face chilby because the woman started to look crazy so it's going to be just face you'll be the and the only difference is that we only have one mesh there later we can exchange this model for something else let's just see so instead of scene processed i'm going to use face glb and well now we lost it because the scales and all this stuff is different probably i just scaled too much let's not scale anything yeah we should actually even make it bigger which kind of tells us that all the humans and women in particular are different different sizes and that's okay and that's okay okay it's not actually all mesh the o is already a mesh that's why i had that problem maybe just minus one so this is all fast is just to center the model maybe this time i actually can do the geometry center yeah so now we just have this center okay what else we could do here we could we could just replace the material of this mesh material equals this material and just so yeah so we are sure what we are working with the let's just output this all and the o is actually a mesh so just to mesh with the geometry and material and we just replace the material with shader material okay let's get going um kind of want to do it like this so right now without putting the yellow color for some reason and why is that should have been uv it's red looks like we don't have any uvs for this one this is weird this is weird i kind of want to start it with uvs but it doesn't really matter let's just output the normals first so now we have the mesh in its 3d space it's been colored with this fragment and vertex shaders so first of all i want to see the normal vectors so let's just get the normal vector we don't have normals what oh no i have to i had to set normals actually yeah we have normals now so now we could do the some basic lightning for whatever reason we would want to do that so yeah kind of lightning something like that and what the guys did here they actually put um like let's see the face let's get back to the face yeah so you could see that they are being animated one of the previous streams i actually did stuff kind of like that so i could just do for example instead of just outputting diff which is between 0 and 1 i can do this sign if multiplied by 10 let's say we have something like this that's already kind of suitable to do what they did and then we could just use some [Music] some patterns to fit that but that's not not the way that they did that actually i already downloaded the files called sky1 png a yeah so it looks like that the texture that you used on the website let's just try to add that one i'm gonna call this sky then i need to import that one so this is the texture that they're using to to create this kind of effect that's not all but detect it's back based on the texture we are getting there so we have the sky variable now and then i need to add it to my shader all right and then i can use it on my uvs if i had once which are absent in my model currently i want to start with those uvs but i can we can fake those uvs we don't really need to to put the to put the texture like an exact spot or an exact place it's just some kind of effect that looks nice on the model so let's see where do i go so i have the sky texture right now i don't have uvs so well i can at least bring back the plane just to test those uvs because i have uvs on my plane probably yeah here they are and now we can just do something like this if only my model had those uvs i would have the texture wrapped around this model well let's just let's just bring back that crazy model that we used before actually why not i'm just commend this i think we can do that scene processed and then instead of multiplying i'll bring back the old coefficient now we have a model now you can see how the texture is being wrapped there and i'll remove the geometry sensor also i think it's kind of nice and then somehow it all breaks apart so maybe i just can i can do this well kind of get in there it's too much yay i think we could also make it a bit bigger yeah like that that's enough okay and we can remove the plane now this model has some uvs which we can just easily see if we output the vuv so we have some uvs on this woman and we can wrap the texture around it and then i mean this model keep by calling this woman okay and then so we can wrap the texture around it and it's already look kind of uh yeah it looks kind of nice it's not exactly the effect we are looking for we can just add some noise then add some noise i'm gonna go with classic brown noise boom boom boom boom boom and then we can just add something to our uvs and distort the uvs this is going to be this noise i think it's it's changing between minus one and one so i can just multiply it by something small and then run the noise and the noise accepts uh yeah the back four and then the repetition i think that's too much but okay repetition can be just one and then here i'm going to use vuv multiplied by some big value then the time divided by some big value and then just zero so i got four numbers here four numbers here should be working for me but not yet because no match yeah because this is some weird noise function which requires some additional functions like these ones no that's not it noise no match never allowed function because it's c noise yeah now it's good now we see some kind of distortion here already probably because of that repetition part it's not really cool yeah so we can do something like this which is already art right what i think i did or what i know guys did that they mapped the normal vector because we still have the normal vector kind of this two uvs so right now we are wrapping this all with the uvs we could also do like like paste something we can do the fake uvs like fake uv which is equal to this is just has nothing to do with real life or uvs actually this is just like generating random numbers so first first two is gonna be the light coming from one side it's gonna be like this and then normal vector first uv coordinate and then the second uv coordinate is gonna be like minus one zero let's say one some other random vector it's like a light vector then we have some two random seem to be random values they might be negative so i'm gonna do the absolute function on them and then i think i can just use those uvs let's see it's still working so i can just use those uvs to do the texture mapping so instead of vuv i'm gonna use the fake uv uh yeah i need to output the actual texture so it's going to be some other kind of random wrapping of the texture over the model it still full of somewhat follows the shape of the model but yeah and you can you can imagine any kind of uvs that you can invent for your special occasion and to just for some effects and the uvs that the guys used to think this is they're just mapping the the normal vector three-dimensional normal vector into the two-dimensional uv coordinate stuff and i think it looked like like what yes how do you do that there are a bunch of ways to do that and the way that they use the i think this okay the first of all we are calculating some angle phi which is going to be a cos of the we normal y coordinate or you can point into the app and then another angle we're going to create is going to be the a10 angle of the normal x and the normal t i don't think it matters actually which what's the order and what's the sign even of those things because this is just kind of generating another fake uv stuff and then the the new fake uv you fake uv it's going to be two-dimensional stain and then we need to normalize both of these values and i think fees the aqueousness is just a cosine it's just between these values and then the second value i mean the first one is between minus p and minus pi and pi so that means that this value is going to be just plus pi so this is between 0 and 2 pi and now we need to divide this with two pi's right i think this should be it okay let's just visualize those fake uvs for a moment and see how they look like somewhat like this this kind of look like a lightning and this is actually one of the ways to implement some fake uh external image lightning and let's try to wrap our texture on those uvs now well i wouldn't say it looks a lot different but i think it's i like it a bit more well this particular model i think has non-continuous uvs or something like that because it's not really a beautiful model but still kind of nice okay we didn't actually need we didn't actually needed the uvs after all because like we implemented the fake uvs so the next thing we want to do maybe just 10 this whole repetition stuff this is all dependent on the model i bet the guys played with the models a bit and this model is a bit not quite good because because of the dress probably because of the body part okay so we kind of make the effect it's actually quite simple you can wrap any texture any random numbers and then you get something like beautiful and then you look closer at the model and it's beautiful and then we could also continually move our fake uvs so we can do something like the fake uv equals fract and then the fake qv plus time divided by four times divided by two so they move differently and then it's gonna continually move in one direction like all the time maybe it's too big of a thing this looks better well also to add some detail we can use some fake lightning like this [Music] i call this fresnel let's call it right now and then it's going to be the dot product of camera position let's see this is not for now i'm just calling this name well something is wrong with this model to be honest let's just get back to our gal gadot face i keep changing those model all the time mm-hmm i am position yes now you see that the we have this black thing on on the edge of the model and to amplify this i can do something like that like i could just use the power function but better now we have something on the edge and then i could i could do instead of just outputting this model i can do something like this it's gonna be alpha one and here i'm to mix the it's going to be mixing by the by this value and it's going to mix the white color and the rgb value of my texture and this is kind of cool you can see this it's a bit white on the edge but i want it to be the other way around no actually didn't want it to be the other way this was correct all along just didn't become too dark for some reason why why is it so dark now that's kind of cool and it looks almost like the mouth maeve website so what's wrong with mixing those values by the fresnel maybe it's negative or something let's just do this why does it become so dark any ideas guys and this model doesn't have uvs anymore right oh i like this actually like this even more than the one that i got before so i don't actually care why is it moving so far oh because i have this i'm moving the uvs with the time where do i have this fracked yeah right here it's kind of cool by itself so when the the distance is correct you can see this glow on the edge of the model so it's kind of what the guys did and i think just just just set the camera position it's too much so it's about faking the lighting it's not actually lightning or the reflections it's just faking some stuff i think it's pretty cool the way it looks right now this kind of glow in the model kind of like that one let's just just real fast uh see how the fake uv look like [Music] seems right this seems right okay just to test things out no so it's not going over there over the edge probably okay so now we have this uvs now we have the fresnel now we have this kind of look i think that's kind of weird why should i go for the pixel per pixel like the same stuff i think it's pretty cool okay so this is how they make the models and also it's they have a black background so it's just black background and now let's try to connect this one to the to the actual website so let's imagine that we have the couple of sections of the website where the model should be turned by some angle let's do that i have the style css let's first write the html it's going to be sum title be happy so just a real fast html coding i kind of want to see the model while i code feels good okay and i need three of those sections only one two three let's try to use some g-sub on these ones so first of all first of all i'm going to rename this thing into the module then i'm gonna import sketch from and then i need to run this sketch and the sketch used to be run by itself right here at the bottom so i'm going to run it now like this i should just probably restart it's all good so we have the html we have the canvas now and boom boom boom what's next so kind of debug purposes i'm gonna set some background on the body like gray one section is going to be i don't actually have to set the width and then let's play flex let's take the color let's set the border and high timing and height so now i have kind of a simple website with three sections and i want this head to be on the background and i want something to be animated while i scroll and to connect all those animations with the gsa so let's do that the the animation is in the container div so i'm gonna just real fast change it let's set the width and the height for those ones and that index for minus one so now we have text on top let's change the css a bit how do i reset the flex inside the container i forgot that that gonna be the old school guys and then some crazy font size because the crazier the font size the beautiful the more beautiful it looks like and let's make it dependent on the the height of something yeah just set this so it doesn't go too much over the size so now we have this size okay maybe the websites should be a bit bigger than that and the margins shouldn't be as big and actually like that so now we have three sections with some titles um and that's cool right but i want to connect that scroll to the 3g stuff in my model how do i do that well first of all let's let's do some gsup um module okay it should be all right yeah it's working so let's start connect stuff import gsa from also need scroll trigger and i also need the split actually i could download the cheese up peace up guys so kind to present me with the license to the modules now i have the all the business screen model files and then i could just download the stuff and because they are paid like you can just use them freely you need to buy them first and almost everybody's using the npm right now they invented some nice way to npm install those modules even like from from local file to do this i'm gonna just do the npm install and then this file name just install them i only do that to use this plate characters because i want to split the characters of my titles now so j sub split text i want to include this one too so it's called split text i probably just need to import this like this split text and then i need to register the plugins i think with the g sub it's usually about the register and the plugin also under your registration plugin it lost here this is a link to download this stuff i needed kind of a tutorial no it's not what i need where's the tutorial oh jsop installation page right i think they have some snippets here so i could just i could just get them so if you want to install the scroll trigger this is how i would uh import that one i also need a split text let's just copy paste all this stuff yeah it's easier to do this way okay so next thing i want to do i want to implement some simple json animation just so like faking the web page that we are doing like the the usual award winning websites now let's do this i don't need this i don't need these this anymore there we go have the beautiful website i want to use the split text module first and how do you use it well let's get the sections first i mean the titles of the sections so the titles equals i'm going to convert this one to array first and then document query selector oh yeah let's run it again okay all good so far and then i'm a bit chaotic here because i kind of want to keep some at least some it's not kind of beautiful like i'm not going to make it completely beautiful all right so we have some titles i wanted to animate now so first of all i'll create some simple animation i have do i have those titles yeah i have an array with those titles so i'm gonna um i'm gonna run loop on those and for each title i need to create the split text stuff so i'm gonna do this it's gonna be my split text new split text which i already have and then the title itself i think it accepts the dom module the dom element and then the type first and well let's see so right now we have all the titles separated into the characters you could actually do that with just your javascript i even wrote a module once that did exactly this with the words and characters but i think like because i have the g sub and i think this model is pretty much bulletproof i wanted to use this one so now i have this and i can do the the animation i had a bit of a cheat sheet for me like what kind of animation would look cool enough i think in this at this point it's it's better to do the the from and this thing i think it's just the charts well let's cancel log it but i bet it has the charge property and then i could do something like duration 0.5 stacker what else scales free this is going to be the from values like the letters would be animated from these values to their default values let's see it's kind of nice already don't you think so yeah so this is what you can do right like that and it's already looks cool the stagger always looking cool yeah something like that but the problem here that all those animations are working immediately so when i restart the page like the three and the second and third title they are being animated at the same time to fix this you could just do the scroll trigger well you could write some intersection observer and you can write some javascript detecting when something comes into the viewport but that's exactly the point of the scroll trigger thing and the scroll trigger could be what would be this exec dom element i think right this is split text this is the dom element that we are needing here the title so now they are starting to animate once they come into the scroll position right you see we animated them and when they come into the viewport the animation starts this is pretty pretty easy to do actually all those scrolling animation is just like exactly one line of code but this module is actually so extensive extensible i don't know it's it's so much more than that but let's let's maybe stop with it with the let's stop with that one and i need to connect the model to my scroll bar right so this is just the some kind of animations to do with the text and then i could do something with without stagger like i just wanted to do something real fast with that text but maybe i shouldn't maybe i shouldn't also i think it might look better maybe it's going to be better like this stagger is just making it animate like if you have an array and every next animation would start exactly this time delayed after the previous one so this is just a way of if i remove the stagger it's going to be like this if i set the stagger and if i set the stack even bigger it's going to be like this [Music] so just a way of cool looking stuff okay what else what else i wanted to do i wanted to connect my 3d stuff into this stuff with a scroll trigger and to do this well there are i think there are a couple of ways you could just introduce the fake jsof module so let's to be needing this sketch sketch close this then i want to do chase up to so let's just make some fake variable like object where a equals zero and then we're going to be animating the a the the o object to the a value one and we're going to be animating that one on scroll so i wanna i want to scroll trigger and i wanted the scroll trigger to set to something that is wrapping all the divs that i have so let's just do the wrap module so it shouldn't change anything just another div and then i'm going to use this div you can just write selectors here i'm going to be using this div just as the trigger for my animation and then when you using those animations i think you should have some triggers or is it like the other way uh how to enable the debug stuff all right doesn't really matter at this point but um oh yeah this is not a thin really important thing like we have all those animations are being run once and when we get back they're already there but if we put this scrub through here nothing really changed but for them to work i think with the scrub true i think you should you should put another toggle actions here and this says like what exactly should be should animation do when you get back to the scroll or you get forward after the animation like what should happen depending on the scroll i'll just write some nice values which probably this one what what animation should do when you get back this one what 3d animation could do when you scroll past it this one what should should animation do when you scrolling backwards through the animation something like this right now they're working as before and they're not going back okay i need to learn my scrap thing better oh yeah yeah yeah yeah this is what i'm doing wrong i have to put all those options into the scroll trigger so the trigger should be this and then this crop should be true and then the toggle actions should all be inside the scroll trigger yeah and right now we just connected this whole animation to the scroll bar you see when i'm scrolling it animated but what else we could do scrub true is just directly connecting your scroll position into the animation to the timeline of the animation but if we do this crop one we're gonna get some nice inertia here so we just stopped scrolling but it's still being animated to the position that i wanted to do so it's pretty cool actually this is really cool and this is what i want to do with my 3d model and this is why i'm going to this jsop scroll trigger this is why it was wrong all along because i have to wrap it i forgot to wrap it so you have to put all those options inside the scroll trigger now i have the scroller and and the scroller start and the end in the beginning of the animation and then i can i can have the the oncomplete i think maybe i think i have to put it here too let's output what do we have here inside the scroll trigger so right now we are scroll triggering the rep div which is the whole page and then we have something on update okay so let's see what's being updated there i'm going to scroll and i'm getting this scroll trigger thing and i have this progress of the scroll trigger object so the starting object is 0 25 which is not really cool and the the end is 0.75 which you can already kind of guess how to fix because this is because we are starting with the bottom part of the screen so we already scrolled past some of the animation but we can change that i think this is like this so let's check out the pro progress now okay so the progress starts with zero and when we scroll to the bottom it gets all the way to this point 66. uh oh because it's i i made the double start yeah okay what which one is my own updates thing hmm let's not end it's a bottom because it's the top and the bottom of the div this is just the keyboard that they're using okay so now it starts with zero and goes all the way to the one yeah so we finally made something from zero to one and this means and by the way i think they also have this snap function i'm not sure how it would work in this particular case let's just try this one it actually works perfectly so it just snaps us to the each of each of the sections it snaps in a light way you know it's not just hijacking the scroll now it's just you finish the scroll it waits a bit and then it scrolls to the next model one why is it 0.5 this is actually because have to be this so it snaps to the values of those progress bars and the progress uh have to be 0.5 because it's 3 minus 1 and 3 is the number of three the loneliest number no actually one is the longest number so just the title length kind of like this so now it snaps to the sections we have all those animations this is just you know like a couple of lines of code with the basic stuff and the last stuff that i'd like to do i want to expose the model here so when i did the model um when i export that i am adding the gldf scene i want to kind of want to do this this model equals gltfc and now inside this stuff i can just access it probably sketch model yeah and then self progress okay so the model is a group and we have the progress and what's left to do is just to set some stuff here so the sketch model is going to be equal notation y equals to multiplied by 2 multiplied by self progress yeah here we go we just connected the html scroll to this 3d model stuff and we scroll the model and then we could add the scrub here too so it's going to be with some inertia and it's looking even better so when i stop scrolling it still kind of moves a bit and then it snaps and it snaps with the 3d model involved here you can see so it's snapping with the 3d scene now it's actually pretty cool nice that's emotional that's not i'm not tired i'm just depressed sorry guys this is because of a new camera that you can see that i'm really tired and i'm real old okay okay so we are almost there i just wanted to add last thing i think you can run like this one i did with a fake object um yeah jsco everything is javascript these days so it's not really surprising so i can just do something like this like flat tail equals just up timeline and then i think i could just run scroll trigger by itself so like here i did something like with a bit of fake animation which also works kind of perfectly to me i could also do the sketch model equals math sign i think that's too much maybe the other way around i think you pretty much can play like any any kind of position with this model maybe i should make it bigger actually it's going to be nice let me fly into the space and then bring back here yeah but i wanted to show you the last thing that you can actually connect the timeline there so it's just to the documentation the scroll trigger i think you can initiate scroll trigger without any fake object and just documentation just do the scroll trigger by itself like this i'll just try to do this last thing so the trigger is going to be the rep the start is going to be top top and the end is going to be bottom bottom and then on update and the snap and then the scrap tool also i don't need the markers anymore so i can just hide this stuff now and the last thing i need to do here i can just uh the animation can set the animation which is going to be the timeline that i just created and this timeline i'm gonna commend the old stuff hey why am i still seeing the the animation why do i still see ah because it's already working because i stated the own updates function and it's just working just working like that you know just replaced it like that so i didn't i didn't even need that object right but i can do i can move those animation into the piece up let's just do that two it's gonna be animating rotation duration whatever and then the y is going to be like seven whatever any kind of rotation now i have this animation just comment let's just comment this and see if it's working it does not it doesn't okay this is a timeline this should be the timeline still not working what the hell sketch small rotation y um we are at the end i think this way is perfectly fine but i just wanted to see like how they connect the animation timeline instantly should be controlled by the scroll trigger only one animation is controlled but you can unravel your yeah yeah hmm sketch model rotation we have the sketch we have the model we have the rotation it should be working just fine i probably made some mistake because i'm stupid i don't know where probably something simple let's just scroll through scroll triggering timeline right like right here i think but i should i thought that this information is enough for the timeline to grab it it could work like that i just wanted to create it like separately this way is perfectly fine too and i could just play the timeline right here just stating the progress of the timeline so it's perfectly fine to do it like that too i just wanted to do the cool way and by the way we also have the velocity variable here says the scroll trigger is one of the coolest things that happened to the scroll thing yeah probably okay this is going to be the homework not going to be fixing it at the moment i think this way is perfectly fine got to read more about the documentation because i wanted to implement it like five different ways possible which is crazy always when i'm depressed and trying to put even more stress on myself yeah right now we have all the animations and the model is rotated and everything is connected and if you go into the into the stuff to see how it's been animated come on come on this is it's all just the transform values and it animates only the object that needs the animation i mean this stagger thing and then like the scene is being updated only when the scroll trigger is updating so it's pretty much win-win i think i can i can put this crop to five it's even more inertia i'm not sure what the value scrap scrap scrap value what are the possible values the amount of time in seconds that the playhead should take to catch up okay so it's five seconds is a lot to catch up to that one we can do that you can do here too the scrub like five seconds some crazy values i don't think it's five seconds for me now some reason maybe they have the maximum value or something like that well anyway it's pretty cool it's pretty cool so this is how you just connect this simply in one hour you make a 3d scene you write the shaders and then you implement the simple html css i think i i i did a good job hopefully i read a lot during this stream because it seems for me like i'm never doing enough stuff you can also play with the scroll triggers for those titles because right now they exactly at the scroll position the scroll position is not correct so like you have the partial animation here of this tiger so it's about to play with the when you want the animation to begin when you want it to the end yeah yeah of course you can of course you can apply the yeast to the thanks that's my crazy design skills okay because you can apply the ease into the 3d model but that but right now the model is connected to the scroll so kind of crazy to implement the isn't there because it's going to be the easing over easing because there is inertia in the scroll by itself so might be crazy to implement models let's just just download the model well to get some tutorials i think the blender guru count is pretty good i haven't tried it myself but a lot of people recommend that one so i probably should try that i think for judging by the looks it's pretty good if you want to draw models in blender yourself so well that's it this was pretty long stream it's pretty crazy i've been really stressed hope you guys had some fun at least why this is not easy nothing in life comes easy especially the cool stuff so yeah if you want you can go support me on patreon i'll continue so i can continue streaming and buying some new gear and do this stuff i'll do the doughnut maybe in 10 minutes when i'm not online so the camera actually the battery is actually good enough for a one hour stream it's pretty good i hope you like that one hope you like the streams if you want go support me if not just say thank you slap like on my videos please slap like it really means a lot and yeah i'm gonna change the view yeah i think i can see a lot i can see myself on the screen now with this new camera yeah so guys have a good day have a good night have a good everything have a good life do something good say some good words to someone please do that and wishing you a good sunday and see ya see you next week now maybe in two weeks next week i'm going to the parents so the next next two weeks in a fortnight cheers

Channel: Yuri Artiukh

Views: 12,217

Rating: 4.977695 out of 5

Keywords: threejs, webgl, triangle, tutorial, canvas, animation, ascii

Id: eiHBOOyXesw

Length: 73min 10sec (4390 seconds)

Published: Sun Sep 20 2020