From LLMs to 3D Scenes: Building an Interactive Sculpture Narrative Website with AI

1. Background: When “Let AI Build a 3D Website” Becomes an Engineering Task

Driving a 3D-capable website through natural language sounds like a product slogan, but in practice it breaks down into a set of concrete technical questions:

• How should the narrative be structured? What separates a static sculpture introduction page from an interactive one that actually sparks new understanding?
• How is 3D content generated? When no ready-made model assets are available, should you load external models or build procedural geometry?
• How should interactions be designed? Which elements—camera, lighting, material, annotations, timeline—should users control, and which should be orchestrated automatically?
• How is performance maintained? How do you keep a 3D scene usable on a standard laptop or a mobile browser?

This article uses the case of “recreating how a classic sculpture is born from stone” to discuss how to leverage LLMs in designing and implementing a Chinese-language interactive 3D narrative website. The focus is not on any single tool but on a reusable technical methodology: transforming “text generation” into “scene generation,” and then “scene generation” into “an interactive narrative experience.”

2. Requirement Breakdown: From a Single Sentence to Executable Technical Specs

The core requirement can be summarized as: build a Chinese-language interactive website that helps ordinary people understand how a sculpture is born from a block of stone—and makes them want to stop and observe it.

This sentence contains three layers of goals, each of which needs to be translated into technical specifications.

2.1 Cognitive Goal: Understanding “Sculpting as Subtraction”

Most people intuitively think of sculpture as “shaping”—adding material from nothing. The essence of stone carving is “subtraction”—removing excess so the form emerges from the block. The site must let users feel this visually, not just read about it.

Technical mapping:

• A visualization of “stone gradually being removed”;
• A comparison between “initial volume” and “final form”;
• The ability for users to re-examine the same form at different stages.

2.2 Observation Goal: Making Users Want to Stay

“Wanting to stay” means the page cannot be an auto-playing animation. It needs:

• A 3D view with free rotation and zoom;
• Manual stage-switching controls;
• Clickable local annotations.

Technical mapping:

• A 3D renderer with orbit controls;
• State management (current stage, current camera angle, currently selected part);
• An annotation system (HTML overlays or 3D-space labels).

2.3 Narrative Goal: From Stone to Finished Work

The narrative can be abstracted into four stages:

1. Raw stone: an unprocessed square block;
2. Rough block: the overall silhouette is cut out and proportions are established;
3. Refinement: surface details, musculature, and drapery gradually appear;
4. Completion: overall polishing, with lighting and texture fully presented.

These four stages serve as both a timeline and the backbone of interaction.

3. System Architecture: Typical Layers of a Front-End 3D Narrative Site

A maintainable 3D narrative site typically falls into these layers:

┌─────────────────────────────────────┐
│  Narrative Layer: copy, stage defs,  │
│  interaction guidance                │
├─────────────────────────────────────┤
│  State Layer: current stage, camera, │
│  selected object                     │
├─────────────────────────────────────┤
│  Scene Layer: geometry, material,    │
│  lighting, camera                    │
├─────────────────────────────────────┤
│  Render Layer: WebGL / Canvas, frame │
│  loop                                │
└─────────────────────────────────────┘

In implementation, a general-purpose WebGL library can manage the scene graph, materials, and camera to avoid working directly with low-level graphics APIs. LLMs can help with:

• Generating narrative copy and stage descriptions;
• Generating initial scene setup code;
• Generating parametric geometry-building logic;
• Generating interaction event and state-switching code.

One important caveat: AI generates the skeleton. Final quality depends on the developer’s tuning of 3D presentation and interaction pacing.

4. Geometry Generation: “Building” a Sculpture Without Model Assets

In real projects, obtaining high-quality 3D model assets is often constrained by licensing, format, and file size. A viable alternative is procedural geometry: combining mathematical functions and primitive shapes to approximate the target form.

4.1 From Block to Figure: A Layered Modeling Approach

For a standing human sculpture, the form can be built layer by layer:

• Base and stone block: a cuboid representing the initial state;
• Torso: multiple ellipsoids and cylinders for ribcage, abdomen, and pelvis;
• Limbs: capsule or bent tubular geometry;
• Head: a sphere with simple facial protrusions;
• Details: displacement or vertex offsets to simulate muscle undulation.

At the code level, a parametric function can accept a stage parameter (0 to 1) and output geometry at varying detail levels:

function buildFigure(stage) {
  const group = new THREE.Group();
  // Base stone block: shrinks as stage increases
  const blockSize = 1.0 - stage * 0.4;
  const block = new THREE.Mesh(
    new THREE.BoxGeometry(blockSize, blockSize * 2, blockSize),
    stoneMaterial
  );
  group.add(block);
  // Human base form: higher stage = more detail
  const torso = createTorso(stage);
  const limbs = createLimbs(stage);
  const head = createHead(stage);
  group.add(torso, limbs, head);
  return group;
}

4.2 Material and Texture: Making Stone “Look Like Stone”

The key to a convincing stone look lies in:

• Roughness: high roughness, low metalness;
• Color variation: using vertex colors or procedural noise for mottled, uneven tones;
• Normal detail: using normal maps or vertex perturbation to simulate surface bumps.

Without external textures, a shader can generate simple noise:

// Simplified noise in the fragment shader
float noise = fract(sin(dot(vUv, vec2(12.9898, 78.233))) * 43758.5453);
vec3 stoneColor = mix(vec3(0.7, 0.68, 0.64), vec3(0.55, 0.53, 0.5), noise);

While this procedural material is less refined than real scanned textures, it is sufficient for the visual metaphor of “stone block,” and its tiny footprint ensures fast loading.

5. Interaction Design: Four Techniques That Make Users “Stop and Observe”

5.1 Stage Slider: Timeline-Style Control

A slider at the bottom of the page corresponds to the four stages. As users drag it, geometric detail and material roughness change in sync. This gives more sense of control than a simple auto-play animation.

5.2 Orbit Controls: Free Viewpoint

Users can rotate, zoom, and pan. However, pitch angle and zoom range should be constrained to prevent users from getting lost or seeing clipping artifacts.

const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 2;
controls.maxDistance = 10;
controls.maxPolarAngle = Math.PI * 0.85;

5.3 Hotspot Annotations: Click for Local Details

Place hotspots on key parts of the sculpture (head, hands, base). Clicking reveals a brief note explaining how that area is handled during carving. Hotspots can be small 3D spheres or HTML overlays that follow projected coordinates.

5.4 Comparison Mode: Overlaying Raw Stone on the Finished Form

A “Compare” button overlays the initial stone block as a semi-transparent wireframe on top of the final form. Users can visually see “how much material was removed”—one of the most effective ways to understand subtractive carving.

6. Performance and Accessibility: Often Overlooked, but Essential

6.1 Performance Optimization

• Geometry complexity control: vertex counts in procedural geometry should scale with stage—low-poly for early stages, subdivided for later ones;
• On-demand rendering: redraw only on interaction or stage change, avoiding constant GPU usage;
• Mobile fallback: detect device capability and reduce pixel ratio or detail levels when needed.

6.2 Accessibility

• Provide text descriptions and stage summaries for the 3D view so screen-reader users can follow the content;
• Ensure all interactive controls support keyboard operation;
• Maintain color contrast that meets general accessibility standards.

7. Boundaries and Best Practices for AI-Assisted Development

When using LLMs for a project like this, keep these practices in mind:

1. Narrative first, code second: have the model output the narrative structure and stage breakdown first, confirm it, then generate scene code;
2. Verify in small steps: test each piece of geometry or interaction code in the browser immediately to prevent error accumulation;
3. Prefer parametric code: ask the model for parameterized functions rather than hard-coded static scenes, so later tuning is easier;
4. Human control over visual pacing: details like lighting angle, camera movement, and stage-transition duration still require developer adjustment based on real-world results.

8. Conclusion

Going from a single sentence—“make it recreate a sculpture”—to a fully interactive 3D narrative website spans narrative design, geometry generation, material rendering, interaction orchestration, and performance optimization. LLMs can dramatically accelerate scaffolding and code generation, but the final observational experience still depends on the developer’s grasp of the “subtractive carving” concept and the ability to translate it into an interactive visual language.

For enterprise applications, this methodology is equally applicable. Whether for product showcases, educational content, or digital exhibitions, 3D content built with procedural geometry + layered narrative + controllable interaction holds more staying power than plain video or images. On the technology side, staying aligned with general Web standards and avoiding lock-in to a specific rendering solution is key to long-term maintainability.