From Pictures of Objects to 3D Three.js in MINUTES

What's up everybody? Image 23JS. This is a library I came across very recently and allows you to do really cool stuff like this. So the idea is is you provide it with an image and automatically it will analyze the image, create a 3D shape out out of it and make it work with 3JS which means you can

then integrate it interactively onto your websites, your apps, whatever anything that uses web tech. So, I'm going to be actually testing this two different scenarios. This stool right here, which is a very simple object in my studio, and then also a more complex one like this keyboard right here. Will

it actually nail it? Well, I don't want to do this kind of like a spoiler alert, but yeah, it actually did a really good job and it's interactive as well. And I'll show you exactly how to get set up.

It's super easy. Let's get started. All right, so to get started, open up your favorite coding age. I'm using cursor here and all I said is read this. I pasted the link to the GitHub repo.

Integrate it into this project and tell me how to test it and what to provide you. Long gone are the days where I'm sitting here showing you how to run, you know, Node.js in order to integrate like a GitHub project. So, let's go ahead see what it does.

All right. So, here's a picture I took of it. I'm going to tell or just paste this rather into Gemini and basically tell it to isolate it against like a white background. All right, there we go. That looks good. All right, so here it is. Here's a picture I took of a store in my studio. I run this image

23JS. Show me the result while it subtly spins and rotates on access and place it in its own index HTML file and allow zoom and orbit controls. So, let's see what it actually does. Now, that is impressive right here. Check this out. I'm going to put next to the side of the actual picture.

And it did a really good job. And what was cool is when it was working, it was iteratively improving the initial result. There was some stuff on the floor it removed. I This is pretty sick, I have to say. Okay, so this is going to be the next test. This here is a Novation Launchkey 25 MIDI keyboard.

Okay, now I went ahead and got some reference images from Google of the actual keyboard. So, I gave it this overhead, and then this perspective view. And that should give it, you know, a couple different perspectives. And then here is the actual prompt. Create a 3D model of the innovation launch key25 is shown. Allow

orbit controls. Make each key trigger a MIDI note uh when the user clicks the actual keys. Ensure black and white keys function. No other function necessary.

Place it against the dark gray background and add some nice colorful lighting in the 3JS scene to help illuminate the keyboard. Each time a key is pressed, light up the key that was pressed and animate the subtle key um press animation. Now, this is obviously taking it a bigger step forward. I'm

excited to see what it comes up with. All right, here it is. So, it's not perfect. Um obviously, there's an issue here. Just two issues really. We see these um buttons right here hanging off that's kind of suspended. Um and then these pads are a little bit too close to the top. So, I want white space