Today I'm sharing something suitable for making 3D models.
Turning a product image into a 3D model that can be rotated, disassembled, and animated on a web page by hand is truly time-consuming and labor-intensive.
A recently popular GitHub project img2threejs first breaks the reference image into outlines, parts, materials, and details, then generates a Three.js 3D model in stages, converting an image to 3D in just a few minutes.
I directly tried an electric fan, and the result was very good:
01. Project hands-on test
case 1 electric drill
Prompt: Use img2threejs to reconstruct this image into an interactive Three.js model.
The hierarchy of the chuck, torque ring, body, handle, and battery is complete, and at first glance it can be recognized as the same type of electric drill. The exploded view is also very clear, showing that the procedural part division was quite successful.
The main gap is in the overall silhouette: the reconstructed body is too long and too boxy, the handle is too straight, and the connection between the battery and the body lacks the continuous plastic surface of the original image.
case 2 teapot
Prompt: Use img2threejs to reconstruct this image into an interactive Three.js model.
The cyan-green glaze, mottled texture, spout, ring handle, and lid together maintain the temperament of the original image; the highlights have no obvious plastic feel, and the color is also the closest to the reference image.
But the original image has a fuller lower belly and a slightly narrower upper part, while the reconstruction is close to a rounded barrel shape; the base of the spout and the connection of the handle use oversized spherical transitions, which is especially obvious after disassembly.
case 3 fan
Prompt: Use img2threejs to reconstruct this image into an interactive Three.js model.
The guard grille, spokes, impeller, motor, tilt bracket, and base form a complete mechanical system.
But the visual number and angular distribution of the blades in the reference image are inconsistent with the reconstruction; the base is too flat and too wide, and the bracket shape is also more regular than in the original image.
case 4 backpack
Prompt: Use img2threejs to reconstruct this image into an interactive Three.js model.
The zipper, webbing, buckle, side pockets, shoulder straps, and bottom loops are all made as independent structures, and the top lid opening, shoulder strap swinging, and disassembly functions are also fairly complete.
But the reference image has fabric sagging, compression, wrinkles, local bulging, and asymmetry, while the reconstructed main body is a regular rounded rectangular prism.
case 5 perfume bottle
Prompt: Use img2threejs to reconstruct this image into an interactive Three.js model.
The bottle proportions, short shoulder, cylindrical cap, black neck ring, liquid surface, and dip tube are all captured. Removing the cap, pressing the spray head, spray particles, and the six groups of structural decomposition are highly complete.
But the glass is too faint, and the thick-wall refraction and bottle-bottom light concentration are insufficient; the liquid is too opaque and too red, whereas the original image is a transparent amber color with depth variation.
02. Project introduction
img2threejs reconstructs a procedural Three.js model from a single object reference image. The final result is mainly composed of TypeScript and JSON; the model geometry, materials, lighting, and part relationships are all written in code and do not depend on downloaded model files.
Project address:https://github.com/img2threejs/img2threejs
During workflow operation, it first checks whether the image can be decoded, whether the subject is complete, whether the resolution is too low, and whether the occlusion is severe. Then the Agent breaks down the object at the macro, meso, and micro levels, and detailed objects also require establishing a detailInventory.
The silhouette has not passed review, so the generator will not create materials in advance; the structure has not passed yet, and the later surface details cannot begin either. This constraint prevents the Agent from generating thousands of lines of code at once and then repeatedly reworking them with proportions, materials, and lighting all mixed together.
Each stage is rendered in the browser, and then the reference image and the rendered image are composited into a comparison image. When hard metrics fail, it is sent straight back for modification; when multiple metrics contradict each other, the images are handed to a vision model for judgment.
The project also sets iteration limits, stagnation detection, and repeated defect detection to prevent the Agent from consuming tokens endlessly.
But in the current project, projected textures can make the front look very much like the reference image, yet they cannot prove that the back structure is correct. The project has added multi-angle degradation checks, but inference is still inference. CAD, industrial design, and reverse engineering projects with dimensional accuracy requirements are not suitable for being given only a single image.
Before use, directly in the Agent environment, clone the repository into the global skills directory:
git clone https://github.com/img2threejs/img2threejs.git `
Then give the Agent an image and clearly state the purpose:
Prompt: Use img2threejs to reconstruct the reference image as a procedural Three.js model.
03. Dig a little deeper
We can think of img2threejs as a 3D prototyping machine.
Objects with clear silhouettes and clear part relationships can quickly be made into web models that can rotate, be disassembled, and play animations, but cloth wrinkles, thick glass refraction, and transparent liquids still require modelers to continue adjusting.
img2threejs is best placed before formal modeling. It can first verify the 3D display effect of a product, create campaign pages and launch event demos, educational content can use disassembly animations to explain internal structures clearly, and it can also quickly fill in interactive prototypes when model resources are lacking.
Ideas that originally required multiple rounds of communication and manual white models to verify can now produce a first draft with just one product image.
The generated results consist of TypeScript and JSON, and the proportions, materials, actions, and part relationships can all continue to be modified. Developers can plug the model directly into a web page and then gradually add details according to the actual use.
The people who can truly save costs with img2threejs need to know which steps are suitable to hand to an Agent for rapid trial and error, and which details must be left to human modeling experience.
Original link:GitHub grabs 7K Stars, images directly turn into 3D models