Frontend · Data Visualization · ChatGPT

Zero-Code 3D Charging Station Dashboard Built End-to-End with ChatGPT 5.6

By 柳杉 · Jul 13, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

The difference between 27 wasted assets and 20 production-ready ones came from writing acceptance criteria into the prompt, not from switching to a stronger model. Teams building AI-driven asset pipelines will hit the same wall: models optimize for literal compliance, not usability, unless you define what "done" actually means.

Summary

The pipeline runs design draft → transparent asset slicing → Blender automated modeling with PBR materials → baked texture export → React dashboard scaffold assembly. ChatGPT 5.6 (Sol) handled every stage through structured prompts, including issuing repeatable Blender modeling scripts via blender-mcp and grouping 1,000+ objects by future interactivity before baking to avoid frontend rework. The final GLB compressed from 77.3 MB to 25.32 MB with 23 interactive root nodes preserved.

The first asset-slicing attempt produced 27 unusable assets because the prompt demanded RGB with no alpha channel while also expecting transparency — a self-contradiction the model faithfully executed. Rewriting the prompt to include explicit acceptance criteria (PNG-32 RGBA, four-corner alpha check, white/black background edge verification) turned the output from garbage into 20 production-ready transparent assets. The same principle applied to modeling: a first pass got shapes right but materials looked like plastic toys; adding PBR workflows with separate metallic, roughness, clear-coat, and transmission passes fixed it.

Two architectural decisions prevented downstream chaos. Grouping objects by interactivity before texture baking meant the frontend Three.js component could treat clickable charging piles and battery cabinets as independent objects while rendering background buildings as a single atlas. Using a 1920×1080 React scaffold with block registration and autofit.js scaling meant the sliced assets, baked textures, and 3D scene all snapped into a drag-and-drop layout without modifying scaffold source code.

Takeaways

— ChatGPT 5.6 (Sol) drove the full pipeline — design iteration, asset slicing, Blender modeling, texture baking, and web assembly — with zero manual code written.

— The first slicing run produced 27 assets that were all unusable: icons were blurry when scaled and had solid-color backgrounds instead of true alpha transparency.

— The original prompt contained a contradiction: it demanded RGB with no alpha channel while expecting transparent backgrounds, and the model faithfully executed the broken spec.

— Rewriting the prompt to include per-step acceptance criteria — PNG-32 RGBA, four-corner alpha at zero, white/black background edge checks — turned output from garbage into 20 clean transparent assets.

— PBR material workflows (separate metallic, roughness, clear-coat, transmission passes) fixed a first-pass model that had correct geometry but looked like flat plastic toys.

— Objects were grouped by future interactivity before texture baking: 23 clickable root nodes baked individually, background geometry merged into atlases.

— The final GLB compressed from 77.3 MB to 25.32 MB with 107 embedded WebP textures at max 1024px edge, preserving all interactive nodes.

— A 1920×1080 React dashboard scaffold with block registration and autofit.js scaling accepted the sliced assets, baked textures, and Three.js 3D scene without modifying scaffold source.

— ChatGPT 5.6 still could not fully reproduce the design draft in 3D or achieve industrial-grade material quality, though the results were usable.

Conclusions

Prompt engineering for asset pipelines is fundamentally about defining acceptance criteria, not describing tasks. A model will optimize for literal compliance with whatever spec you give it — if the spec is self-contradictory or missing quality gates, the output will be precisely wrong rather than approximately right.

The gap between a geometrically correct 3D model and one that looks real is entirely in the material pipeline. PBR workflows with separate metallic, roughness, clear-coat, and transmission passes are not optional polish; they are the difference between a toy and a scene.

Baking-time grouping decisions are irreversible and propagate directly into frontend architecture. Deciding which objects will be interactive before baking avoids re-baking the entire scene later — a cost that scales with scene complexity.

AI-driven 3D modeling still hits a ceiling on fidelity. The model produced usable geometry and materials but could not match the reference design's industrial-grade texture, suggesting the bottleneck is in the model's visual understanding rather than the toolchain.

Concepts & terms

blender-mcp

A Model Context Protocol server that lets an AI agent like ChatGPT issue structured, repeatable Blender modeling commands — creating objects, assigning materials, and running scripts — without manual GUI interaction.

PBR (Physically Based Rendering) materials

A shading model that simulates real-world light behavior by separating surface properties into metallic, roughness, and other physically accurate channels, producing realistic metal, glass, and paint rather than flat plastic-looking surfaces.

ORM texture packing

A technique that stores Ambient Occlusion, Roughness, and Metallic data in the R, G, and B channels of a single image, letting a real-time renderer retrieve three material properties from one texture lookup.

Texture baking

The process of pre-computing lighting, shadows, and material detail from a high-detail 3D scene into 2D texture maps, so a real-time renderer can display complex visuals without calculating them per frame.

From the discussion

The discussion splits between curiosity about the toolchain and skepticism about the AI model's capability. One thread asks whether the 3D scene used three.js or Blender, and the author clarifies it was Blender driven through an MCP plugin for Codex. A separate exchange questions whether ChatGPT 5.6 is actually an improvement over 5.5, with one person finding it dumber and another insisting it is far more powerful. A detailed bug report notes severe click-target drift and truncated charts, while acknowledging the article's real focus on the Codex automation pipeline.

— Blender, not three.js, handled the 3D modeling, connected via a Blender MCP plugin to Codex for automated modeling.

— Opinion is split on ChatGPT 5.6 versus 5.5: one view holds that 5.6 feels dumber with no noticeable difference, while the opposing view claims 5.6 is significantly more capable.

— The interactive dashboard has concrete bugs—charging-pile click targets are badly misaligned and charts render incompletely—but the article's core value is demonstrating the Codex-driven zero-code workflow, not the polish of the final UI.

— The author intends to fix the reported bugs manually over the weekend, while the bug reporter plans to delegate future 3D fixes back to Codex.

Featured comments

不关橙猫猫的事

Is there a big difference between 5.6 and 5.5? I don't feel any difference using them; 5.6 even seems a bit dumber.

柳杉

I think 5.6 is way more powerful.

羽晞

The click target recognition on the charging pile is way off—you can barely select it at all. The charts below don't display fully. But the article is mainly about how to use Codex for automated design, asset slicing, modeling, and so on. I'll study it when I have time [grin]. I'm not too familiar with 3D stuff though, so I'll probably just hand those bugs back to Codex to fix.

柳杉

I'll take a look at the bugs over the weekend and fix them [grin].

See top comments, translated →

Source: juejin.cn ↗ Google Translate ↗ Backup ↗