跪拜 Guibai
← All articles
Frontend · Data Visualization · ChatGPT

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

By 柳杉 ·
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.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗