Can GPT-4 Build a Solar System in Three.js?

--- type: transcript date: 2023-03-30 youtube_id: 85xFh2SPWfc --- # Transcript: Can GPT-4 Build a Solar System in Three.js? welcome back in this video I wanted to take a bit of an experimental approach to building out a web app using chat GPT and gpt4 so I'm looking to build out an application with 3js which I'm not particularly familiar with I may have done some very very simple examples but outside of that I really do not know how the library works so I want to see how I can leverage chat GPT and gpd4 to build out an application knowing I have been a web developer for a number of years now but I just have not had the chance to touch this Library yet so I want to see how easy it is with gpt4 let's see what sort of prompts it handles well and from there we'll see what we can work with so a little bit of my setup so I'm going to have vs code I'm going to be using a GitHub copilot within it I'm likely not going to be leveraging that as much as gpd4 the focus for this really is on gpt4 and seeing what it can open for us and how we can and leverage it especially you know for libraries that we we don't necessarily know so this is a bit of a raw demo of my experience using gpd4 so we have our vs code we have our live environment so I have the live server extension here and then we have gpd4 here and then we also have the I'm going to leverage the default GPT 3.5 if we need considering there is a cap so without further Ado let's get started so I'm just going to say I want to build a solar system web app in 3js I want this to be built within a single index.html let's just start with that so A simple prompt relatively broad but I did give it a specific instruction that I ideally want it within a single HTML so if I show you here I just have this one file and let's see what I can do with this now it might seem like a lot of code but just for example sake it might help copying files back and forth especially especially working into you know multiple contexts of you know HTML CSS and JavaScript just having it in one place hopefully we'll make this easier to visualize so I'll also make this a little bit smaller so we can see a little bit about what's going on here okay so we have a basic HTML structure and it's also reached out to the CDN for us now it's starting a scene I I'd imagine that's probably like the initial um invocation of the 3js library I'd imagine scene is likely in all examples if not most we have the camera perspective some webgl stuff like I mentioned not familiar with exactly what this is doing but let's see what we can do with this code and see if we can get something that sort of reasonable or even impressive so if I take this over and save it let me just refresh okay so we have a green ball um So within the realm you know I think given what I uh gave it as a prompt this is I consider this reasonable it's clearly a working example of something now with the green ball now if I just look for okay so we have a sphere we have material now let's go back to here and see what it's saying so okay so it has a single rotating green sphere use textures okay let's say I want to add a texture of the Earth and let's say we're going to start with Earth as this green ball okay so I need to load an image texture loader and we have to find an image and look at that so it's even pointing me to an image and oh it doesn't work so that's all right though so let's just say we want an earth texture image hop over to Google here Earth texture image I would not imagine image okay let's see this one copy image oh that's the Google image this is an interesting not was not what I was expecting let's just use the high resolution okay so now that we've found this I'm going to go over here save this within our folder we'll see it's 2K Earth and you know what I'm actually going to go ahead and change it here and we'll just call this Earth just make it a little bit uh easier for naming okay so now that we have okay so now we have our loader I see that initial file there and now it's trying to likely reach out to that location but we know that that is not working so we'll go ahead and replace this with Earth dot jpeg okay all right so there that's I'd consider that pretty impressive so like I said I don't know anything really about 3js but now we have a spinning globe so I'll just say I'll sort of go ahead and take this and give the context back to gpd4 so remember whenever you hop out of it do a little Googling like we did and change it within your code editor GPT chatgpt and gpt4 the model doesn't know that context so just remember to paste it in or paste in or provide it at least with a relevant information no right so I'll just say I have updated my code to the following okay so now we have a rotating texture and I'll just stop it here so now it has that context and I'm going to say I want to add the Moon okay so to add the moon to your solar system web app you will need to create another Sphere for the moon and add it to the scene you should also find a texture for the Moon okay let's see if this Moon works so once this is done I'll click that open it up and we have a 404 so similar I'm going to hop over here and on just say Moon texture and you know what we might actually have a moon in this website okay there we go Moon let's download this one we'll save it Moon we'll hop back over to GPD I'll close these tabs to the right for now it's quite interesting that I can take that that texture so that's another thing not particularly familiar with so that 2D texture of the world map how it will just wrap it with not particularly a lot of code here so pretty impressive how that all works with this texture loader functionality here and okay so now I can see we have our Earth we have our moon we have a different position the camera position animation okay so I'll copy this back over into our editor and what I'll likely have to change here so it's trying to load that up that uh outside image so if I just say Moon and save it and look at that so we have a moon and an earth and they're rotating now that Moon looks awfully big but we'll we'll go with it for now we won't worry about the technical aspect of distances and sizes just yet now let's say again since I updated just that Moon image I'll say updated the code with the following and I'll just say now I want to add some Stars around the earth and moon and one thing I'll mention so like I haven't taken much of a look at the code yet I'm just really interacting with the prompts as you've seen I've done very minimal effort here just really swapped out some images outside of copying the code back and forth but if I take a if I just expand this for a moment I I can sort of get a sense on how potentially to use 3js and since this is starting with a relatively simple example and an example that can easily be grown on like start with a solar system and it would have been impressive if it did it all at once but in a way this is sort of nice that I can start to see okay what patterns you know are are involved in setting up something like this so you know we load multiple textures and then we have them you know this mesh basic material you know where we're sort of mapping that texture and going on so on and so forth so yeah I started a sense of what I can play around with here and how I could potentially use it so it's an interesting way to learn something I think this will likely be an approach that I take to learn something now I'm a much more tactile learner I like to learn by doing and this is sort of like learning by doing with the assistance of a tutor that's you know right by your side so pretty neat Okay so now as this gets longer what I'm starting to wonder is if we'll run into limits with um our script here now it looks at least longer than what we have but I think we are still okay for quite a while yet hopefully at least because sometimes it will just stop with the prompt you have to regenerate it you know you might have to say continue from here Etc but let's just hope for the best here okay so now we have a little bit more of an example and it's starting to look pretty neat um and okay so let's say let's go for a bit of a bolder ask here I'm just going to say let's add the rest of the planets okay so to add the rest of the planets to the solar system you'll need to create spheres Etc so one thing I know um now if this does it it might give me the broken paths again but we did have that website that we found um that I did close the tabs for um but I could easily go back find those if need be they seem to work really well for the Moon and the Earth so once I see it um get to the point where it's going to load all the different planet structures I'll see how many different assets that I'll need to go and look for okay so okay Venus Mercury Mars okay so let's go back on the hunt now let me just reopen that tab that I closed here you can do that with command shift t um if need be I'm also going to just move this over here make sure I don't forget any planets and let's uh I think we got to the first one with Earth texture okay so we have the Earth Moon let's download Mercury Mercury Venus Venus atmosphere okay so that one's interesting Venus we'll just get the surface for now Mars oops Shoop if I can type it's going to take me to it Jupiter okay we're almost there Saturn I can't tell uh type I can't type or talk okay so download Saturn Uranus Neptune okay so now that I have all of those okay so we see that it stopped there that's all right we'll copy what it has so far I sort of figured I mean at least with a more bold ask like that from uh gpt4 that uh had the potential to to do that at least I'll just grab this again move it back over here okay and I'll just say again continue I think I can just say continue okay so it's going to continue [Music] from right here so I'll just get rid of that and get it ready so we'll just give it a moment so it's pretty neat I mean I can sort of see you know like enjoying working with 3js especially with this I'd love to hear your thoughts on any different ideas or or web apps that you've built with a gpd4 there's a lot floating around out there I haven't had the chance too much to really build something out from scratch like this or learn something new so this is sort of my first effort at that like I said a little bit of an experimental video I'm not going to do too much of uh an edit on this one I might just release it raw as is so you can sort of see the the thought process and and you know like me running through this as a you know it's new to me just like it's new to you and everyone else so but so far it's it's come up with impressive code so like no bugs not that not visually anyway um it's just worked relatively seamlessly so quite impressed with uh what it's given us so far all right so now uh we know okay so we need the various images and what did we do wrong here so okay so it wasn't from there that's my mistake I should have caught that uh just to show you some people probably saw it as it was typing like no no no okay so it's from here now if I go ahead and save this I believe it's from there where does it say Moon I think once there's an error I might have to restart the server okay so it didn't quite like that moon position let's see what the errors are saying so expect it online to close this set mesh Moon doesn't want another okay no problems detected at least but now where is everything so we'll grab the console here cannot access Moon before it's initialized okay so where does this go moon position um let's just say back track and continue from create okay create planets okay so it's gonna go a little bit further than I wanted it but um that way I'm not uh I'm not sort of stuck here where I am so we'll just go back to create planets and we'll get rid of this and just wait for a moment just to make sure we save these to the right folder so we have all our assets here I don't see what we're waiting any typos for the different planets and now I think I saw also it did have um the assets maybe it's up here assets for the planet now uh sort of knowing to point locally so it's not even trying to reach out for those external assets at this point so it sort of caught on to what we're trying to do here which is great and hopefully it doesn't stop here for us again oh no and it looks like we have it the rest of it so let's go ahead uh copy code put it in here save okay now we have more going on here um let's now let's open this up okay so now we have multiple planets going on all right that's something I'm sort of wondering about the positioning so maybe now let's ask a question about um I have an idea I'll say I want to be able to drag the drag the planets only give me the three Js method needed to do so okay so drag control so it has that built in so seeing 3.js examples I know I've played around with it or some examples of it before where you can grab the screen and look around and whatnot so okay so it looks like we have a different CDN that it wants us to add Planet meshes I'm wondering if it's actually going to help me drag the planets I I sort of meant maybe I didn't write it clear enough that I just wanted to drag this around like the the camera perspective but let's see what this does Planet meshes and it says Okay so this code animate should it come after animate I don't know okay so this is set up now I have the 3js okay so that is not a Constructor let's just throw this in here I should have noticed that so the controls here so it doesn't like this examples and JS script that I put in here let's see if this one works not found okay so let's just Google this oh well it'll actually it'll be interesting to see if this is a hallucination like it'll be interesting if this just doesn't exist drag control CDN okay so here is hopefully a working script A3 drag controls now that we have this if I just go here Okay so let's just paste this into GPT for this mess of a minified script I am using this version of drag controls and it accepts it okay so let's see if it can sort of parse this out a bit of an example of uh how how powerful potentially we'll see gpd4 is okay so it seems I'm using a different version of drag controls that's correct you need to install three dependency okay so three do do do okay so make sure my drag control has access to this okay um you know what it might have been the order so let's see that oops not within that other script tag I'm hopping around here okay now let's open the console again okay drag control still doesn't like that um at least not that original code so I'm just going to get rid of this and instead copy this okay okay let's see okay drag controls is not a Constructor all right I'm gonna I'm gonna pivot from this one good to see a limitation here now it could just be oh I have a couple of drag controls here one last try let's see I don't imagine that would have been an issue but let's have a look so I still can't drag okay so I'm gonna put it from this and let's just say instead of dragging I want the solar system to spin now I want the solar system to spin and also be within relative distances and sizes from one another so so we don't have these big planets and small planets and giant Moon close to the Earth let's see what it will do with this I have no idea okay so to make sure the role of the solar system Spin and have relative distance of sizes you need to adjust the size as distance and rotation speed of the planets note the actual distances and sizes are too large to fit within a reasonable 3D view okay that's okay first you'll have to update the planet data to scale down to relative sizes all right so I also got rid of this Planet data okay okay so where's our create Planet function okay so we're calling that method there but where did we actually sort of hard to have all of this on one screen oh so it's right here so I'm just going to unplot that here and update our create planet okay we'll put this here okay save that then animate we'll replace those at the bottom here and we see a black screen so okay cannot read undefined up size so size let's just say let's say this is what I currently have and I have this error so truly no experience with 3js so it's good to see you know hopefully it's good to see what uh uh issues and errors you might run into and sort of how you can quickly deal with it and not just you know walk away from this and say oh this isn't useful or or you know I might rather do it a different way so it's it's you know you can get quite a bit done you know it seemed like the most momentum I had was with the simple example and then once I get into this sort of bigger example trying to make a whole solar system you start to see the the limits especially coming from someone that isn't particularly familiar with with the library foreign okay apologies for the okay so that's a simple mistake and this might be also an example where um chat gpt4 has a limit for how many tokens you can use and from what I've read the chat GPT GUI has a smaller limit than the API so what I've read and I don't quote me on this but I've seen individuals speculate that it's closer to the 3.5 limitation of I think it's 3 500 tokens or so whereas the API can accept 8000 to I believe it's 32 000 for some developers that have access from the waitlist so instead of Planet data here I'll get rid of Planet data and then we also have ours here so I'll just replace create planets and actually you know what maybe it was that we want planets and let's just see okay creep lineup function okay so we still want that planet texture okay so replace okay where was I here let me just go forward a little bit foreign it's hard to um see everything you know have all these screens here and hopefully uh it's helpful to see it all within one screen but um I'm used to having multiple screens here with my you know code editor on one and what I'm working on on another but okay so now we see it's spinning I see one planet not really sure what's going on here but anyway this is sort of the initial example I believe if I scroll up high enough uh the most impressive example was with the basic example of the Moon and the Earth at least impressive within the context of not needing to spend much time to get there we got there very quickly so that just this one and then from there now if I would have done this differently a little uh um you know post talk uh evaluation of what we just did here I'd probably I wouldn't have gone as audacious say you know just add all the planets and maybe started to add them one by one and you know add the relative size one by one and maybe understand that you know the relative sizes it's it's just not going to work because it's going to be too far so maybe something that's more illustrative you know for for an example like this where you can see all the planets spinning and whatnot so hopefully you found this used full like I said it's going to be a pretty raw one with this one not going to edit it too much maybe a cut here or there but otherwise hopefully this was helpful if you don't have access to gpt4 you can sort of see how it works I would be curious to see your experience using it with the gpd3 um similar results better worse let me know anyway hopefully you found this useful please like comment subscribe if you found this a useful and until the next one