Design with Prompts

Download source code here

Transcript

[00:00:00]

In today's video, I'm going to show you how to build this beautiful 3D interactive planet Mars

this is completely interactive. You can zoom in and you can even see the textures clearly. If you move, you can see even the stars move along with it.

And if you look closely, once in a while, you can even see some shooting stars in the background.

There you go. There's a shooting star over here.

You can also see that the sun is reflected on one side. You can even see the shadow casted on the other side. And we're going to design all of this with AI. We are not going to use a 3D model this time.

I couldn't believe all of this was possible in just a few minutes. Let's get started.

So for this project, we won't be using Next. js, but we'll be using something called as Vite.

it makes building websites much faster. And the framework that we will be using is also React.

You can go to dev to see how to get started.

You can scroll down and here you will see the command for you to start your first project. So we're just going to copy this command and then we're going to go into our terminal.

And what we will do is we will paste this command and say npm create latest and we will call it [00:01:00] interactive Mars and hit enter. And it'll ask you these bunch of questions. We are going to choose React and we will choose TypeScript because that makes

finding issues much easier. But don't worry, you don't have to think too much about code for now. Just pick TypeScript and we will not be using any code for this tutorial.

So I'm going to go into the project directory and I'm going to say cd interactive mars. And once I go here, I can open it in cursor. So I'm just going to say code and open it and it opens it in my cursor. So I'm going to close my terminal and from here onwards, all we need to do is use our code editor.

So the first thing we need to do here is open a new terminal within cursor, and we need to install the packages that have been downloaded right now. So I can do that by saying npm install or npm i for a shorthand, and it goes and installs all the packages. And it's just a one time thing, you don't have to do this each time.

And when it does that, it goes and adds all the directories into the project folder that we need to [00:02:00] create this interaction. And when that's done, what we need to do is npm run dev and it launches the project in this end point. So if you click on this, it opens it in the browser. I'm going to open it back into the browser and you see the default template .

It does nothing. It's just a working application.

Okay, so I'm going to go back into my code editor. So the first thing I'm going to do is to go into the source directory and open app. tsx. So, as you see here, the app. tsx is the file that you can see on this page.

And it's just a bunch of HTML code that is just showcased here. So you see Vite plus React is just displayed here and everything else is pretty much the same.

So now to get started, what we'll do is first we'll create a simple globe.

So to do that, I'm going to hit command I, which opens the composer and let me bring it here so you can see clearly. So now I'm going to ask AI to create a full page canvas that spans full width and height of the [00:03:00] page. Render a gradient sphere at the center of the canvas using 3js

the sphere should be moving continuously. Like a planet and should be interactive let's see what it does . So when I hit enter, it goes and thinks and comes up with the code that we need.

And there you go. Pretty much it has given me all the code. There is one thing it's asking me to do. It's asking you to install this package. So I am going to go install this package. And I will go into the terminal and first, let me accept all the changes. And once I've done that, it's going to throw some error, but don't worry about it.

So, because I haven't installed these packages, so I will hit a new terminal over here and I will go install this package and then let's go find what other issues it pointed out. So let's see. So I have. This package, this error is gone. And when I go here and I can say AI fix in chat, and it says, install this package, although I just did, let me do it [00:04:00] again, just in case.

Okay. This package is installed and now you see, the error still exists. So when something like this happens, what you can do is just see the error still exists, and then it finds the next solution. So what it did right now is to say the key change here is to add js to the end of the orbit controls import.

This happens because they keep changing the file naming convention sometimes, or maybe the way it's used in a different application, it got exposed to the naming that way. I'm not exactly sure. It doesn't matter.

All we need to do is just go say apply and accept.

Let's fix this as well. And there's just one more error. React is declared, but never read. So yeah, let's just remove that. Okay. So I want to hit save. And when I go back, you can see a nice. So this globe here with a gradient, this is, you can zoom in and it's , and it's actually moving if you see, in one direction, you have to look close enough to see, because it's not a perfect sphere, it's moving in one direction and you can see [00:05:00] this already.

So now what we'll do is add a texture onto this and make it look like Mars. So to grab the texture, we can go to this website that I found called Solar Textures. And this is a great website. It has textures for all the planets and download them for free, and they're all in very high resolution. So you have 2K and you have 8K as well. We are going to download 8K for this tutorial because then you can see the textures really clearly.

What we can do is just go save this image. I have already saved the image. So what I'm going to do is Go back into cursor and in the source directory, and I'm going to create a new folder called textures and within textures, I'm going to go bring this image

and paste it.

Okay. I'll close this here so we can go back to where we were developing. And now I can go back into my cursor and I can say,

I have added a texture file in the folder, source textures, called 8kmars. [00:06:00] jpg. Apply the texture on the sphere. That's it! Let me make sure app. txt is selected. The reason we do this is because it understands that this is the main page that we are interested in making changes to. Or if you don't do that, what happens is sometimes it creates a new page and it makes the code a little bloated than it should be.

It's probably, it's going to get better over time. But it's better to just select the file that we Wanted to work on and just say enter.

And then it goes and does the magic.

As you see here, there is nothing we need to know and how it does it. And we just accept all the changes and there are no errors this time. I'm just going to save it, go back. And there you go. You already have a beautiful looking planet on your browser that you can interact with. And if you look closely, it even has all the textures of the surface

this would have taken 30 minutes to an hour for an experienced developer to make and we, without any knowledge, were able to make it in just a few minutes

okay, let's keep going. Let's [00:07:00] go and add the stars right now. This is my favorite part. So I'm going to go and say, cover the entire canvas with stars so when I Rotate. I can see stars everywhere and it'll automatically add a star field to the background of the scene.

And I will just accept the code that it gives me. And the moment I do that, look at that. Well, there are too many stars here and I don't know what is happening. A bit broken, but let's go and fix that. So what we will do is we'll say, limit the stars to 20, 000 so that it doesn't look like there is too many happening

So now it's starting to look a lot better than before. But there's still a lot of details here. The stars are all just simple dots, but we are going to make it a little more detailed than this.

So we'll go back into cursor and we will say, make some stars bigger and other smaller with [00:08:00] different levels of brightness in a wide range, just like you would in space. Also turn some of them into shooting stars

and when you press enter, it goes and modifies the star field. And let's see what it makes.

Okay. I'm super excited for this. So when you accept it all, looks so beautiful right now. You see the lots of colors happening here. And once in a while, you can see some of these random shooting stars. It's insane. And this is like funny warp effect that's happening on the planet

so let's add some more sunlight to this to make it a little more realistic. I'm going to go back to cursor and say add a directional sunlight from one direction show shadows in the other direction of the globe.

Make, make the globe move a bit slower, imitating the speed of mars. And let's see how it takes care of the sunlight.

I see there's a bit of an error here that I forgot to fix, but we will fix it right now.

So I'm going to accept [00:09:00] everything first. Let's see. It already added the sunlight, which is looking really beautiful already, but let's go and fix these errors.

Okay, so I'm just going to say apply, and it applies those issues. I'm going to accept this part and let's see if you go here, so you can see this red dot here to indicate where these errors are. So these errors are mostly TypeScript errors. So TypeScript is basically making sure the format of the code that you enter is correct. It's just a good practice.

So I'm just going to go here and say fix in chat. And. It gives you the way to fix that and just say accept and that's it. So when you hit save, it's already looking very beautiful.

That's it. It took like just a few minutes to make this and you can add it to your website or portfolio or pretty much anywhere. And this is just getting started. You could add so many different elements to it. You could make like a bike move around the planet. You could add like different moving space shuttle or just do anything you want with just [00:10:00] prompts

And this is something new that has never been possible before, unless you knew how to code really well.

This unlocks so many different possibilities for us as designers to imagine and bring to life. And the best part is all of this is code that you can pass on to your developers

I understand even this much of code could be intimidating for some of you. So that's why I'm creating a course to introduce you to the, just the basics of web development, not enough to be a developer, but just enough.

So you understand how to build with AI and tweak it when something goes wrong. And if you want to learn more, you could always do that

If this interests you, join the newsletter called Design with Prompts. And when I release this course, I will send a link to you.

Thank you for watching.