DEV Community

Om Prakash
Om Prakash

Posted on • Originally published at pixelapi.dev

Turning Product Photos Into 3D Models With a REST API Call

I've been building a small e-commerce side project for the last few months. Nothing fancy — a store that sells handmade ceramics. The owner kept asking me about 3D previews so customers could rotate items before buying. I knew what she wanted, but I also knew what it usually takes to get there: a 3D artist, a weeks-long asset pipeline, Blender exports, mesh cleanup. For a small shop selling mugs, that's a non-starter.

Then I started poking at PixelAPI's Image to 3D endpoint and built the whole thing in an afternoon.

What I Actually Needed

The requirement was simple in concept: take the product photos the shop owner already has (shot on a table with decent lighting), and let customers spin a 3D version of the item in the browser. The photos exist. The 3D model does not. The gap between those two things is where this API lives.

The Image to 3D endpoint takes a single image URL and returns a 3D model asset. No special camera rig, no multi-angle capture session, no photogrammetry pipeline. One image in, one model out, in under three seconds.

The Actual Integration

Here's a minimal Node.js example of how the call looks:

const fetch = require("node-fetch");

async function generateModel(imageUrl) {
  const response = await fetch("https://api.pixelapi.dev/v1/3d/image-to-3d", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.PIXELAPI_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      image_url: imageUrl,
      output_format: "glb",
    }),
  });

  if (!response.ok) {
    throw new Error(`API error: ${response.status}`);
  }

  const data = await response.json();
  return data.model_url;
}

// usage
generateModel("https://yourstore.com/products/mug-001.jpg")
  .then((url) => console.log("Model ready:", url))
  .catch(console.error);
Enter fullscreen mode Exit fullscreen mode

That's the whole thing. The model_url in the response is a .glb file you can drop straight into a Three.js scene, a model-viewer web component, or whatever renderer you're already using on the frontend.

For the ceramics shop I used <model-viewer> from Google because it's zero-config and works on mobile:

<model-viewer
  src="https://cdn.yourstore.com/models/mug-001.glb"
  alt="Handmade ceramic mug"
  auto-rotate
  camera-controls
  style="width: 100%; height: 400px;"
></model-viewer>
Enter fullscreen mode Exit fullscreen mode

The owner uploads a JPEG, my backend hits the API, stores the .glb in S3, and the product page shows a spinner for a couple of seconds before the model loads. That's the entire pipeline.

Where This Actually Works Well

I've been testing it across a few different use cases since the ceramics project.

Product thumbnails that become 3D previews. If you have existing product photography — and most e-commerce clients do — you can retroactively add 3D previews without a reshoot. The model quality depends heavily on the source photo: clean background, good lighting, and a clear silhouette produce noticeably better results than cluttered or dark shots. Worth mentioning to whoever is doing the photography.

Rapid prototyping for game assets. A friend who makes small browser games has been using it to sketch out prop assets. He drops in a sketch or a reference photo, gets a rough mesh back, then refines it in Blender. It's not replacing the modeling step — it's compressing the "what does this thing roughly look like in 3D" discovery phase from days to minutes.

Content creation pipelines. If you're building content tools for creators — say, a platform that lets influencers merchandise their own stuff — having 3D previews without a manual asset creation step is a real differentiator. A creator uploads a design, your platform generates a mock-up, and a 3D preview appears automatically.

A Few Things Worth Knowing Before You Build

The sub-3s latency is real but not uniform across all inputs. Simple, well-lit objects on clean backgrounds consistently come back fast. Complex scenes or images with lots of background noise take longer, and the model quality is lower. For a production workflow, I'd recommend a preprocessing step that crops and normalizes the image before sending it — it genuinely improves output.

You also want to think about how you handle the model lifecycle. If you're generating 3D models on demand, cache them. There's no reason to regenerate a model for the same product image twice, and it keeps your costs predictable as traffic grows.

The free tier includes 100 credits with no credit card required, which is enough to build out a full prototype and stress-test your integration before you commit to anything.

Why REST Matters Here

The thing that made this fit my workflow is that it's just an HTTP endpoint. I didn't install a new SDK, I didn't set up a Python environment for some ML-adjacent toolchain, I didn't learn a proprietary CLI. My existing infrastructure — Node backend, standard fetch calls, existing auth patterns — worked without modification.

For teams that are already building on REST APIs, this is the integration style that lets you ship in an afternoon rather than a sprint.

Where I'd Use This Again

Honestly, any project that involves physical objects and a web interface is worth evaluating. AR try-on for a fashion client, 3D visualization for a furniture catalog, asset previews in a design tool — any of these would benefit from automated 3D generation from existing photography.

The ceramics shop has had the feature live for about six weeks. The owner told me customers spend more time on product pages now. I have no idea if it's converting better — she doesn't track that closely — but she's happy, and the integration was genuinely low-effort.

If you want to try it yourself, grab your free credits at pixelapi.dev and run the snippet above against one of your own product images. The feedback loop is fast enough that you'll know within a few minutes whether it fits your use case.

Top comments (0)