Bilder in interaktive Three.js-3D-Modelle umwandeln mit img2threejs

What's up everybody? img2threejs. This is a library I came across very recently and it allows you to do really cool stuff like this. So the idea is as you provide it with an image, and automatically it will analyze the image, create a 3D shape 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, I'm kind of like a spoiler, 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 aid. 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, I'm 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 stool on my studio. I run this image through img2threejs, show me the result while it subtly spins / rotates on axis. 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 picture, 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 Novation Launchkey 25 as shown in this image. Allow orbit controls and zoom/pan. Make each key trigger a MIDI note when the user clicks on the keys. Ensure black and white keys function. No other functionality is necessary. Place it against a dark grey 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 press animation. Now this is obviously taking 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. 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 underneath it. Um, but they do actually work. Um I don't see anything lighting up or glowing, but the key presses are perfect. Ah, so that, that does light up the black keys, but not the white ones. Um again, follow-up, you know, you can just ask a follow-up. So what I did is paste this where these are, you know, this issue is clearly visible in this one. I told it to remove these. We don't need to be like perfectly, uh you know, have it perfect representation. So and then also just to remove these white pads away. Let's see how it does in terms of an iterative follow-up process. And there we go. It did exactly what I wanted. It add that white, it added the white space and then also got, you know, rid of the keys on the side. Now, what if we ask it to create maybe like an intro animation, maybe when the page first loads, once the models loaded, all the keys will kind of just, um, come from the Y axis, and fall into place from an opacity of 0 to 1. Let's go ahead and see if it can do that. All right, here it is. Refresh. Look at that, one-shotted that request, works perfect. That is so freaking cool. All right, so the, the overall takeaway from this is this is a solid approach for either taking pictures in the real life of objects like I did with the stool, or having, um, you know, reference images but you can also use something like, you know, OpenAI, Midjourney, any type of AI image generator to generate assets as well on the fly, and then automatically convert them to 3JS so that they can be used on your webpages and apps with web tech, which is really, really freaking cool. So I'm a big fan of this one, check it out for sure. As always, make sure to subscribe. I will see you soon. Goodbye.