Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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.

Shreyans Bhansali profil fotoğrafı
Shreyans Bhansali9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

🫡

Curlheinz profil fotoğrafı
Curlheinz9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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.

Curlheinz profil fotoğrafı
Curlheinz9 ay önce

Nice one thanks for responding!

Stéphane Cocquereaumont profil fotoğrafı
Stéphane Cocquereaumont9 ay önce

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

Knight profil fotoğrafı
Knight9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

haha, thanks

Defi App profil fotoğrafı
Defi App9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

it is pretty quick. about a min or two

Defi App profil fotoğrafı
Defi App9 ay önce

Better than Blender MCP?

Yami profil fotoğrafı
Yami9 ay önce

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 👀

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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.

Yami profil fotoğrafı
Yami9 ay önce

Great, can't wait and thank you 😃

yrzhe.top profil fotoğrafı
yrzhe.top5 ay önce

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 →

Kモれㄗム 匚卄工 profil fotoğrafı
Kモれㄗム 匚卄工9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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.

BloomOne profil fotoğrafı
BloomOne9 ay önce

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.

Mário Martins profil fotoğrafı
Mário Martins9 ay önce

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?

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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.

Mário Martins profil fotoğrafı
Mário Martins9 ay önce

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.

X Æ A-12 profil fotoğrafı
X Æ A-129 ay önce

starcityzen is cooked 😆 @Frederic_Molas

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

@Frederic_Molas 😂

Rob Austin profil fotoğrafı
Rob Austin9 ay önce

what engine is it on?

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

react and three.js

Rob Austin profil fotoğrafı
Rob Austin9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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.

Non fungible Djazairi profil fotoğrafı
Non fungible Djazairi9 ay önce

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

Dora Motion🧚 profil fotoğrafı
Dora Motion🧚9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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

Dora Motion🧚 profil fotoğrafı
Dora Motion🧚9 ay önce

Oh thanks for sharing!

カイトラ (Kytra) 凯托拉 profil fotoğrafı
カイトラ (Kytra) 凯托拉9 ay önce

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

Dora Motion🧚 profil fotoğrafı
Dora Motion🧚9 ay önce

@DilumSanjaya Three.js is so powerful

Shane profil fotoğrafı
Shane9 ay önce

This is pretty cool

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

thanks Shane

𝐑𝐨𝐛𝐞𝐫𝐭 𝐅𝐢𝐤𝐞𝐬 𝐈𝐕 profil fotoğrafı
𝐑𝐨𝐛𝐞𝐫𝐭 𝐅𝐢𝐤𝐞𝐬 𝐈𝐕9 ay önce

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!

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

thanks! that looks awesome, definitely give it another shot

Chase Holden profil fotoğrafı
Chase Holden9 ay önce

I remember seeing this in season four of black mirror

Chase Sommer profil fotoğrafı
Chase Sommer9 ay önce

woah this looks amazing!

Kevin John Parrish profil fotoğrafı
Kevin John Parrish8 ay önce

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

Sam profil fotoğrafı
Sam9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

thanks, I will try to create one

nick profil fotoğrafı
nick9 ay önce

what'd your prompts look like? any tips

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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.

nick profil fotoğrafı
nick9 ay önce

Thanks, looks great

tara tan profil fotoğrafı
tara tan9 ay önce

love the colors!

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

thanks

David Martin profil fotoğrafı
David Martin9 ay önce

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

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

thanks David

Akash Parmar profil fotoğrafı
Akash Parmar9 ay önce

All of the threads are too goood man

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

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

Akash Parmar profil fotoğrafı
Akash Parmar9 ay önce

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

Tibo profil fotoğrafı
Tibo9 ay önce

gorgeous 👏

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

thanks

Intense Investor profil fotoğrafı
Intense Investor9 ay önce

@0x3Jay cool stuff

Christian Hoang profil fotoğrafı
Christian Hoang9 ay önce

damn, the graphic looks incredible

Dilum Sanjaya profil fotoğrafı
Dilum Sanjaya9 ay önce

thanks Chirstian

Christian Hoang profil fotoğrafı
Christian Hoang9 ay önce

you are welcome xD keeps doing the good work

Framer Geeks profil fotoğrafı
Framer Geeks9 ay önce

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

Erman Malak profil fotoğrafı
Erman Malak9 ay önce

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

Truce R profil fotoğrafı
Truce R9 ay önce

that is really cool man

Benzer Videolar