From Prompt to Interactive 3D Storytelling: An AI-Assisted Development Practice for Cultural Education

Background: Making “Carving” an Interactive Narrative

In digital cultural education, a long-standing challenge is how to help ordinary audiences understand the creation process of a static artwork, rather than only admiring its final form. Take classical sculpture: viewers usually see the finished marble statue, but rarely get an intuitive sense of the logic of “gradually releasing a human figure from a block of stone.”

This article documents a complete technical practice: using AI-assisted coding tools, the project started from a single open-ended creative brief and delivered a runnable, experienceable interactive website (in Chinese), plus a companion vertical short video. The process involved narrative design, 3D asset integration, front-end interaction development, and video composition — offering broadly transferable lessons.

Defining the Requirement: Give the AI Creative Freedom, Keep the Delivery Standard for Yourself

The original brief can be summarized as:

Build an interactive website (in Chinese) that helps ordinary people understand how a classical sculpture is born from a block of stone, and gives them a new perspective on the act of carving — enough to make them stop and look closely at the work. The narrative angle, visual style, interaction design, and technical approach are up to the creator, but the deliverable must be a runnable, experienceable product — not a proposal or a mockup.

The key is combining openness with constraints:

• Openness: no prescribed interaction form; the AI is free to choose the narrative structure;
• Constraint: the output must be a runnable artifact, not a concept deck;
• Goal orientation: the end goals are “understanding the carving process” and “wanting to observe the work.”

In practice, this way of defining requirements suits AI-assisted development well: it gives the model enough room to explore, while the hard “runnable” standard keeps the output from staying at the level of text descriptions.

Choosing a Technical Approach: Two Interaction Narratives Compared

During this practice, the AI tool produced two different implementation ideas, both built around the same real 3D-scan asset.

Route A: Dark-Room Subtractive Narrative

The first idea treats “carving” as subtraction: David is what remains in the stone.

• Scene design: the page opens on a dark room with a block of marble standing at the center;
• Core interaction: press and hold a “chisel” button; pieces of stone flake away and the statue gradually emerges;
• Narrative detail: an “undo” button is provided, but clicking it shows the message “marble has no undo key” — using the interaction itself to convey the irreversibility of carving.

This route is emotionally closer to the essence of carving: every strike is an irreversible decision.

Route B: Exhibition-Reader Narrative

The second idea is closer to a museum guide:

• Visual style: a paper-toned background, presented in four acts;
• Interaction: drag a slider to watch the stone reduce from a raw block to a statue, layer by layer;
• Pacing: users control the “material removal” progress themselves, which suits repeated observation.

This route is more restrained in how it delivers information, making it a good fit for general users with little art-history background.

Shared Technical Foundation: Real 3D Scan Assets

Both websites use the same statue data from a public 3D scanning community (CC BY-SA 4.0 license). This raises two engineering points:

1. Asset format: STL scan files need to be loaded and rendered in the front end;
2. Performance optimization: scanned models are typically high-poly and require decimation or LOD processing, otherwise mobile devices will stutter noticeably.

A typical loading flow looks like this (illustrative code):

// Pseudocode: load the STL and initialize the scene
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
const loader = new STLLoader();
loader.load('/assets/statue.stl', (geometry) => {
  geometry.computeVertexNormals();
  const material = new THREE.MeshStandardMaterial({
    color: 0xcccccc,
    roughness: 0.8,
    metalness: 0.1
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});

For the “material removal” effect, there are two common approaches:

• Geometric clipping: use clipping planes to progressively reveal different parts of the model;
• Particle/fragment simulation: spawn debris particles at the click position while hiding parts of the model.

The former is simple to implement and performs well; the latter is visually striking but requires more computing resources.

AI-Assisted Development: Division of Labor and Checkpoint Resumption

The most noteworthy part of this practice is how the AI tool actually behaved on a long, multi-stage task — and the strategies used to cope.

Task Splitting and Model Division of Labor

The project was split into two phases:

1. Website development: build the interactive 3D educational website;
2. Video production: generate a 60–90 second vertical short video (in Chinese) based on the website content.

For website development, an AI coding tool with strong code-generation capabilities was used. Its strengths:

• It could understand narrative requirements such as “dark room,” “chisel,” and “undo message,” and translate them into front-end interaction logic;
• It could search for and reference public 3D assets on its own;
• It could output runnable HTML/JS code.

In actual execution, however, context truncation became a problem: the task was cut off mid-run three times, so the project could not be completed in a single pass.

Checkpoint Resumption

Facing truncation, the chosen solution was to switch to a lighter, faster model and continue development directly from the existing project folder. The results:

• Website wrap-up: the remaining work took about 6 minutes;
• Video production: about 31 minutes.

The takeaway: in AI-assisted development, model capability and task continuity need to be evaluated separately. Strong models suit complex reasoning and creative generation, but on long tasks they run into context-length, cost, and speed limits; lightweight models suit wrap-up and engineering execution.

A reusable strategy:

Phase	Recommended model traits	Why
Creative and architectural design	Strong reasoning, long context	Needs to understand narrative and interaction
Code implementation and wrap-up	Fast, low cost	Needs high-frequency iteration and debugging
Video/multimedia generation	Multimodal capability	Needs coordinated visuals, pacing, and sound

Video Generation: From Website to Vertical Storytelling

Once the website was complete, the next step asked the AI to produce a 60–90 second vertical short video (in Chinese) based on the completed research and site content, with the goal of helping general viewers grasp the essence of the site and become interested in learning more.

Video Narrative Design Points

• Duration: 60–90 seconds, suited to short-video platforms;
• Aspect ratio: 9:16 vertical, optimized for mobile;
• Content source: reuse the 3D models, scenes, and interaction logic from the website;
• Narrative pacing: start from “a block of stone,” show the subtractive process step by step, and end with the finished statue;
• Sound and visuals: choose suitable background audio and subtitle pacing.

Deliverable Requirements

• A playable MP4 file;
• Editable project files;
• Notes on asset sources.

In practice, the video generation phase also ran into model quota limits; delivery was ultimately completed after switching models.

Lessons and Best Practices

Advice for Developers

1. Define requirements as “openness + hard constraints”: give the AI creative room, but require a runnable artifact;
2. Choose compliant assets: use openly licensed 3D scans (e.g., CC BY-SA) and attribute them properly;
3. Optimize performance early: scanned models are high-poly, so plan decimation or LOD up front;
4. Split tasks clearly: run website development and video production separately to avoid overly long single tasks;
5. Keep the project resumable: a clean project folder structure makes it easy to switch models and continue development.

Observations on the AI-Assisted Development Workflow

• Strong models have a clear advantage in the creative phase, but long tasks expose context and cost limits;
• Lightweight models are more efficient for wrap-up and engineering execution;
• Multi-model collaboration is the more pragmatic approach at the current stage.

Reusable Tech Stack Reference

• 3D rendering: Three.js or a similar WebGL library;
• Model loading: STL/GLTF loaders;
• Interaction: vanilla JS or a lightweight framework;
• Video generation: recompose footage from website assets and export a 9:16 MP4;
• Asset hosting: static file hosting or object storage.

Conclusion

The core value of this practice lies not in any particular website or video, but in validating a path: using AI-assisted tools, starting from a single open-ended creative brief, and — through multi-stage task decomposition, multi-model collaboration, and checkpoint resumption — delivering a complete work that runs, can be experienced, and can be shared.

For developers, this means AI-assisted development can now cover the full pipeline from idea to delivery. The key lies in how you design requirements, split tasks, choose tools, and switch strategies flexibly when you hit limits. These lessons are relevant to any team hoping to use AI to complete complex creative work.