img2threejs Real-world Test - One-click Generation of 3D Models from E-commerce Product Images

Today I'm sharing some things suitable for making 3D models.

Creating a 3D model from a product image that can be rotated, disassembled, and animated on a webpage is incredibly time-consuming and labor-intensive by hand.

The recently popular GitHub project img2threejs The reference image is first broken down into outline, components, materials, and details, and then a Three.js 3D model is generated in stages, which can convert the image into 3D in just a few minutes.

I tried using an electric fan directly, and the result was excellent:

Case 1 Electric Drill

Prompt wordsUse img2threejs to reconstruct this image into an interactive Three.js model.

The chuck, torque ring, body, handle, and battery are clearly categorized, making them easily recognizable as belonging to the same type of drill. The disassembled view is also very clear, indicating that the programmed component division is quite successful.

The main differences are in the overall outline: the reconstructed fuselage is too long and square, the handle is too straight, and the connection between the battery and the fuselage lacks the continuous plastic curved surface of the original image.

Case 2 Teapot

Prompt wordsUse img2threejs to reconstruct this image into an interactive Three.js model.

The bluish-green glaze, mottled texture, spout, ring handle, and lid maintain the original image's character. The bright areas do not have an obvious plastic feel, and the colors are closest to the reference image.

However, the lower abdomen of the original image is fuller and the upper part is slightly tapered, while the reconstruction is closer to a rounded barrel shape; a larger spherical transition is used at the base of the spout and the connection with the handle, which is especially noticeable after disassembly.

Case 3 Fan

Prompt wordsUse img2threejs to reconstruct this image into an interactive Three.js model.

The protective net, spokes, impeller, motor, pitch support, and base form a complete mechanical system.

However, the visual number and angle distribution of the leaves in the reference image are inconsistent with the reconstruction. The base is flatter and wider, and the shape of the support is more regular than the original image.

case 4 Backpack

Prompt wordsUse img2threejs to reconstruct this image into an interactive Three.js model.

The zipper, webbing, buckle, side pockets, shoulder strap, and bottom hanging loop are all made into independent structures, and the top flap opening, shoulder strap swinging and disassembly functions are also quite complete.

However, the reference image shows fabric drooping, squeezing, wrinkles, local bulges, and asymmetry, while the reconstructed main body is a regular rounded cuboid.

Case 5 Perfume Bottle

Prompt wordsUse img2threejs to reconstruct this image into an interactive Three.js model.

The bottle proportions, short shoulder, cylindrical cap, black neck ring, liquid level, and suction tube are all captured. The cap removal, nozzle pressing, spray particles, and six structural breakdowns are all highly detailed.

However, the glass is too pale, and the thick walls do not refract enough light or concentrate enough light at the bottom of the bottle; the liquid is too opaque and reddish, while the original image shows a transparent amber color with varying depths.

img2threejs reconstructs a procedural Three.js model from a reference image of an object. The final product mainly consists of TypeScript and JSON; the model's geometry, materials, lighting, and component relationships are all written in the code, independent of downloaded model files.

Project address: https://github.com/img2threejs/img2threejs

The workflow first checks if the image can be decoded, if the subject is intact, if the resolution is too low, and if there is severe occlusion. Then... Agent Objects are broken down into three levels: macroscopic, mesoscopic, and microscopic. For detailed objects, a detailInventory must be created.

If the outline fails review, the generator will not create materials in advance; if the structure has not passed review, subsequent surface details cannot begin. This limitation can be avoided. Agent Thousands of lines of code are generated at a time, and then repeatedly reworked 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 combined into a comparison image. If a hard metric fails, the process is immediately reversed and modified; if multiple metrics contradict each other, the image is then passed to the visual model for judgment.

The project also includes iteration limits, stall detection, and duplicate defect detection to prevent... Agent Unlimited token consumption.

In the current project, while projected textures can make the front resemble the reference image, they cannot prove the correctness of the back structure. Multi-angle degradation checks have been added to the project, but speculation remains speculation. For CAD, industrial design, and reverse engineering projects requiring dimensional accuracy, providing only one image is unsuitable.

Before use, directly... Agent In the environment, clone the repository to the global skills directory:

git clone https://github.com/img2threejs/img2threejs.git `

Then give Agent Please provide a picture and clearly state its purpose.

Prompt wordsUse img2threejs to reconstruct the reference graph into a programmatic Three.js model.

We can think of img2threejs as a 3D prototype.

Objects with clear outlines and well-defined component relationships can quickly be transformed into web models that can be rotated, disassembled, and have animated content. However, fabric wrinkles, thick glass refraction, and transparent liquids still require further adjustments by the modeler.

img2three.js is best used before formal modeling. It can be used to verify the 3D display effect of the product, create event pages and launch demos, and provide educational content by using disassembly animations to explain the internal structure. It can also be used when model resources are scarce.fastComplete the interactive prototype.

Ideas that originally required multiple rounds of communication and handmade white models for verification can now be developed into a first draft with just a product image.

The generated results consist of TypeScript and JSON, and the proportions, materials, animations, and component relationships can all be modified. Developers can directly integrate the model into a webpage and then gradually add details based on the actual application.

Those who can truly save costs from img2threejs need to know which steps are suitable to be outsourced. Agent fastTrial and error: Which details must be left to human modeling experience?

Original link:A GitHub project garnered 7,000 stars, turning images directly into 3D models.