---
title: "Tim Tries: TresJS with Alvaro Sabu"
description: "TresJS brings Three to the Vue ecosystem. This is the #timtries Series. Sometimes I try out new tech or web services for the first time. I give feedback as I go, in real-time."
date: "2023-03-19T15:52:33.000Z"
url: "https://timbenniks.dev/videos/misc-streams/006-d8ahncxgryg"
youtube_url: "https://www.youtube.com/watch?v=D8AhNcXgrYg"
playlist: "misc-streams"
image: "https://i.ytimg.com/vi/D8AhNcXgrYg/maxresdefault.jpg"
tags: ["frontend", "developer-experience", "media-production"]
---

# Tim Tries: TresJS with Alvaro Sabu

TresJS brings Three to the Vue ecosystem. This is the #timtries Series. Sometimes I try out new tech or web services for the first time. I give feedback as I go, in real-time.

Watch on YouTube: https://www.youtube.com/watch?v=D8AhNcXgrYg

## Transcript

we are live I like it all right so I think my tweet just went out let me just quickly check the jack because Twitter I don't trust it so much anymore lately okay we it worked right because I see the message that you sent me like two weeks ago as the the the new notification but then yeah all right anyways so we are live in fact and so this is the first time we are live streaming something called Tim Trice because I did this thing before back in the day where I would just try a new software without having ever touched it and to see hey how's the onboarding is it is it a cool thing to use how how fast is time to fail you things like that and now we decided to do it in a stream which means I can actually interview the person who built the thing and then he's going to see me struggle using the thing and today we're doing this with elviro so Alvaro introduce yourself very please hi everyone um first of all thanks for having me today here uh um be a developer um working as the devil and storyblock and I'm the author of tresias which is basically what we are going to try today exactly I am excited for this one um so how about what is stress JS let's start with the basics so tracias is a library that allows you to create 3D experiences right declaratively with view components you said a lot of things there that we have to unpack in a bit I think because the fact that it's declarative that that alone is super cool that you can do it with few is super cool but I feel like I interrupted you so please continue no no it's actually uh Fair because this is a pre-made like sentence that I found fancy to to explain what Dre says but earlier the motivation will be like I love 3D um since I was lucky that I wanted to um be a game developer or game designer and I have been learning for the last two years how to do 3D on the web so obviously 3DS came around uh it's a library on JavaScript really famous on top of webdl and you can do a lot of school stuff but eventually I saw that the only tools to do stuff was in react and there was yeah reactor Fiverr um which is obviously a great um inspiration for this uh project as well and from then on like I want to to have the same for The View Community yeah that works could create like these fancy like scenes with the view components uh so you can create the scene only using a view component and then passing an object that is also a view component and you can the same approach as you will do with UI right so you can reuse yourself great service to me like thinking back to when webgl came out I used webgl when 3GS didn't exist so I'm that was like low level stuff and like the simple things like making a thing and putting a texture on it or something that it was okay but it was really challenging and it almost felt a little bit like how you would do with canvas it's just true coding right and then 3GS came and made it so much simpler but this is my next question for you is 3DS basically the only one or is there also other stuff out there that rifles 3.js actually that's a good question like uh there are several resources for webgl but I guess the most famous and most used one is 3DS yeah there is a lot of community around and that's why you have evolved so much yeah I can also and like just use stuff that where the community is like just with like this react Library why not it's one of the biggest communities so everybody can support each other and so you built this in few now which means you can build components like you build HTML almost and then attach whatever 3D thing you want to build on these components and to me that's the magic because at least for me I'm one of those more old school person or people that like I need structure to build something I like I need like a little template like in view this is my view it's my controller it's really old now but that's kind of it works for me I I have this feeling of this is how it should be and so you did that and so I'm pretty excited um do you like okay what should we do shall I just literally or share my screen and get started or do you maybe want to show something first to set a bit of the context no I think we're gonna start because it's the the the page that we use for documentation can set the tone really quick okay so let's jump on it okay I'm just going to share my full screen and what you need to know as people who are watching this on purpose I have actually not prepared because I want to use this clean like of course um uh Alvaro has shown me hey this is what I've built but nothing else right so let's go to a browser here we go so you see my the URL at least Auto completed so I've been to the website but that's about it all right I'm guessing it's going to be just um actually can we see everything yeah we're good so get started right yeah noise oh I see some 3D whoa oh yeah I'll just scroll right yeah it's it's actually all connected to the mouse already which is cool I like that with 3DS that it's super easy to do that uh yeah uh this has the orbit controls and this is actually uh the cool thing is that I managed to get this scene inside of it press because this oh cool yeah exactly so is this like markdown that then became a component somehow yeah ah cool so the way to get started is literally just this yep okay so I think but we do we do we do this in few or in next uh right now we are working on the next module but uh let's do it plain view oh yeah I see that here okay so um I always forget how to get started with the Plain View component maybe we can create a bit uh like a bit app with you npx uh create bit isn't it something like this do you have a MPX oh yes of course but I don't think it's this should we always forget this stuff we can also like it will be nice to show how you install it um but there is also a starter that you can use you know what let's go for the starter yeah so where would I find that okay it's in the repo uh so if you go to GitHub I don't have the I don't have the link in the documentation because uh it's uh is closed yet but if you go to the GitHub there is one uh starter I think he needs this one the in the same aha the same Library as stress yes so this is like a one that I'm using for YouTube videos that there should be a starter one yes okay we get this one that's actually nice so we have something without the the full scaffolding basically yeah exactly it's be directly latest version so it should be okay so let's quickly install some stuff I'm assuming it's not going to be that much there is a cool command that is called npx digit to initialize the public starters from GitHub oh shall we try that instead or well it's gone yeah yeah it's not that much okay so this is started it's a little bit more opinionated so I have like my prettier and stuff oh yeah cool feel free to remove whatever you don't need but this beat okay yeah so we just I have this okay so we just go yarn deaf and go to the Local Host and here we go we have something I like it nice and actually something funny is that now it looks darker because uh 3DS just released a new version that they remove it uh the physical incorrect lights and it's showing direct leader here so without the need of deploying again is the latest version of tree oh that's cool okay so shall we just have a look at what this looks like in code yeah okay so I I'm assuming it's just okay so you actually have an experienced component here okay and what I like is that I'm seeing typescript that is cool and so does that mean that whatever comes out of this stress JS thing or the orbit controls that all of this stuff it kind of knows what to do with it because of typescript actually this version like this is a version one right so um you remember I put in the in the chat like in in the communication Twitter that will be a surprise today ah yes it has to do with typescript because um to give an explanation a little bit how this work um maybe we can go to the main TS where we are installing the plugin right yeah so here we are taking tests from the three uh yes core and we're installing it like we will do with any other view plugin right exactly so we are installing in there and then the stress yes does the magic so it creates all the components in runtime yeah so that means that right now there is no type definition for each one of the components that are made from the tree instance so because they're all on trash dot something I assume exactly like uh you have the three instance of the latest version of tree and this is generating components based on that yeah okay so if you go to the experience for example okay let's have a look at what all this is so you're giving your initial state and so this state is basically just the options you're giving to the basics of 3GS right do a renderer yeah so that that dress canvas component you see there that's the one that handles the renderer so this creates a webgl render and then all the components that you pass the slots are added to that render so okay if you remember in 3D like there are three um really important uh stuff to create a scene right you need the render which is the element of the canvas to render on top of it yeah and you need to create a scene and a camera yeah those are the core ones so that's why we have this stress perspective camera and this stresses scene exactly and so a quick question before we dive in like this is a reactive yeah not variable right so does that mean that when I set Shadows to false will it automatically update the state and then this re-render somehow in the trust canvas yes okay because it's it's native and it's done on purpose to do that but one thing that is important in in 3D in general is that it's running a loop so if you go to the to the actual example in the browser we can amplify it a little bit better so right here you see that we can move around we can assume we can see like animated right exactly we're basically moving the camera in this yeah I imagine I think they call this like a game Loop or something right it just runs at get a request animation frame 60 frames per second and every frame that it renders it just looks at hey where did you Pan the camera let me render it that way exactly okay cool so that will be the question like viewer activities based on proxies yeah so whenever we're dealing with something that updates the renderer like the scene the render that the updates constantly if we use reactivity it will be way way is lower now it will drop the FF FPS count to the to the ground yeah because what it's going to do is update the reactive property 60 times per second which is pretty insane for reactive stuff there's no need for it right like to refer this kind of game loops and rendering they are not meant to be uh reactive in the way we think in reactivity for View so where can I hacking using View and and something that doesn't need that reactivity in the same place yeah but you could potentially do this without that game Loop right you can just render a 3D thing and that's it for the canvas you will need to update the canvas every time so that's when it comes um expensive so what what we actually did in inside of the inside of you like instead of the three campus and so on is using shallow reactive okay so Shadow reactive is great because it maintains the level of reactivity to react to the things that you need but if things are getting updated like a position inside of one of the objects then it doesn't trigger so that uh it continue to have been performed that's very interesting and you can see these are like proper few components that's so cool you can just adapt tools yeah you can actually use the devtools and just look at like the camera wait can we look at the camera yeah oh yeah here we go now so if I do this okay so these are just the initial settings right so when I now change this this does not get updated or no no um this one now with the new version might be um because there you're seeing the props that you're passing to as attributes exactly yeah I'm just quickly checking because we're getting some questions I think oh nice ah so we have uh jiri what up dude nice to see you oh and he's actually helping us look at that we didn't see it because I was sharing my screen and we have Marcus as well what's up dude I love that R basically our colleague speakers are just joining us here yeah we like this all right we're gonna go back and okay so what would be the next step what what do you think is a cool thing to do actually we can load um well before before we load something fancy let's talk about uh the message which are the objects right so we have like the Press canvas the perspective camera and the scene now you can add the stuff to the scene so we can add a mesh with a geometry of a cone with the material in this case it's like a two Niche material is like uh you know seller games yeah yeah exactly a while so it's like this tunish uh kind of material and so on and these are the three objects that represent like reflects The Branding of of stress yes as the base uh maybe we can create one from scratch so you can remove them all so before we dive into that I have a quick question on this one right so let's say we make a mesh and give a position stuff like that yeah give it some Shadow so there's a prop in here that says okay this is my cone that I just created let me create a cone this is the geometry of it and then I add a material and so this material applies to this cone which then together sit in this group right does it always work like that if I now actually add something after this well that then also be applied to the first cone or could we have multiple cones in one mesh that's the thing um so the waist is built is that it works exactly the same as it will work if you do plain three years yes okay so in three years you normally need to create a mesh and the mesh will have two properties as an argument they are all uh classes they're all instances oh yeah so it's like a mesh dot add and then you add a thing that you just instantiated like a cone exactly so one of the parameters is the geometry and another parameter is the material okay and so you just did a nice way to like amplify that or template device somehow exactly then you can pass it as a component in a slot which is cool so let's do let's make a mesh okay what do I add to that for now nothing okay I like it simple so what was the next one what geometry would you like to do uh let's let's make a sphere okay that's fair so the good thing on something that we wanted to achieve is that you don't need documentation to know what kind of geometry you can put here you can go to the 3DS uh documentation or having your code in plane 3DS and know what to put here with the prefix of stress okay that's one is sphere geometry it will be just like that the sphere geometry in camel case shooting it now I kind of just wanted to auto complete this for me okay we're gonna talk about that yeah I know because I cannot type but it's really it's really nice to see this because this is the pain point that the users are having and imagine because I'm not that good at this kind of stuff so I just now go to the 3Gs docs and say so it's literally that one right yeah I think I type this correctly in the end yeah if we look at these dogs this is basically what we're going to add to it right yes those are the arguments so um if there is a special property called dot uh two dots like property in view arcs like arguments uh-huh and you pass an array that one like this yes and so this is essentially just whatever you push into this kind of new um class whatever this is those are the arcs that you push so it's just a really nice and easy mapper into this so now it's probably not showing that much right because we didn't actually give it anything like there's no look to it yet now we only put the geometry we need to Define like how the geometry will look which is basically the material can I just go like this yeah oh that's nice so we you can actually get everything from here yeah so if I wanted to add a color like that how would that work also like this it can be like that because the the mesh basic material if you go to the three three years documentation you can see there is also an argument that you can pass yeah exactly but we can pass it as a property as well I like that ah yeah property because uh Tres yes does a lot of magic for you so if you wanted to do it the other way around you will need to create the color with the instance creator that they have like oh yeah exactly so you do this behind the scenes somehow yeah and so this would work uh I think you need to put it in the string the oh no it's okay it's okay it should work yeah because if I do this it tries to do this as a function somehow okay let's see hmm what happened I don't know um I wrote it like this oh does it need to have the mesh bang or do we have to go like this no you you can put a like a color instead and it will work maybe less about it uh you have the transcript take out the Press group oh maybe it's actually the position yeah good way okay and now I see that the look it has like a position the camera yeah so maybe we can take out the look at oh yeah because it has a certain thing it looks at and it might just be missing our mesh the thing is I have not set up my mesh to have oh there is geometry actually in it okay so it should see this this is your geometry oh but what let how about let's have a look at this starter and see what you had in that because maybe I'm just missing something all right so what you added is just this like if you copy and paste one of those let's just try and I'll get the group also we go back to the look at so what did I okay just the group there we go okay that oh okay so now let's make this into and we'll I'm just gonna grab this one so I know it looks good it does not like the sphere at all somehow it's fair geometry yeah but you have that in this one yeah yeah exactly I have in the last one oh look you don't have any arcs maybe that's it okay we'll learn as we go man I like it it's okay that this is what the the user are gonna find when they're using it so you know what's interesting about this is that if you do 3GS even if you're like experienced you'll still have these issues I think that's nothing to do with trash GS at all it's just having to know what kind of properties exist kind of thing you know what's the the biggest one at the beginning like you are not gonna see anything is that the position of the camera is always zero zero zero so if you don't put the position you're gonna be inside of the object and since the object oh you have to zoom it out somehow right yep that happens a lot oh yeah but like that's what like you need to somehow do something that has smart defaults but not stupid smart defaults and so but it's really hard you cannot make that decision because if you say my position is always going to be 777 but in 3DS it's never like that then you made an assumption and then 3GS developers are not going to like what you do because it doesn't react the same so you kind of just have to qualify what they do yeah I really didn't like about uh reactor fiber I use it a lot um is that they made a lot of encoding uh color aspects for you and the camera they do this Zoom as well so it was like okay I I feel I don't have control as I will have it normally in three years yeah so you kind of me you you kind of just did less kind of smart defaults but just went with how 3DS would do it so you can probably help me with this like right now it's not at the center right it's actually off center is that just this is there possessions so but we will need a reference because right now it's floating in somewhere so we don't know where the origin is right no actually I don't know at all especially because we took a sphere it's even harder so one way we can see it is that you can add a component uh that creates an access access helper cool so would we do that next to the controls uh no I will do it uh inside of the scene because everything um needs to be inside of the scene to work okay so how do I call this um access press access helper like this uh yeah it should be access yeah let me search for it like this is helper three yes oops not like that okay so can you check in the in the um in the locks I will so let's just go to the docsoft here where's your algolia search I don't have a joke I okay I can imagine that that would help a lot okay so it's this one right here it's this one ah that that one right there um so I'm just gonna steal it from here yeah ah because it's not with uh I I saw it is in the end is access helper which without an eye oh yeah all the things that um typescript would do for you my friend we don't realize how much would depend on on typescript until we do something like this exactly okay so this is cool so now you can see that it's actually up a little bit and that's probably because of this so if we just do this it's it's gonna be like at the zero point oh no that's interesting because of the group you have a group you see um it's starting to become more normal now okay so now it's over the axis Helper and here I could just say okay go up a little bit mm-hmm there we go that's cool dude I think we might be getting ready to to do some more fancy stuff I think I think we can animate it oh really shall we just make a bounce yeah we can make it like do in the in the y-axis to move yeah I like it because that that comes a part that we can actually uh see from here so uh if you go up there should be something about basic animations in examples let's see basic animations I love the stack Blitz the biggest the web container is so fast it's crazy just imagine grade for this like great I I'm been talking with the stack this people a lot um we might have a surprise for you soon but um basically all the demos are in the stack Blitz um so I can put them everywhere it's so easy okay so shall we just look at the what code is used here for this one as you prefer so um for that one we are going to actually use a compostable because we are going to learn how to modify a instance that we create in the script okay should I what do I copy from here to make that work now we can do it um directly on the code if you want okay here we go so what do we need so you need to import um use I have from the from the core my cat is a snoring so maybe he will make some noise not heard it yet but it's only cute so we're good render load that one right cool okay so we need to uh use like cons like the constructing and get um function that is called on Loop like this between brackets to the constructed um I'm going to just here oh do we need to get this like that yeah from the air compressor yeah okay that makes sense so what what is this right uh you remember we talked about the game Loop exactly this is basically the game Loop so this is your hook into if a cycle in the loop happens then on Loop function is likely fired right yeah Okay and like in each other animation frame and this is something that uh What uh contribute like his uh uh open source contributor for view use so we are actually using Vu use rough composable under the hood oh that's very cool I like that all right so how do we hook into that Loop and make this thing move so you remember that we were talking about the properties and making reactive right so um that could work but the recommended way of doing is that we take the actual 3DS instance from the template oh so what we do is make a ref do this mesh and then give that ref to 3GS and do something yeah okay that makes sense to me in this part template refs were super useful for this I think I saw that here also like where did you do that oh yeah this yeah oh but if you want to do a ref you have to sum oh yeah you have to do this right you had to but I called it this is where the script setup is the way of doing it in the scripts I do this is cool oh but I need to load this from a few I think yes both of them this is the type and this is the the actual side okay I use shallow ref because it's again shallow so it will be more performant but in this case it doesn't matter if you use riff oh but this let's just use whatever you think is the best so we have the sphere and we have the loop so now it's just a matter of yeah I was just let me just copy this because I cannot type but then we can we can do whatever we need to do now if if the thing has a value so what I'm actually interested in is this we might be destroying my console now because of the game Loop yeah you have to be mindful will this destroy something no but try to pause it because it's gonna run that every frame per second yeah that's going to be painful but let's let's go uh if they didn't get their reference swear that value the loop is running and it has a ref in the mesh okay let's see oh wait where do we actually it's on the mesh here maybe it has to be this I don't know hmm let's see what is the difference here how is it done here okay so you ref the mesh itself you have a ref and then on Loop you just look if it has something and you add it um this is I think the same it's weird that is that this project that you have local is exactly the same on the on the stack bits I don't know why it's happening okay what what you can just do is this you can watch it and what we can check now is to see if it actually gives us a 3Gs instance it doesn't now because you need to watch it uh at the beginning it will be no oh because of course after once it actually mounts and does the things it becomes available yeah but we know this the sphere is a thing because it's actually rendered on the screen yeah we should give you the the the mesh how about we just try this maybe the loop is not running oh it certainly is okay yeah and let's give you the Delta between each frame and the accumulated time oh I like it and you see it hates it because it has to render to the console it cannot do the animation anymore I I destroyed so many consoles with this yeah yeah I've been there oh wait let's just kill that for a sec okay we're back in Action Okay cool so it's actually somehow doesn't know what the sphere is do we need to make the loop first and then it doesn't matter what we can do to test if it's working is actually um using watch effect we can console log to see whenever is mounted so what effect I never use that I actually just do generally I just do this ah watch and then probably sphere something like this I forgot what what's effect is great because you can return uh um like a function and if you're using something that is reactive inside of it like console log it for example it will just put it there so it works like this says you console log is for your value you should yeah watch effect makes me think about react so much but let's not go there it's kind of the same yeah like I know what you mean okay so it really it's it's not happy okay everything decided not to work today what's happening I love that because this is Tim price it has to break this is the way to go because then we can explain it exactly so do I have Shadow ref do I have all the things so sphere is a thing so now it should ah okay okay so value is nil but at least it gives us um the fact that it's a ref so do we just do literally this I don't know man I'm just doing something crazy if you do as a sphere that um how you call it a sphere the value instead of a sphere it gives you a null as well yeah because failure literally is no so maybe something about the mesh not returning the did I maybe make a mistake here but is this fear that is causing a lot of issues right yeah should we just you know what I have an idea oh maybe because it doesn't have arguments or something no it shouldn't be that LOL nope it's just it's just nope today what what version is using in the package Jason okay what are we using okay um I'm just gonna check the fairy variants oh you want to go to the latest let's do it that's a good reminder that I had today the starter then good there's always something about updating your starters I work at a startup and we have to do that every release let's do this how it goes let me just quickly check it you full underestimate how much work is behind uh open source project that actually work oh man it's so complicated sometimes um wait Alexander oh yeah let me just quickly what's up Alexander thank you for watching okay let's have a look so we are now at one like the latest of everything oh we're not at the latest of feat and typescript I don't think that's a big deal right no it shouldn't be not for this at least okay so I restarted the thing what did I yeah okay it's running again hmm and so we want to have the value maybe we shouldn't maybe we can just use a normal ref rather than a shallow if something decides to break oh it's really not happy always let's do one last thing before going crazy um let's actually copy the the one in the in the um stack Blitz completely I like that so this whole thing yeah the whole thing I like it okay and it works okay so let's must contain uh perspective oh yeah it gives us an error somehow yeah but that's one that I had to remove because we actually have the camera controller inside of the scene rather than uh on top of this oh okay okay okay but that's all right yeah you actually have the camera inside the scene yeah and so in this case like the canvas it's just 100 of the oh here window size okay that was my question yeah that's a recent change that I did um to make it responsive whenever you are creating like um how do you call it uh a demo for a web page that you might not have the entire screen I have that is responsive like this exactly it's very cool you see that um refresh request animation frame has a bit of trouble when you resize yeah and it's fine because it's expensive exactly all right so let's see if we did anything differently I see it the same though it looks the same to me my friend um but I believe it it's cool I think it's probably something with the scene that it somehow couldn't get the ref can we put it like side to side just to say I'm curious because if this is happening here a lot of people might have in this issue and the problem will be that they will get disappointed and not continue using it and that's something that we don't we don't want okay so we are back to what I had okay let's see so this is the demo and this is what I coded okay okay so yeah oh dude do you think maybe it's the canvas props that we're giving it because here you just do some simple things well it should be the same because we were using B Vine though um that will be interesting let's go down to see the actual uh a little bit the other one camera [Music] it looks the same the only thing I can imagine is that it's inside of a group if you remove the group oh and I also just put the camera inside that might affect but no I think it's a group oh that's a good bug if we found the bug I'm happy because this is Tim price oh and it works okay cool that was it damn you see it's complex like uh to be fair you don't know how many hours of the book in this kind of things um I I spent like most of the time the actual idea was quick but making sure that before you go for real right and then it starts to happen oh I think I might have removed the camera look lol yeah you removed it hey cameras here let's go and remove the group the group yeah and let's not control lock the value of the the level now we can do something right we can animate it okay we're ready to go so we have the Delta of the change so what I imagine is that well what is that Delta exactly so Delta is the time between two frames ah okay so 13 milliseconds or 16 or something really small yeah yeah hopefully if we're at 60 frames per second it's 16 milliseconds per frame so what we could do is probably do something like this I'm gonna go from whatever my brain tells me yes I don't know you can go does it make sense that's not good to start let's see what what does oh maybe I can just do this now it goes It goes down forever basically oh it says nothing oh it cannot read the why but Boston oh yeah okay so oh look at that okay it's gonna go forever right yeah yeah okay the idea is there but we need to Max it somehow you can use that this is where you actually use trigonometry here we go so if you use a plus sign and you use a math uh dot scene uh like sine wave do we do it here no at the end like uh with the delta oh boy school is coming back let's see what happens oh so we just make a sinus okay so but if we do a sinus it should go back up yeah uh eventually like it depends on the Delta though is it is how how fast it will do it okay we might have to control our sinus curve like now is is it slowing down and it probably will come back again yeah it's slowing down for sure let me see if I have one with parameters that will work yeah it's good okay anyways it's good fun I love this oh well with the mats and um wait let me see something wait animations I have it in in the stack place today I'm gonna add a few other ones also just for fun while you Loop that up you're just gonna oh not this one this one and now you change the rotation right yeah I did rotation and what else did I do the C value I don't actually know what that does this is the depth yeah this is cool is x y and C towards you exactly so we were trying to use mad sign yes okay so actually the reason is that we are using it with Delta so if we use it with uh without the Plus or the AHA put it back in so instead of that remove that the the minus sign okay and inside of the scene use elapsed and multiply it for 0.1 Maybe yeah otherwise it goes too fast so it's a tenth of the elapsed frame oh oh we're not adding or removing anything now it's literally just how the science would work okay wait it is going up actually yeah but a little bit no maybe we need to multiply the amplitude so that that will control uh how fast but if you multiply the whole thing by uh um three for example it should be more um like this yes okay now it's feasible look actually um hot reloading is happening it just renders another thing yeah that was an issue that we're constantly having um because it's really complex we're using bid okay for the hot model replacement so certain things that they can do like uh Center properties that they change when we have a struggle from the beginning to have a proper HMR we are actually have like have a discussion on the GitHub yeah solve this because this is really tricky to me I would just be very crude and say each HMR that you do refresh yeah but that's not nice right that's pretty cool if you like we want to be cool um so yeah I mean the rule of thumb if it doesn't refresh what you need yes refresh it but uh we want to get into the point that is nominated it would be super cool if you're changing colors and textures for example that it just reapplies that texture to whatever sphere or whatever you have in HMR that would be super super cool the complexity comes with the disposal of um the objects yeah because you you need to remove them all from the scene and then well you basically just have to do scene remove and scene at in the state that it was correct but it depends where you did the change because if you did the change in the script it's different from the template oh man I don't think I want to have your job it's really hard I mean this this uh something that for example I don't know if I'm pronouncing it correctly uh agile is having with the library as well because yeah I took this with Paddock like how to differentiate whenever the change is done in the template yeah or in the script deck um I wouldn't actually know because but I haven't gone deep into that to be fair well since it's framework agnostic is something that it needs to be done by the view vid plug-in view yeah I can imagine in here you can make some sort of plug-in where you can hook into it yeah so um time is flying I wanna do like 10 more minutes so what do you think is the best do we chat about your typescript stuff or do we actually build something else what would you maybe we can copy and paste something else so you can see it uh yeah I like that let's just do a really one cool thing yeah like a model that somebody can get from internet ah okay so how do we do that you see that there is one called load models yeah oh let's grab this one let's let's let's wait for it to run yeah well we can show it here actually instead of trying to put it in oh yeah exactly this is all this is cool this is my youth man I know a lot of nostalgia there I remember when this game came out on the PlayStation one I bought it I did not put the controller down for a long time it was my favorite like my favorite ever um I actually bought it on the switch it's not even my switch it's my wife's switch when she doesn't use it I play Crash Bandicoot the four one or the the previous ones no no I bought like the first three games for like 20 bucks or something yeah really good so the good thing is that you can go in a sketch Fab where I got this model I have it in a specific uh place like in a in a gltf so dldf is like a open source kind of Json file for models and there are several ways you can add it in this example we're using the use loader and passing the eltf loader for from three years ah exactly this is amazing well but this is like a pretty big file it is that's why we use compressed oh this is this must be some sort of compressed approach but with this gltf loader literally just comes from 3GS yeah from one of the example which is not ideal you can see that you need to add the three examples and that's not true shakable it's a problem it's one big thing essentially so what we did if you do a scroll down outside of the stack Blitz this is the way with uh with the core package okay oh this is using the core package yeah so this is this is relatively light actually doing it this way is it how you will do it in three years playing and so you created a basically a composable for and you add a loader and whatever you want to load and it just takes care of it yeah for you and it creates an await which is really important because you can use suspense yeah because with suspense you can even have like models loading and stuff that's cool exactly that's a perfect example but oh and so basically this this thing becomes a mesh yeah and you bind that scene to the mesh like this yeah of course because it's enthusiasts this makes sense it's verbose that's yeah I like that this makes sense to me I could use this but you're gonna like this so there is an extra package which is more to be a community package which is so the joke is really bad is Tres sientos 300. and and nice so that he has to create abstractions that um simplifies the life whatever whoever is using dress right and there is a composable and a component directly if you want to use um models from the ldf yeah like this yeah it's just a component and so all the the stuff that is not for the core it just goes into shendos yes I like that avoid having that much bundle ah and so you basically just grab a component that shows this thing and then a pause so you don't need a loader yeah and what is Draco Draco is a compression tool under the cube okay okay it's a crazy thing to to the same topic that you were talking like the gltf is Big it comes yes oh that's very cool that and that happens on build I imagine yeah ah the suspense nice now for everything that any composable that use a weight you need to put suspense and it will for textures for everything um if I wanted to basically just build my personal website and add a bit of like a 3D thing in it how can I make that performance for core web titles that's a really nice question so um right now I'm working on pre-loading okay oh that's nice that's a feature that a reactor Fiverr has that I really like is that you can pre-load the assets so is that in as easy as put a prefetch stack in your head or will you actually add a preloader hook somehow or composable is that like it will be part of this compostable or maybe I'll secondary composable uh it depends to have like a reactive property returning the the percentage of how far it's pre-loaded for example that would be one idea um that's something that I want to achieve because I think it's important that the 3DS scenes are performing yes because what I'm thinking is maybe we can do some sort of like I was thinking let's say my hero component is actually something in 3D but really like nice and small easy design it could actually be an image and the moment you start interacting with the page it loads trust yes puts the stuff in but while you actually go to the page it actually preloads some stuff behind the scenes maybe in a canvas off screen or maybe in a service worker or something but that's pretty cool to do like a nice 3D model or something fun I can put in my website it's as important that the 3D model is um I can help you with that uh if you go to the 3D software um to optimize it because it depends how many triangles oh yeah exactly actually what I should do is make My Little My Own logo like app you use always use a cab man uh that will be a cool 3D model like I could actually make this logo in 3D somehow yeah totally look there's hats everywhere that yeah pretty so to be honest if I wanted to do like a like it's like my logo it's like a sign and it's a little bit thicker so you can move it a bit like this and you see a bit of Shine from the light you know what I would do I would go to after effects make the whole thing beautiful output 16 frames and just Loop the frames this is my old school heart when we didn't have webgl yet man that's what I used to do like pre-load some assets and just run them so I don't know how we are about time oh we're good let's talk about this typescript thing I think that's important that's really important because um to like to to also communicate to the community like um I haven't done this with a small team and fairly uh like a small time so we are iterating a lot right now and we want to solve the issues that we are seeing like these issues that you had today like typescript or things not showing how to better give the user knowledge of why this happened right exactly because if you don't know 3GS and you still want to do this actually telling you hey you can choose a sphere or a cone or something like that that simple thing or like a type of texture or type of color if it just Auto completes that would make a world of change exactly now and it's important because it three at three years in general is not an easy thing no it's not so uh if we can help with that uh the better because I struggle as well in in their time I don't know if I'm sharing the uh here we go yeah nice here we go so here I'm working basically in a POC so funny story um I was talking with Daniel the other day Daniel you might all know him um uh thanks a lot Daniel because he always jumped to help me um and take care of the community so we were working on the next module which uh is coming so in that place we were starting to use the nuts kit exactly uh Daniel wrote so we were using the the nox kit to create virtual components on build time okay okay okay so I would import them all those kind of things and we'll start discussing like okay but you have this side effect of the wrapper because you have a plugin you have some uh providing Jack there are going to be side effects it's not reshakable yeah yeah yeah yeah so I've been talking with a lot of contributors especially Gile and we talk about generating them on build time so generating them on build them is basically what you see here so so it looks at whatever Imports you used and then it just generated into the bundle correct so it creates a typescript file with the component here that is tree shakeable okay and it's properly typed so you will have typescript and it simplifies so much how you create the the components without the hacking because in the other place like in the previous version we were hacking a lot the B nodes like crazy badly oh really yeah I mean I don't know how to do a custom render on how to reconciliate the view one with the other one that's basically it reactive fiber reactive fiber is a custom renderer with a Rec installation layer with react you're crazy is no that that's on our level I don't get to that level you can definitely do it because then you can actually make you can stop using proxies for example and somehow do something in that game loop with the reactivity but that's pretty crazy it's fun though it's gonna be a fun challenge I have to admit I don't have the knowledge yet to do that but I don't say uh never so maybe we will have it in the future for now something that we want to do is create an own build time so we have nice typescript yeah and it's true shakable so you no longer need a app um like a plugin you can go directly uh to the app View and you can import whatever you need exactly this is cool though this makes it feel like a little bit and especially when you have next later on it just exists you don't even have to import it will just autocomplete for you that's crazy and you can see that these ones have some kind of typing it needs to be refined but it has stipend that's cool so why is it complaining uh because I'm taking the original like something that is really tricky is that the 3Gs library is not done in typescript aha they need some work they need that external library that uh their react people is using and um that makes it difficult because right now for example I don't have the updated types for the latest version so they don't ship with types so somebody else ships the types oh that's crazy that's one of the pain points of three so we should all be tweeting the creator of 3DS to just typescript the thing it should but I I understand that it's also a huge project yeah that's crazy and they already have all the world country but yeah if we can make like a I don't know like a contribution to making in typescript that will be amazing so last question if I now embed like even the smallest thing let's say just a little 3D animation on my page how big will my bundle be if I just add that with this approach of the new version uh it will be shakable so if we're oh great Max module and we only use the components like imported components that will be through shakable then it will be super small the but it's still 3GS complete right because that's not tree shakeable or is it three years per se no you will have you will have uh you will have the weight of uh three years I don't know like that's a good question if three years I think it did I don't think it is but the last time I used it it wasn't but that's too long ago but what we tended to do is just we would actually lazy load 3GS in and once it was in only then initiate other things and but it's it's a lot of hacking around kind of no but I I do think the history Shaker but nowadays but it's a good question because if 3DS is tree shakable and your packages and you put it in the next module and you use all their defaults it's going to be super super performant that's interesting I like it and then if you add your preloading even better it is it is too shakable because inside we are not importing the whole uh tree we are importing only the the things we need so yeah it's true cycle oh cool so you just have their core of the basic functionalities and then just certain things about meshes or things about materials or whatever that will be more tricky for sientos so uh that's why where it needs to work in in core but if you want a better developer experience that you have since wow there's so much to unpack here I like it so I have um I used to work for Red Bull back in the day and basically what we did we filmed a guy on a motorcycle in but we didn't have 360 cameras back in the day so it was like six cameras on his head basically and then he would write and then go off like mountain and then just made like a big Spin and then land again want to build in with trash yet obviously get the 360 feel and then play it in the browser so we can actually pan around while the bike does all the praise dance it should be able to Bear around the three okay can I build that in SGS yeah it's possible because we will use uh two or sphere number three yeah around the camera the camera is on zero the stair is like minus around the camera and you project on the inside of the swear you project the video it has the right like that should be possible with like America projection or something right yeah with the right casting as well there are some techniques with right casting that we can use can you do textures as videos nowadays I imagine you can I I actually saw like I really following the the real Community with a reactor fiber because they are really Advanced like nowadays they're doing a lot of cool stuff and I saw some videos projected on stuff and even web pages because yeah no like for AR and VR it's not yet it's not just supported by dress but I do have uh somebody to ask it and I'm planning of course to have you know it could be pretty interesting to remember what Google brought out or what I think it was a long time ago but you can put your mobile phone in a piece of cardboard and it has two like little lenses from plastic in it you can look through it and then do this and it feels like a three-day world because it tricks your eyes somehow and I think we could do something like that with trash yes sorry I love it I'm ready to go we can do a lot of showcase like cool stuff with it I think what we should try to get is maybe free video footage it's 3D films or 360 degrees and then somehow figure out a way to apply that to a sphere or a cube or whatever or cut it up ourselves and then see if we can do that stuff because that's so much fun I mean if it's something that you said as a property on the instance in 3DS or passing as an argument we can pass it exactly you just you literally GS in a nice way so we should be able to do it all right I think that will conclude our stream I just gave myself and I'm very excited here I love it foreign I like it so where do people find you beforehand you can find me in Twitter as at Alvaro same name for hot for everything so you can find me there and yeah all press yes all right dude thank you so much for your time because I know you were supposed to be live streaming yourself my stream which I love that so I think so much and I'll speak to you soon man cheers thank you for having me