Building 3D Interactive Websites with AI: From Classic Sculptures to Immersive Experiences

1. Project Background: When AI Meets the Digital Narrative of Classic Sculpture

Recently, Large Language Models (LLMs) have rapidly advanced in code generation and creative assistance, showing significant potential for delivering runnable applications in a single pass. This article uses a practical case study—building an interactive 3D website depicting the creation of the classic marble sculpture David from raw stone to finished masterpiece—to systematically review the end-to-end experience from requirement analysis and technology selection to final delivery.

The core goal of the project was not simply to display a 3D model. Instead, it aimed to use interactive storytelling to help general audiences understand the essence of sculpture as a “subtractive art”: David was not “added” to the stone but “chiseled away” from a solid block of marble. This conceptual shift required careful design in narrative pacing, visual presentation, and interactive mechanisms, rather than just stacking technical components.

2. Requirement Breakdown and AI Assistance Strategy

2.1 Defining the Delivery Standards

Before issuing instructions to an AI coding tool, clearly defining the criteria for “done” is crucial. The delivery requirements for this project included the following dimensions:

• Narrative Integrity: Construct a storyline with a clear beginning, development, and conclusion, rather than just listing facts.
• Technical Runnability: Deliver a complete, deployable, and accessible website, not just mockups or pseudocode.
• Interactive Authenticity: User actions must provide immediate feedback, such as chiseling animations and progress control.
• Visual Consistency: The AI was allowed to determine the overall art direction autonomously, provided it served the thematic expression.

Once these requirements are clearly communicated to the AI tool in natural language, the generated solution often transcends a “checklist” delivery, resulting in a more design-oriented output.

2.2 The Role of AI in the Project

In this practice, the AI coding assistant assumed the following roles:

1. Architect: Recommended the tech stack based on thematic characteristics (e.g., WebGL/Three.js for 3D rendering, CSS animations for interactive feedback).
2. Content Planner: Autonomously designed the narrative structure, such as using a “rough stone in a dark room” as the opening scene.
3. Frontend Developer: Wrote HTML/CSS/JavaScript code to implement 3D model loading, interaction logic, and responsive layouts.
4. Copywriter: Generated compelling narration, including thought-provoking lines like “Marble has no undo button.”

3. Technical Implementation Path

3.1 Acquisition and Processing of 3D Assets

The project utilized publicly available high-precision 3D scan data as the core material. This data is typically distributed in STL format, originating from museum or cultural institution digitization projects under open licensing. Key technical points included:

• Format Conversion: STL files needed to be converted to web-friendly formats (like glTF/GLB) to reduce file size and improve loading speed.
• Model Optimization: Original scan data can have hundreds of thousands or even millions of polygons. Decimation tools were required to reduce this to a level that browsers can render smoothly (typically under tens of thousands of polygons).
• Lighting and Materials: To restore the marble texture, appropriate normal maps and ambient occlusion needed to be configured in the rendering engine.

// Typical glTF loading pseudocode example
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const loader = new GLTFLoader();
loader.load('david_optimized.glb', (gltf) => {
  const model = gltf.scene;
  model.scale.set(0.5, 0.5, 0.5); // Adjust size based on scene
  scene.add(model);
  // Configure material to simulate marble surface
  model.traverse((child) => {
    if (child.isMesh) {
      child.material = new MeshStandardMaterial({
        color: 0xf5f0e8,
        roughness: 0.7,
        metalness: 0.0,
      });
    }
  });
});

3.2 Core Design of Interactive Narrative

The most creative part of this project was the “reverse sculpting” interaction: users press and hold a button to trigger a “chisel” action, causing the stone to peel away layer by layer, gradually revealing the sculpture. The technical implementation of this design involved:

• Layer Peeling Animation: Pre-cutting the 3D model into multiple geometric layers (e.g., outer shell, intermediate layer, core form) and hiding them sequentially to achieve the “peeling” effect.
• State Management: Recording user progress to support pause and resume functionalities.
• Irreversible Narrative: Specifically designing an “undo” button that, when clicked, prompts a notification saying “Marble has no undo button,” reinforcing the thematic metaphor.

// Layer peeling logic example
let currentLayer = totalLayers - 1; // Start from the outermost layer
function chiselAction() {
  if (currentLayer > 0) {
    layers[currentLayer].visible = false;
    currentLayer--;
    updateProgressBar();
  }
}
function undoAction() {
  alert('Marble has no undo button.'); // Narrative feedback
}

3.3 Website Deployment and Accessibility

After development, the site needed to be deployed to a publicly accessible static hosting environment. Object storage and CDN services from modern cloud platforms can easily support the distribution of such static sites. Key considerations included:

• HTTPS Requirement: Loading 3D assets usually requires a secure context.
• Resource Preloading: Large 3D models require a loading animation to prevent a blank screen.
• Mobile Adaptation: Interactive button sizes and viewport scaling must account for mobile users.

4. From Website to Short Video: AI-Generated Video Extension

After the website was completed, the AI was further prompted to transform the same theme into a 60-90 second vertical short video. This phase tested the AI’s understanding of “cross-media storytelling”:

• Cinematic Language Transformation: The interactive experience of the website had to be translated into a linear narrative, requiring an opening hook, mid-section development, and an open ending.
• Asset Reuse Strategy: Directly reusing 3D rendered frames from the website, code-generated animation frames, or reorganizing visual assets.
• Pacing Control: The information density of a short video is much higher than web browsing. A three-part structure of “attract-explain-leave an aftertaste” needed to be completed within a limited timeframe.

In practice, different AI models exhibited varying video generation qualities. Some models performed better in visual coherence and audio-visual synchronization, but due to API usage limits and processing times, resource allocation required careful planning.

5. Practical Findings and Experience Summary

5.1 AI’s Strengths: Creative Acceleration and Autonomous Decision-Making

In this project, the greatest value demonstrated by AI was its ability to bridge the gap between “vague intent” and a “runnable application.” In traditional development workflows, moving from concept to a runnable first demo usually takes days or even weeks of manual coding. Guided by clear instructions, AI tools can complete prototype scaffolding in a fraction of the time. Particularly in the autonomous judgment of narrative angles and visual styles, AI sometimes delivered solutions that exceeded expectations—such as opening with a “dark room” scene rather than a traditional “historical introduction” layout.

5.2 AI’s Limitations: Delivery Completeness and Cost Trade-offs

Notable shortcomings were also observed during practice:

1. Incomplete Delivery: Some AI models might interrupt or oversimplify when generating complex interaction logic, requiring multiple follow-up prompts to complete the code.
2. Speed vs. Cost Contradiction: Highly capable models often respond slower and incur higher API costs, while lightweight versions are faster but less capable of handling details. In actual projects, appropriate model tiers must be selected based on the task phase.
3. Reliance on Manual Debugging: Although AI-generated code can run, manual intervention is still required for fixes regarding browser compatibility and performance optimization.

5.3 General Advice: How to Better Collaborate with AI

Based on this practice, the following recommendations are offered for developers:

• Staged Prompting: Let the AI complete the skeleton and core interactions first, then gradually refine visuals and copy. Avoid making one-time instructions too complex, which can degrade output quality.
• Define Asset Boundaries: Confirm available open-source 3D assets, icons, and fonts in advance to reduce the AI’s wasted effort searching for materials.
• Reserve Manual Review: Treat AI output as a “high-quality first draft” rather than a “final draft,” paying special attention to interaction edge cases and error handling.
• Cost Awareness: Evaluate the balance between model capabilities and costs before large-scale invocations, and make good use of batch processing and caching mechanisms.

6. Conclusion

Using AI coding tools to build 3D interactive websites is fundamentally an exploration of a “human-machine collaborative creation” model. AI is responsible for rapidly generating runnable technical frameworks and creative prototypes, while developers take charge of narrative depth, technical details, and user experience. As technical barriers lower, what truly determines the quality of a work remains the depth of understanding of the subject and the sensitivity to user experience. The digitization of classic sculptures should not merely be a technical showcase, but a bridge connecting history with contemporary perception—a principle that creators must always keep in mind, regardless of the tools used.