Building a 3D Interactive Narrative Website with LLMs: A Full AI-Assisted Creation Case Study

I. From Concept to Product: An Ambitious AI Collaboration Experiment

When building an interactive website to help the general public understand the art of sculpture, the traditional development process typically begins with requirement documents, wireframes, and visual mockups. However, this time, I delegated the entire creative direction, narrative structure, visual style, and technical roadmap to a Large Language Model (LLM). The task prompt was simple: create an interactive website that allows users to understand how Michelangelo’s David was born from a block of stone, with the goal of leaving viewers with a new understanding of “sculpting.”

This task was considered “ambitious” because it simultaneously tested several core capabilities of the model:

1. Thematic Abstraction: The ability to translate the physical process of “sculpting” into a digital interactive metaphor.
2. Technology Selection: The ability to handle high-precision 3D models within a browser environment while ensuring a smooth interactive experience.
3. Narrative Design: The ability to use visual guidance and interactive feedback to evoke emotional resonance, rather than merely presenting information for users to browse.

The final delivery requirement was a “runnable, experiential product,” not just a proposal or mockup. This meant the model had to autonomously complete the entire workflow, from environment assessment and asset gathering to code writing and testing/debugging.

II. Comparing Two Design Solutions: Different Artistic Approaches

Upon receiving the task, two independent AI sessions (based on different model instances) provided completely different solutions, perfectly showcasing AI’s diversity in creative fields.

Solution A: The Metaphor of “Subtraction” in a Dark Room

The first solution directly translated “sculpting” into the user’s interactive behavior. Upon opening the website, the user finds themselves in a dark room with an unsculpted marble cube standing in the center. By pressing and holding a button on the screen to simulate the “chiseling” action, pieces of stone break off, gradually revealing the David statue inside.

The brilliance of this design lies in its interactive copywriting. The website provides an “Undo” button, but when the user clicks it, the system displays a prompt: “Marble has no undo key.” This detail instantly elevates the philosophical depth of the work, integrating the irreversibility of the physical world into the digital experience and giving users a tangible sense of the “decisiveness” required in artistic creation.

Solution B: A Four-Act Play in the Style of an Exhibition Booklet

The second solution took a route more aligned with traditional art education. Using a paper-like visual style, the website divided the experience into four acts, corresponding to the key stages of the David statue from block to finished product. By dragging a slider, users can intuitively see the entire process of the stone evolving from a simple geometric block to David through layers of reduction.

This solution focused more on narrative completeness and the accuracy of knowledge transfer, making it suitable as a teaching tool or exhibition supplement. Although its interaction method is simpler, the visual display of the “evolution process” was much clearer.

The Common Foundation: Real 3D Data

It is worth emphasizing that both solutions utilized the same real 3D scan data of the David statue. This data originated from a well-known open-source cultural heritage scanning project, released under the CC BY-SA 4.0 license. This ensured that the final artistic details presented were authentic and reliable, rather than AI-fabricated models. This laid a solid professional foundation for the entire project.

III. Secondary Creation for Short Video: From Website to Promotional Material

After completing the website, the next step was to instruct the AI to create a 60-90 second short video based on the finished site and research. The goal was to introduce the essence of the website to the general public and spark their interest in the David statue. This phase introduced new requirements for the AI’s capabilities:

• Visual Language: How to translate interactive scenes from the website into visuals suitable for video pacing.
• Narrative Reconstruction: How to clearly explain core concepts through editing and voiceover without relying on manual user interaction.
• Format Adaptation: Outputting a 9:16 vertical MP4 format suitable for mobile distribution.

In this phase, the model needed to invoke video generation capabilities to actually produce a playable final cut. This is more complex than simply writing code, as it involves the coordination of multiple technologies such as video rendering, audio synthesis, and editing.

IV. Key Findings from the Implementation Process

Several technical details and engineering insights from the testing process are worth sharing:

1. Balancing Task Complexity and Model Performance

In the early stages of the experiment, a high-end flagship model version was used. Its creative capabilities and code quality were indeed superior, but it suffered from slow response times and high invocation costs. Later released “lightweight enhanced” parameter versions showed significant performance improvements, reducing costs to half that of the flagship version while increasing speed several times over. This suggests that in actual engineering, we should dynamically select model versions based on task complexity—heavier models for the creative exploration phase, and more cost-effective versions for repetitive execution or batch tuning.

2. Optimization Strategies for Web-Side 3D Models

Directly loading high-precision 3D scan models (STL format) in a browser often leads to performance bottlenecks. The general optimization path adopted in the tests included:

• Mesh Decimation: Using mesh decimation algorithms to reduce the model’s polygon count from the millions down to around the hundreds of thousands, balancing loading speed and visual quality.
• Format Conversion: Converting STL format to a more web-friendly rendering format (such as GLTF/GLB). The latter supports textures, materials, and compression, significantly reducing file size.
• Lazy Loading and Progressive Rendering: Loading only the base scene on the initial screen, and dynamically loading the high-precision model upon user interaction to avoid a blank screen wait.

Below is a typical example of model loading optimization code (based on a general Web 3D library):

// Load the compressed model using GLTFLoader
const loader = new GLTFLoader();
loader.load('assets/david_compressed.glb', (gltf) => {
  const model = gltf.scene;
  // Enable shadow and material effects for the model
  model.traverse((child) => {
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;
      child.material.roughness = 0.4; // Simulate marble texture
    }
  });
  scene.add(model);
  renderer.setAnimationLoop(animate);
}, undefined, (error) => {
  console.error('Model failed to load:', error);
});

3. The Importance of Prompt Engineering in Multimedia Generation

Whether generating a website or a video, precise prompt guidance is decisive to the final outcome. Effective prompts should not only describe “what to do” but also explain “why to do it” and “who the target audience is.” For example, in the video generation task, adding phrases like “aimed at the general public” and “make them want to learn more” prompted the model to adjust the narrative pacing and visual style, making it much more accessible.

V. Conclusion and Future Outlook

This test proved that current LLMs already possess the end-to-end capability to take an abstract concept and turn it into a complex digital product. They can not only write code and invoke 3D rendering engines, but also perform aesthetically valuable interactive design, and even complete automatic video editing and dubbing.

However, the process also exposed several limitations:

• Delivery Stability: Interruptions or errors may still occur during long-process tasks, requiring human intervention to fix.
• Creative Consistency: Different model instances yield vastly different solutions. If a specific style is required, stricter constraints must be provided within the prompts.
• Resource Consumption: High-quality multimedia generation tasks demand significant computing resources, making cost control a key focus for the future.

For developers, the future focus should not be on debating “whether AI can do it,” but rather on how to design more efficient task decomposition workflows, craft more precise prompts, and integrate AI outputs into existing content production pipelines. This is undoubtedly a new field full of challenges and opportunities.