Video yükleniyor...
Video Yüklenemedi
Vibe coded a ship selection UI for a space exploration game 3D assets Nano Banana + Midjourney → Hunyuan3D UI Nano Banana → Gemini Pro More details ↓
1,906,828 görüntüleme • 9 ay önce •via X (Twitter)
66 Yorum

Here's another post I made using almost the same workflow to implement a game character select screen.

Started with a few images I found by searching on Midjourney, then cleaned them up with Nano Banana.

If you're interested in vibe coding engineering or science related stuff, I have another series where I explore those.

Then I used those images to generate some UI ideas with Nano Banana. Here are a few other images it generated.

I like the UIs Midjourney generates, but the elements are often unclear, which makes them difficult to use as inputs for vibe coding. Here are a few examples.

bro really said “i want a spaceship” and the models just delivered

🫡

This is really cool. Are the ships customizeable? Like changing textures or adding guns? Then you run into problems with skeletons, bones and sizes, especially on the characters, right? Just trying to understand :) been working on similar things

Hunyuan3D generates a single mesh, so to change things like guns, you have to remove them from the prompt image and generate them separately. I think there are some other models out there that allow you to generate multiple meshes, but I haven't tried those yet. Rigging works pretty well. I used Mixamo to rig characters in the linked post, and it worked smoothly. The topology still isn't good enough for a production-level game, but it's getting better.

Nice one thanks for responding!

The "details" your provide are always super sparse in a click-bait / how to draw an owl fashion.

idk why things like this have more bookmarks than likes like if ur gonna save this information atleast leave a damn like lol

haha, thanks

how long did it take u to get Hunyuan3D to produce what you wanted

it is pretty quick. about a min or two

Better than Blender MCP?

Yo! cool bro 🔥🔥🔥 Do you have any resources like Skool. com classes, video tutorials, or step-by-step guides showing how to build this from scratch? I'm super interested in learning this 👀

thanks! I tried making step-by-step videos, but the explaining takes longer than building the thing 😂but I'm going to give it another shot.

Great, can't wait and thank you 😃

made a builder agent. it turns references into shipped web apps. screenshot → live site. repo → live site. "i want a 3D viewer for X" → live site. it just built: — Vehicle Studio (three.js, PBR, HDRi, multi-car) — Firearm Museum (GPT Image 2 → Tripo3D → GLB → PBR, fully automated) ... try it →

This is fucking fire, I wish there’s a step by step for noobs like me could replicate something like this. Keep grinding

thanks, I tried to record a step by step tutorial, but it wasn't that good. I'll try again. Also, everyone, including me, mostly posts the ones that turn out really well, so don't get disappointed when your attempts don't work out that great at first.

If only you could upload this to an open world game creator where everyone participates. And get paid for it every time someone uses it for their world.

The 3D asset pipeline (Midjourney → Hunyuan3D) is something I haven't explored yet. I've been focused on apps but seeing what's possible with games makes me want to experiment. How long did the full ship selection flow take to build?

took around 4 to 5 hours overall. had the basic flow working in under an hour, and the rest was mostly tweaking the look and feel.

Under an hour for the basic flow is wild. That's the part that would have taken me weeks before AI tools. The tweaking is where the time goes though — always "just one more thing" until 4 hours vanish. Thanks for breaking it down.

starcityzen is cooked 😆 @Frederic_Molas

@Frederic_Molas 😂

what engine is it on?

react and three.js

Cool I really want to use react to make a game as well, but I worry it won’t be performant and I also want to bundle it to sell in Steam and not sure if that’s possible if using web technologies

You can bundle it and sell it on Steam. A lot of indie games are made that way. You can start with React because it’s faster to try out new things, and then switch to vanilla JS if you want to push performance even further. Models generated by Hunyuan3D or most other 2D to 3D tools still aren't great for production yet, but you can try free models from places like Sketchfab.

Every vibecode amazing stuff buy nobody share their prompt or the way they achieved it, or the time they spent. What do u sell?

Wow! Did you turn the 3D assets into codes? Looks like you can manipulate the 3D turn with cursor?

@duwa01010 the 3D models are just .glb imports. Then it's super easy to add cursor interaction

Oh thanks for sharing!

@duwa01010 @DilumSanjaya He's just using three.js to load the assets and allow for basic camera orbit / rotation controls.

@DilumSanjaya Three.js is so powerful

This is pretty cool

thanks Shane

Soo cool! Reminds me of a web project I worked on but it never made it out of beta but was back in the days when vibe coding wasn’t a thing yet. This is inspiring me to finish it!

thanks! that looks awesome, definitely give it another shot

I remember seeing this in season four of black mirror

woah this looks amazing!

@wurakeem One of the best designs but not at almost light speed.

Man, incredible. Looks like this would be a fun game. Surreal, and would love a tutorial video if you ever create one :)

thanks, I will try to create one

what'd your prompts look like? any tips

For image gen my prompts are pretty simple, like:"Make a UI for a space exploration game around this spaceship", and I attach the ship image. It's not one shot though, I generate a bunch and pick the best direction. For vibe coding the UI, the prompts get way more technical. I include screenshots of what I want, describe the layout and components, and after each step I paste an updated screenshot so the next prompt can refine it.

Thanks, looks great

love the colors!

thanks

This looks so sick! I need to get on the nano banana train 🍌🍌🍌

thanks David

All of the threads are too goood man

thanks, Akash. sometimes the process is too long to include every step, but I try to share at least the main ones.

Yes I can understand things get hectic when you are doing this much detailed work using prompting and to build on 3D What are you using for 3D is it R3F or something else

gorgeous 👏

thanks

@0x3Jay cool stuff

damn, the graphic looks incredible

thanks Chirstian

you are welcome xD keeps doing the good work

That sounds impressive! Combining advanced tools like Midjourney and Gemini Pro must lead to really innovative designs.

Wait, how’d you manage to turn the Midjourney ships into 3D models? 🤯

that is really cool man

