跪拜 Guibai
← All articles
Frontend · Three.js · AI Programming

Building a 3D Smart Exhibition Dashboard with Codex, Without Writing a Line of Code

By 柳杉 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

This walkthrough turns AI-assisted 3D dashboard production into a repeatable, documented workflow, showing that complex interactive scenes no longer require manual GLSL or tedious Blender edits. For teams evaluating AI coding tools, it demonstrates a concrete pipeline where the developer's role is specifying intent and checking layers, not typing imperative code.

Summary

A hands-on account shows how AI coding tools can drive a complete 3D visualization build. The process starts with converting industry research into an executable Brief and data contract, then generating three design directions and freezing one as a baseline. Asset extraction avoids the trap of cutting whole panels into images; text and charts are redrawn, while materials and geometry are handled separately.

Modeling uses Blender-MCP with Codex writing Python scripts that drive Blender. The work emphasizes scale unification, object hierarchy, bevel-based edge highlights, weighted normals, and PBR material separation. Web integration relies on React, ECharts, React Three Fiber, and a dashboard scaffold, with shared state linking charts, spatial labels, and camera navigation.

On-screen content splits into video textures, Canvas-drawn dashboards, and CSS3D for an operable computer. Spatial cards and camera positions are computed from perspective and occlusion checks. The final model runs at 348.7k triangles and 11.4 MB, with AO baked into an atlas. The author closes with five practices to carry forward, centered on making every requirement executable and every change traceable.

Takeaways
— The project fixed sample data: 720 cumulative admissions, 600 departures, 120 currently in-hall, and six zones summing to 120.
— The chosen design B was frozen at 1664*936 and mapped to 1920*1080 using a 15/13 coordinate conversion.
— Asset extraction separates text, charts, and geometry; text is redrawn with real fonts, not baked into images.
— Blender-MCP is used with Codex-generated Python scripts that execute bpy operations, saving editable scenes and exporting GLB.
— Modeling begins with a representative slice (entrance and product zone) before expanding to the full hall.
— Bevel radius is constrained by the thinnest dimension, with an upper limit, not a uniform 28mm value.
— Glass parameters include Transmission Weight 0.985, IOR 1.47, and Thickness 0.02 in Blender.
— AO is baked into a 2048*2048 atlas on a separate ContactAO_UV channel, using an Emission output bake.
— The final model has about 348.7k triangles and a 11.4 MB size.
— The workflow keeps editable Blend files, runtime GLB, textures, and a manifest as a matching set.
Conclusions

The distinction between 'play inside the hall' and 'click to popup' forces a technology split: video textures, Canvas textures, and CSS3D each solve a different interaction depth, showing that one rendering approach cannot cover all screen content.

Camera computation is treated as a mathematical problem (perspective + occlusion sampling), not a hardcoded animation, which makes navigation robust across different screen aspect ratios.

The author's emphasis on 'research leaving executable requirements' suggests that AI tools work best when the human produces precise constraints; vague goals yield vague output, and this pipeline is essentially a constraint-compilation exercise.

The practice of freezing a design draft and mapping coordinates (15/13) highlights a discipline that prevents later disputes about placement, but it also implies that AI-generated designs are treated as reference blueprints rather than pixel-perfect finals.

Baking AO separately from direct lighting and using an atlas shows an awareness that real-time rendering needs precomputed occlusion to ground objects visually, a technique often overlooked in simple Three.js demos.

Concepts & terms
Blender-MCP
A bridge plugin that lets external programs (like Codex-generated Python scripts) control Blender operations through the Model Context Protocol, enabling scripted 3D modeling and asset export.
PMREM
Pre-filtered Mipmap Radiance Environment Map, used in Three.js to generate an environment map from a room scene, providing roughness-dependent reflections for PBR materials.
Contact AO
Ambient occlusion baked to a dedicated UV atlas, used to darken contact points between objects (like cabinet seams and floor) without affecting the direct lighting or specular response.
CSS3DRenderer
A Three.js renderer that places actual DOM elements in 3D space, used here to create an interactive desktop inside the 3D hall, allowing real mouse and keyboard input.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗