Building Interactive 3D Web Experiences with LLMs: Reconstructing Michelangelo's David

In current practices combining intelligent programming tools with frontend engineering, a persistent exploration direction is enabling Large Language Models (LLMs) to do more than just generate code snippets. The goal is to have them autonomously lead the completion of comprehensive websites featuring complex interactions, 3D rendering, and deep narrative logic. Recently, an interactive website development task aimed at restoring the birth process of Michelangelo’s David demonstrated the possibilities and challenges of this technical path. The project required the model not only to understand art history but also to possess comprehensive capabilities in frontend and backend architecture, 3D asset processing, and multimedia delivery.

1. Project Requirements Abstraction and Technical Challenges

The core objective of this practice was to create an interactive website that allows the general public to intuitively understand how marble is chiseled into the David statue. For an intelligent programming tool, this is not a simple page generation task, but a complex system engineering process with multiple technical constraints.

1. Non-standard Narrative and Interaction: Traditional websites focus on information display, whereas this project required a digital expression of the physical “sculpting” process. The model had to autonomously decide the narrative perspective, visual style, and interaction methods. For example, using metaphorical interactions like a “dark room” or “hold the button to chisel” to convey the philosophical concept of “what remains of the marble.” It even designed an exception handling message, “Marble has no undo button,” to enhance immersion.
2. 3D Asset Lightweighting and Rendering Pipeline: The project utilized real 3D scan data of the sculpture (an open-source STL model under the CC BY-SA 4.0 license). The STL format is typically bulky and lacks color and animation topology information. Loading it directly on the web causes severe performance issues. The model needed to plan a rational 3D pipeline, including mesh decimation, format conversion to glTF/GLB, and rendering scheduling on the frontend using WebGL or related 3D frameworks.
3. Closed-loop Engineering Delivery: The task explicitly required the delivery of a “runnable, experienceable product,” rather than stopping at the proposal or mockup stage. This meant the AI agent had to autonomously drive code writing, dependency management, environment configuration, and final deployment.

2. Engineering Implementation of Visual Style and Narrative Path

In the specific implementation phase, the AI agent demonstrated distinct technical judgments. One approach adopted a highly immersive dark theme, while the other used a paper-colored background reminiscent of exhibition catalogs with a multi-act slider interaction. Both approaches have different technical focuses.

1. Immersive Sculpting Interaction Scheme

This scheme simulates physical sculpting actions, translating the chipping of stone into dynamic changes in geometry. Technically, this often requires handling complex mesh Boolean operations or pre-rendered multi-state transitions.

Considering real-time rendering performance on the web, conducting real-time Boolean operations on high-precision meshes is highly impractical. A superior technical approach is “state slicing”: pre-calculating mesh models for different sculpting stages in 3D processing software, and triggering smooth transitions between different LOD (Level of Detail) models on the frontend via user interaction (such as the duration a button is held down). The pseudocode logic is as follows:

// 3D model state transition logic pseudocode
const sculptingStages = [
    loadModel('stage_0_raw_block.glb'),
    loadModel('stage_1_rough.glb'),
    loadModel('stage_2_refined.glb'),
    loadModel('stage_3_final_david.glb')
];
let currentProgress = 0;
function handleSculptButtonDown(event) {
    // Trigger progressive animation
    animateMeshTransition(currentProgress, currentProgress + 1);
    currentProgress++;
    if (currentProgress === sculptingStages.length - 1) {
        showToast("Marble has no undo button");
        disableUndoButton();
    }
}

Additionally, the “dark room” effect can be achieved by adjusting Ambient Occlusion (AO) and spotlight parameters, guiding the user’s visual focus to the gradually revealing sculpture.

2. Multi-act Timeline Slider Scheme

Another approach leaned towards the rigor of educational reading materials. Using a four-act structure, it employs a slider to control the timeline. Technically, this scheme focuses more on linear state mapping. When the user drags the slider, the frontend listens to the onChange event, mapping the slider’s value (0-100) to the 3D model’s transparency or displacement map intensity. Through dynamic material replacement or mesh visibility control, it achieves the progressive reduction from a stone block to a sculpture.

3. Frontend Engineering Processing of 3D Scan Data

Regardless of the interaction scheme, the underlying layer relies on the same real STL scan data. Key steps in frontend engineering processing include:

1. Data Cleaning and Decimation: Raw scan data may contain millions of triangular faces. Algorithms (such as the Quadric Error Metric) must be used to decimate the mesh to the 100,000 level while preserving the sculpture’s key features, ensuring smooth 60FPS rendering in standard device browsers.
2. Format Conversion and Compression: Convert STL to glTF format supporting Physically Based Rendering (PBR), and use the Draco geometry compression algorithm to further reduce file size, significantly lowering network transmission latency.
3. CDN Distribution and Caching Strategy: 3D asset files are typically large. They need to be paired with cloud object storage and CDN acceleration services, setting appropriate Cache-Control headers to ensure rapid loading experiences for returning users.

4. AI Agent Workflow Execution Bottlenecks and Engineering Breakthroughs

In such long-chain, heavy-asset development tasks, the continuous execution capability of the AI agent is critical to project success. In practice, while high-spec reasoning models possess strong planning and code generation capabilities, they often face risks of high invocation costs, significant response latency, and long-context truncation.

1. Task Interruption and Context Truncation

The codebase of a complex project continuously expands during iteration. When an agent modifies deep logic, it can easily be forcibly truncated due to exceeding the context window or platform compute limits. In this practice, the project experienced multiple interruptions.
Engineering solutions to these issues include:

• Modular Decomposition: Splitting the project into independent modules (e.g., 3D rendering module, UI interaction module, narrative copy module) so the agent processes only a single context at a time.
• Project File Persistence and State Recovery: Utilizing local file systems or cloud persistent storage as the agent’s “external memory.” Even if the process restarts, the agent can quickly rebuild context by reading the project directory structure.

2. Multi-model Collaborative Scheduling Strategy

To balance compute costs and delivery efficiency, an effective practice is adopting a “heavy model for planning + light model for execution” collaborative strategy. When compute quotas are constrained, switching to a faster, cheaper general-purpose reasoning model (such as lightweight Flash models common in the industry) is a viable option. As long as the engineering scaffolding is well-established, lightweight models are fully capable of completing finishing code, fixing bugs, and automating multimedia video engineering synthesis based on the existing context of the project folder.

5. Extended Delivery: Automated Generation of Multimedia Assets

Beyond web delivery, the AI agent was also required to produce a 9:16 MP4 promotional video based on the website assets. This demands cross-modal engineering scheduling capabilities from the model: reusing the WebGL rendering context, reorganizing camera scripts, generating timelines, and ultimately calling video synthesis tools to output the final product.

The technical challenge here is that the agent must understand the logical rhythm of the video narrative and translate it into specific command-line parameters or API call sequences (e.g., frame rate control, aspect ratio cropping, audio track synthesis). Practice proved that as long as the engineering environment is properly configured, a lightweight model can complete the end-to-end closed loop—from code review and script generation to video rendering—in a very short time (e.g., under 30 minutes).

6. Conclusion and Developer Insights

Through this interactive development practice of restoring the David statue based on LLMs, we can draw the following key conclusions:

1. Narrative-Driven Technology Selection: Allowing the model to dictate the technical route can yield more innovative interactions (like the no-undo metaphor), rather than cookie-cutter template pages.
2. Standardized Preprocessing of 3D Assets: The core of web-based 3D applications lies in mesh optimization and format standardization, which is the foundation for ensuring cross-device compatibility.
3. Elastic and Fault-Tolerant Engineering Architecture: Facing complex, long-horizon tasks, it is imperative to preset fault-tolerant mechanisms for task interruptions, rely on file systems for state continuation, and flexibly utilize models of different specifications for relay development.

For enterprise developers, this result-oriented AI agent workflow demonstrates the immense potential of AI in handling full-stack projects encompassing 3D rendering, complex interaction logic, and multimedia generation. Through rational engineering decomposition and resource scheduling, the AI agent is fully capable of evolving from a “code assistant” to a “project deliverer.”