Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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,907,932 Aufrufe • vor 9 Monaten •via X (Twitter)

66 Kommentare

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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.

Profilbild von Shreyans Bhansali
Shreyans Bhansalivor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

🫡

Profilbild von Curlheinz
Curlheinzvor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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.

Profilbild von Curlheinz
Curlheinzvor 9 Monaten

Nice one thanks for responding!

Profilbild von Stéphane Cocquereaumont
Stéphane Cocquereaumontvor 9 Monaten

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

Profilbild von Knight
Knightvor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

haha, thanks

Profilbild von Defi App
Defi Appvor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

it is pretty quick. about a min or two

Profilbild von Defi App
Defi Appvor 9 Monaten

Better than Blender MCP?

Profilbild von Yami
Yamivor 9 Monaten

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 👀

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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.

Profilbild von Yami
Yamivor 9 Monaten

Great, can't wait and thank you 😃

Profilbild von yrzhe.top
yrzhe.topvor 5 Monaten

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 →

Profilbild von Kモれㄗム 匚卄工
Kモれㄗム 匚卄工vor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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.

Profilbild von BloomOne
BloomOnevor 9 Monaten

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.

Profilbild von Mário Martins
Mário Martinsvor 9 Monaten

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?

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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.

Profilbild von Mário Martins
Mário Martinsvor 9 Monaten

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.

Profilbild von X Æ A-12
X Æ A-12vor 9 Monaten

starcityzen is cooked 😆 @Frederic_Molas

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

@Frederic_Molas 😂

Profilbild von Rob Austin
Rob Austinvor 9 Monaten

what engine is it on?

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

react and three.js

Profilbild von Rob Austin
Rob Austinvor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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.

Profilbild von Non fungible Djazairi
Non fungible Djazairivor 9 Monaten

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

Profilbild von Dora Motion🧚
Dora Motion🧚vor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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

Profilbild von Dora Motion🧚
Dora Motion🧚vor 9 Monaten

Oh thanks for sharing!

Profilbild von カイトラ (Kytra) 凯托拉
カイトラ (Kytra) 凯托拉vor 9 Monaten

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

Profilbild von Dora Motion🧚
Dora Motion🧚vor 9 Monaten

@DilumSanjaya Three.js is so powerful

Profilbild von Shane
Shanevor 9 Monaten

This is pretty cool

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

thanks Shane

Profilbild von 𝐑𝐨𝐛𝐞𝐫𝐭 𝐅𝐢𝐤𝐞𝐬 𝐈𝐕
𝐑𝐨𝐛𝐞𝐫𝐭 𝐅𝐢𝐤𝐞𝐬 𝐈𝐕vor 9 Monaten

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!

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

thanks! that looks awesome, definitely give it another shot

Profilbild von Chase Holden
Chase Holdenvor 9 Monaten

I remember seeing this in season four of black mirror

Profilbild von Chase Sommer
Chase Sommervor 9 Monaten

woah this looks amazing!

Profilbild von Kevin John Parrish
Kevin John Parrishvor 8 Monaten

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

Profilbild von Sam
Samvor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

thanks, I will try to create one

Profilbild von nick
nickvor 9 Monaten

what'd your prompts look like? any tips

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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.

Profilbild von nick
nickvor 9 Monaten

Thanks, looks great

Profilbild von tara tan
tara tanvor 9 Monaten

love the colors!

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

thanks

Profilbild von David Martin
David Martinvor 9 Monaten

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

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

thanks David

Profilbild von Akash Parmar
Akash Parmarvor 9 Monaten

All of the threads are too goood man

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

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

Profilbild von Akash Parmar
Akash Parmarvor 9 Monaten

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

Profilbild von Tibo
Tibovor 9 Monaten

gorgeous 👏

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

thanks

Profilbild von Intense Investor
Intense Investorvor 9 Monaten

@0x3Jay cool stuff

Profilbild von Christian Hoang
Christian Hoangvor 9 Monaten

damn, the graphic looks incredible

Profilbild von Dilum Sanjaya
Dilum Sanjayavor 9 Monaten

thanks Chirstian

Profilbild von Christian Hoang
Christian Hoangvor 9 Monaten

you are welcome xD keeps doing the good work

Profilbild von Framer Geeks
Framer Geeksvor 9 Monaten

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

Profilbild von Erman Malak
Erman Malakvor 9 Monaten

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

Profilbild von Truce R
Truce Rvor 9 Monaten

that is really cool man

Ähnliche Videos