A single 2D image → a 110,745-triangle 3D monster with 27 animations, running live in the browser. This is the Abyss Monster, built with img2threejs: The workflow: Image → 3D Reconstruction → Reference GLB + Specs → Rig → Animation Loops → VFX → Interactive Three.js 🔥 Inside this... demo: 1/ 110,745 triangles reconstructed from the reference image 2/ 27 animation clips - Spin Flurry, Leap & Stomp, Charge, Collapse & more 3/ Reference-driven rig & animation workflow 4/ Dynamic lighting 5/ Real-time floating ember VFX 6/ Interactive WebGL character What I find most interesting is the workflow itself. The character and scene are built through a multi-prompt workflow, using visual references, GLB specs and animation loops to progressively construct the Three.js experience. Then, for the VFX, I used a single focused prompt to create the floating ember effect and integrate it into the scene. The final result is Three.js + TypeScript code - turning a visual reference into a programmable, interactive web experience. I’ll share the VFX prompt in the comments. 👇 #ThreeJS #WebGL #GameDev #TypeScript #Web3D #img2threejsshow more

The VFX was actually the simplest part. I used a single focused prompt describing the ember behavior, then had the workflow implement it directly into the Three.js scene. No separate VFX editor - just the visual reference, the prompt, and the generated TypeScript/WebGL implementation. Prompt below 👇

27 loops off one reference image is the impressive part — the rig is usually where reconstructed meshes fall apart. Is the ember VFX parented to the rig or simulated separately? That decides whether it trails right on Leap & Stomp.

Yeah, total agree with you this point, i also take a lot of time to research and design the pipeline to support, in 1.8, i’ll share a playground and combo dataset for rigging, animation, vfx for everyone, i’m on 1.5.2 to create simple animation for now

Brooo I’m having the hardest time trying to animate the moves I want , how do you get the moves so smoothly? I tried having codex make it so I can move each body part in a key frame but it’s so hard helpppp 😂

Brooo I feel you 😂 I was struggling with this too. I found it much easier to give Codex the movement as a reference/animation goal instead of manually keyframing every body part. Then I iterate on the loop and let it refine the motion. That made a huge difference for me.

Do you think it will be easier if I had codex create like a depth map from a video that I do the moves and overlay my rig or something to it? Just thinking because I can do the punches and moves on my own I just need my avatar to do the same

That’s actually a really good idea, bro! 🔥 I think this could definitely become a stage in my pipeline later on. You should experiment with it, and if you get it working, let me know and contribute it back to the project with me! Would love to build this together.

The floating embers are carrying the shot more than the triangle count is. They give the eye parallax so the depth reads even when the creature holds still. If the embers dim slightly when they drift behind a limb, the WebGL scene will feel like it has real air in it.

That’s a really good observation. I hadn’t thought about the embers contributing that much to the perceived depth, but you’re right. ❤️ The limb occlusion idea is especially interesting, I’ll definitely experiment with that. Thanks for the insight! What other small details would you add to make the scene feel more “alive”?

How long did it take in total? the GLB i always get is pretty lame and have to spend a fair amount of time improving it...

Around 3 hours for the full showcase, including the GLB setup, rigging, animations and VFX. Instead of spending hours manually fixing the asset, the idea is to let the code inspect and progressively improve it. What usually takes you the most time when fixing your GLBs?

Damn, i need to get faster! It's mostly that the downloaded asset doesn't match the reference as closely as I want. Whether I use rodin, Tripo or whatever else, it invents extra parts, merges things that should be separate, changes shapes, etc... fixing that takes me awhile!

That’s interesting, this actually shouldn’t happen that much with the pipeline. Could you show me how you’re using img2threejs and the reference image? I’d like to understand your workflow and see where the mismatch is coming from.

sure - here is an example of the reference image and output

Very cool!

Yep, thanks man. Have you tried new version?

Yeah exciting stuff, let us know what you think about the Privateer 3D model api endpoint, it might help!

The multi-prompt approach to progressive asset construction is the real breakthrough here. Moving from static image to rigged, animated WebGL in one pipeline changes everything.

Absolutely, that progressive workflow is what I’m most excited about too. Instead of trying to generate everything perfectly in one shot, we can build, inspect, and refine each stage until the asset is ready to ship. Curious what you’d build with this pipeline?

I imagine Claude can take the prompts you used to animate and rig properly other characters properly?

Brooo, you caught me 😂 You basically just described the exact things I’ve already been implementing in the pipeline. I’m just not making it fully generalized yet because that’s planned for v1.8 in the roadmap. I need to finish v1.6 first 🥲 But honestly, you should contribute with me on this. I’d love to build that part of the pipeline together!

I feel like I don’t know enough 😅 But if I’m able to contribute sure, just let me know how I guess? I have been essentially combining a vfx editor with your stuff and the end goal will be to use ai generated videos with the engine to create ability visuals and animations

Bro, you definitely know enough to start 😂 Don’t worry about contributing directly to the core yet. Just keep experimenting with your workflow and show me what you build. If we can get the video → motion/VFX → engine flow working, we can turn it into a proper stage of the pipeline together. 🔥

Just hype up my game when it comes out if I end up contributing 😂😂 I’ll shoot you a dm

Absolutely, bro 😂 Anyone building with img2threejs gets a shoutout from me, and if you contribute, I’ll definitely hype your game when it drops. And for you, I’ll never charge anything for it, you’re good haha.

Outstanding work man

Appreciate you, bro! 🙏 More crazy stuff coming soon. Ah did you try 1.5.1?

Not yet - watching your development while I work on a cybersec project of my own, and keeping tabs for when I get back into game dev or start a small three.js game project 🤓

Sounds good, bro! Take your time - I’ll keep building. Hopefully when you jump back into game dev, img2threejs will be ready to save you a ton of time 😂

I was really interested in this tool, uploaded a detailed GLB of a cat model and reference image. Than ran the process in my Claude Code. The result was a brown globe with a smaller brown globe. It did move though. What am I doing wrong?

Also, please share with me glb file

I'll DM you Nick.

Nice, I'll check

How much is the cost ?

It costs around 600K tokens for the entire process

With every example you raise the bar. Looks awesome. Thank you for promoting also that is truly helpful.

Thank you, I really appreciate that. ❤️ Honestly, comments like yours are a big part of what keeps me going. I’ve spent a lot of time and way too many tokens 😂 patiently iterating on this, and seeing people genuinely find it useful makes it all worth it. Really grateful to have you along for the journey.

seriously impressive stuff!

Glad to hear that, thank you!!

one image to a GLB with 27 clips already?? that's the loop I want. TIME TO BUILD. you dropping the VFX prompt or keeping that one private?

Yep, The 27 clips come from the multi-prompt character workflow, the VFX itself was a separate single focused prompt. I did post the exact VFX prompt above. Go build it 🔥

110k tris with 27 clips is the easy part honestly. curious what you're doing for collision on the generated rig — does the pipeline spit out a hull, or are you hand-fitting capsules to the bones after?

Tripo/Hyper3D already has basic rigging, but it gets pretty rough when you want complex animations like the ones in this demo. I had to fix and refine the rig through my pipeline. The pipeline already supports this now, you can simply ask img2threejs to create the rig for you. For easier iteration, you can also ask the agent to add a toggle button that shows the skeleton inside the character, which makes it much easier to inspect and give feedback on the rig. And yep, the skill already supports this. You can try it right now

Amazing work as always!

Thank you, my friend!!

These are some of the most disgusting animations I've ever seen

Haha, stay positive my friend 😄 We’re at the “make it work first” stage right now. Getting the whole pipeline from image → rig → animation → WebGL working is the hard part. We’ll worry about making the animations actually beautiful in v1.7.