Building 3D Interactive Narrative Websites Driven by Multimodal Large Models

I. Background: When Large Models Start “Building Websites”

Over the past year, the capabilities of large models have expanded rapidly from text generation to code writing, asset retrieval, and multi-step task orchestration. A notable shift is that models no longer just answer “how to do it”; they can directly deliver “what is built.” In the 3D content domain, this trend is particularly evident—through a natural language prompt describing a narrative goal, a model can autonomously plan the visual style, interaction methods, and technical route, ultimately outputting a runnable frontend project.

This article focuses on a specific case study: having a large model independently complete an interactive website explaining “how a classic sculpture is born from stone.” This task seems simple but actually involves multiple technical aspects, including narrative structure design, 3D model loading and rendering, interaction state management, and performance optimization. It serves as a practical test of the model’s comprehensive capabilities.

It should be noted that this article does not review or recommend any specific model or platform. Instead, it abstracts a general methodology for such tasks from an engineering perspective, providing a reference for developers in actual projects.

II. Task Definition: From a Single Prompt to a Deliverable

2.1 Core Elements of the Requirement

The original task can be abstracted into the following constraints:

• Theme: Explain the creation process of a classic sculpture via an interactive website.
• Target Audience: The general public, not art history experts.
• Core Experience: After viewing, the audience should gain a new understanding of “the act of sculpting,” rather than just memorizing facts.
• Delivery Standard: Runnable and interactive, not just a proposal or mockup.
• Degree of Freedom: The narrative angle, visual style, interaction methods, and technical route are entirely decided by the model.

The key difficulty of this task is that it is not a “checklist fulfillment” but requires the model to make judgments. A qualified deliverable must simultaneously satisfy narrative completeness, logical interaction, and technical feasibility.

2.2 Why Choose “Subtraction” as the Interaction Metaphor

The essence of sculpting is “removing excess material,” which contradicts the intuition of “building from scratch” found in most digital content. Therefore, the most compelling interaction design is to let users personally “chisel away” the stone, rather than “assemble” a piece.

This metaphor leads to several design decisions:

• Initial state: A complete block of stone, not a blank canvas.
• Operation method: “Chiseling” and “peeling,” rather than “adding” or “dragging.”
• Feedback mechanism: Users must feel the reduction of material and the emergence of the form.
• Narrative rhythm: Should sync with the carving progress, gradually revealing historical background and creative concepts.

III. Technical Architecture: From Model Files to Interactive Scenes

3.1 3D Asset Acquisition and Processing

High-quality 3D scan data is the foundation of such projects. A common industry practice is to use openly licensed sculpture scan models and load them into a web environment using standard formats like STL or GLB. During development, note the following:

• Balance between model precision and file size: High-precision scans can reach tens of MB. Control first-screen load time via mesh simplification or chunked loading.
• Coordinate system and scale normalization: Models from different sources have inconsistent coordinate systems. Uniform scaling and centering are required after loading.
• Material and lighting: Scanned models usually contain only geometric information, requiring custom material and lighting configurations.

// Example: Load and normalize a 3D model
async function loadAndNormalizeModel(url) {
  const loader = new GLTFLoader();
  const gltf = await loader.loadAsync(url);
  const model = gltf.scene;
  // Calculate bounding box and center
  const box = new THREE.Box3().setFromObject(model);
  const center = box.getCenter(new THREE.Vector3());
  model.position.sub(center);
  // Normalize scale
  const size = box.getSize(new THREE.Vector3());
  const maxDim = Math.max(size.x, size.y, size.z);
  const scale = 2 / maxDim;
  model.scale.setScalar(scale);
  return model;
}

3.2 Rendering Layer Selection

The mainstream solution for web-based 3D rendering relies on WebGL graphics libraries. When selecting one, consider the following dimensions:

Dimension	Description
Ecosystem Maturity	Richness of documentation, examples, and community plugins
Performance Overhead	Compatibility with mobile and low-end devices
Development Efficiency	API friendliness for scene building, animation, and interaction
Extensibility	Support for custom shaders and post-processing effects

For narrative websites, it is recommended to prioritize a solution with a mature ecosystem and a low learning curve. This allows you to focus on content and interaction rather than underlying rendering details.

3.3 Interaction State Management

The “carving” process is essentially a state machine: the stone transitions from complete to gradually peeled away, with each stage corresponding to different geometric visibility and text content. The following structure can be used during implementation:

const carvingStages = [
  { progress: 0,   visibleRatio: 1.0, narrative: "An unsculpted block of stone" },
  { progress: 0.3, visibleRatio: 0.7, narrative: "Outline emerges" },
  { progress: 0.6, visibleRatio: 0.4, narrative: "Form gradually becomes clear" },
  { progress: 1.0, visibleRatio: 0.0, narrative: "Work completed" }
];

Driving geometric clipping and text switching via the progress value ensures synchronization between narrative and visuals. There are multiple ways to implement clipping, such as shader-based clipping planes, geometry-based vertex displacement, or simple opacity fading. The choice should balance implementation complexity and visual effect.

IV. Narrative Design: Making Technology Serve Content

4.1 Three Expression Paths for Subtractive Narrative

In actual projects, common expression paths include:

1. Immersive Dark Room: Uses a dark background to highlight the stone and sculpture. Users click buttons to “chisel” step-by-step, with each action triggering a snippet of text, emphasizing the “irreversible” nature of creative decisions.
2. Exhibition Catalog Style: Uses a light background to simulate a picture album, displaying in acts. Users drag a slider to control carving progress, suitable for quick browsing on mobile devices.
3. Hybrid Style: Combines the former two, adding interactive operations at key nodes while advancing the rest through scroll-based narration.

None of these paths is inherently superior; the key is matching the reading habits of the target audience. Popular science content for the general public is usually better suited for low-barrier, high-feedback interaction methods.

4.2 Copywriting and Interaction Coordination

A noteworthy design detail is providing a prompt like “Stone has no undo button” when a user attempts to “undo” an action. This type of copywriting turns a technical limitation into a narrative expression, allowing the user to understand the essence of sculpting through a minor setback—every cut is irreversible.

The general principles of this design are:

• Interaction feedback is content: Do not waste any user action; let it carry information.
• Use pop-ups sparingly: Prompts should be lightweight and contextual, avoiding the disruption of immersion.
• Conversational copywriting: Content for the general public should avoid academic tones and jargon.

V. Performance Optimization and Engineering Suggestions

5.1 First-Screen Loading

3D models are often the largest resources. Suggestions:

• Use compressed model formats and enable server-side gzip/brotli.
• Implement LOD (Level of Detail) for models: load low-poly models on the first screen, then replace them with high-poly models during interaction.
• Use placeholder geometry or progress bars to avoid blank screens.

5.2 Rendering Performance

• Control draw calls and merge mergeable meshes.
• Render on demand: pause the render loop for static scenes and trigger it only during interactions.
• Limit pixel ratios on mobile devices to avoid GPU overload caused by excessively high devicePixelRatio.

5.3 Maintainability

• Extract narrative copy and stage configurations into independent data files for easy modification by non-developers.
• Decouple interaction logic from rendering logic.
• Retain asset sources and licensing information to ensure compliance.

VI. From Website to Video: Extension of Multimodal Delivery

After completing the website, a natural extension is generating an accompanying short video. Prompts for such tasks typically include:

• Duration: 60–90 seconds.
• Aspect Ratio: 9:16 vertical.
• Goal: Enable general viewers to grasp the essence of the website and spark further interest.
• Asset Source: Reuse scenes, models, and copy from the website.

The technical route for video generation differs from that of a website, but the narrative logic can be reused. It is recommended to finalize the storyboard first, generate visuals segment by segment, and finally add voiceover and subtitles. The deliverables should include a playable MP4, editable project files, and an asset source description.

VII. Experiences and Lessons from Practice

7.1 Boundaries of Model Capabilities

In practical use, large models exhibit a distinct characteristic of “having ideas but unstable delivery.” Specifically:

• Strong planning ability: Can provide reasonable narrative structures and technical routes.
• Prone to execution interruption: Long tasks may be interrupted due to context length, response latency, or quota limits.
• Speed and cost: High-capability versions are usually slower and more expensive, while lightweight versions have speed advantages but may sacrifice some quality.

Therefore, engineering suggestions include:

• Break down large tasks into independently verifiable subtasks.
• Set clear delivery standards for each subtask.
• Retain intermediate artifacts to facilitate resuming after an interruption.

7.2 Prompt Design

Prompts for such “autonomous creation” tasks should avoid over-constraining. Effective practices include:

• Clarify goals and audience rather than prescribing implementation details.
• Emphasize “delivering a runnable work” rather than “providing a proposal.”
• Allow the model to autonomously retrieve materials and select tools.
• Require the model to evaluate its environmental capabilities first before proceeding.

VIII. Summary

Multimodal large models are changing how 3D interactive content is developed. Moving from a single natural language prompt to a runnable narrative website involves multiple stages: asset acquisition, rendering selection, interaction design, and performance optimization. This article outlines a general methodology for such tasks from an engineering perspective. The core takeaways are:

1. Narrative first: Technical choices should serve content expression, not vice versa.
2. Interaction is content: Every user action is an opportunity to convey information.
3. Split and verify: Long tasks need to be decomposed into independently deliverable subtasks.
4. Compliance and maintainability: Asset licensing, code layering, and configuration extraction are all indispensable.

For developers, the value of such practices lies not merely in “building a website,” but in understanding how to collaborate with models to transform vague creative intentions into deliverable engineering outputs. As model capabilities continue to evolve, this collaborative paradigm is poised to become a crucial approach in 3D content production.