Large Model–Driven 3D Interactive Content Generation in Practice
This article walks through a real-world workflow for using large models to generate a runnable Chinese interactive 3D website from a structured natural language prompt. It covers prompt design, the technical layers of a 3D interactive site, model selection and cost control, quality checks, and a reusable methodology for intent-driven content production.
Large Model–Driven 3D Interactive Content Generation: From a Single Requirement to an Experiencable Work
1. Background: When “Making Content” Becomes “Describing Requirements”
The capabilities of large models are expanding from text and images to the generation of 3D interactive content. In the past, building an interactive website with 3D models required coordination across modeling, materials, frontend rendering, motion design, and copywriting, often taking weeks. Today, a structured natural language requirement can potentially drive a model through the entire process, from technical selection and asset retrieval to code implementation.
This article uses a concrete practice as an example: having a large model autonomously complete a Chinese interactive website on the theme of “how a classical sculpture emerges from a block of stone.” The goal is not to list historical facts, but to help viewers develop a new understanding of “carving” itself—starting from the essence of subtractive material removal and re-examining the work.
This type of task places far higher demands on models than generating a paragraph or an image. It requires the model to simultaneously possess intent understanding, technical judgment, asset retrieval, code generation, and self-verification capabilities.
2. Prompt Design: How to Write an “Ambitious” Prompt
The quality of the prompt directly determines the upper limit of the deliverable. In practice, a prompt suitable for this kind of creative task should include the following layers:
1. Delivery Goal (What)
Clearly define the final form, such as “a runnable Chinese interactive website,” rather than “a proposal” or “a mockup.”
2. Audience and Cognitive Goal (Why)
Specify that the target audience is the general public, and articulate the intended cognitive shift—not memorizing facts, but developing a new understanding of carving and being willing to pause and observe the work.
3. Creative Freedom (How)
Explicitly leave the narrative perspective, visual style, interaction approach, and technical route to the model’s judgment, encouraging it to “exercise judgment and find the expression that truly fits.”
4. Process Permissions (Tools)
Authorize the model to search for information, find assets, write code, and use 3D tools, while first assessing the current environment’s capabilities before proceeding autonomously.
5. Delivery Standard (Done)
Emphasize not stopping at the proposal or mockup stage; the final output must be a runnable, experiencable work.
The key to this prompt structure is: place constraints on goals and standards, and place freedom on implementation paths. Overly tight constraints limit the model’s creativity, while overly loose constraints tend to produce mediocre, template-like output.
3. Technical Breakdown: What a 3D Interactive Website Contains
Regardless of the final presentation style, the technical skeleton of this kind of work is largely consistent and can be divided into four layers:
3.1 Data Layer: Where 3D Models Come From
High-quality historical sculpture models usually come from open scan data published by public cultural institutions. These resources are provided in formats such as STL or GLB, with explicit license terms, commonly from the CC BY-SA family. When using them, you must:
- Verify the license type and confirm whether commercial use and derivative works are allowed.
- Clearly mark the source and license in a prominent position on the page.
- Reduce polygon count or retopologize the model when necessary to fit web performance.
A typical model loading and simplification flow:
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';import { simplifyModifier } from 'three/examples/jsm/modifiers/SimplifyModifier.js';const loader = new GLTFLoader();loader.load('/assets/sculpture.glb', (gltf) => {const mesh = gltf.scene.children[0];// Keep web models within roughly 50k facesconst simplified = simplifyModifier.modify(mesh.geometry, 0.7);mesh.geometry = simplified;scene.add(mesh);});
3.2 Rendering Layer: Progressive Geometric Peeling
The core visual expression of “from raw stone to finished piece” is the gradual reduction of geometry. There are three common implementation approaches:
| Approach | Principle | Advantages | Limitations |
|---|---|---|---|
| Vertex clipping | Hide vertices according to a plane or sphere boundary | Simple to implement and performant | Hard edges |
| Boolean operations | Subtract a tool geometry from the model | Visually realistic | High computational cost |
| Block-based visibility | Pre-split the model into blocks and toggle visibility in sequence | Strong controllability | High preprocessing cost |
For interactive websites, a combination of vertex clipping plus noise perturbation is recommended: use a cutting surface that advances over time to hide the parts “not yet chiseled away,” and overlay subtle noise to simulate the randomness of stone fragments breaking off.
// Vertex shader snippet: reveal the model progressively along the y-axisuniform float uProgress; // 0.0 ~ 1.0varying float vVisible;void main() {vec3 pos = position;float noise = fract(sin(dot(pos.xy, vec2(12.9898, 78.233))) * 43758.5453);float threshold = mix(minY, maxY, uProgress) + noise * 0.02;vVisible = pos.y < threshold ? 1.0 : 0.0;gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);}
3.3 Interaction Layer: Narrative-Driven Operation Design
Good interaction is not just “rotatable and zoomable,” but making the operation itself carry the narrative. Two typical routes:
- Immersive darkroom route: dark background with a single light source; users hold a button to “chisel,” and the stone peels away piece by piece as the model gradually emerges. A “undo” button can be designed so that clicking it prompts “there is no undo for this stone,” using the interaction itself to convey the irreversibility of subtractive art.
- Exhibition reading route: light paper-like background, chapter-based narrative, and a slider that lets users control the stone reduction progress, accompanied by explanatory text. This suits slow reading scenarios.
The common point of both is: handing the timeline to the user, making “observation” an active behavior.
3.4 Narrative Layer: Copywriting and Visual Rhythm
The copy should not pile up historical facts, but should focus on the core metaphor of “subtraction.” For example, a line like “the statue was not made, but left over from the stone” can establish a cognitive anchor within seconds. In terms of visual rhythm, the following sequence is recommended:
- Stillness—the opening shows only a block of stone, with no operation hints.
- Motion—upon the user’s first interaction, the stone begins to peel away.
- Pause—after the finished work appears, the scene returns to stillness, leaving room for observation.
4. Key Issues in Engineering Practice
4.1 Model Selection and Cost Control
Powerful models often come with higher inference costs and longer response times. Common practices include:
- Tiered usage: use stronger models for complex solution design, and more cost-effective models for code generation and debugging.
- Task decomposition: split “design + implementation + verification” into separate sessions to avoid excessively long context in a single session.
- Caching and reuse: cache time-consuming steps such as model loading and shader compilation to reduce repeated overhead.
It is worth noting that speed and quality are not linearly related. A model that is half the price and noticeably faster can often match a stronger model’s performance on tasks with a clear prompt structure.
4.2 From Website to Short Video: Reusing Assets
A completed 3D website is itself an asset library. Converting it into a 60–90 second vertical short video does not require redoing the work, but rather reorganizing it:
- Reuse the 3D scenes from the website as the primary visuals.
- Use screen recording plus keyframe interpolation to generate smooth camera movements.
- Focus the narration on one core question: “Why can we say the statue is hidden inside the stone?”
- Output 9:16 MP4 while preserving an editable project file and a list of asset sources.
Recommended video pacing: pose the question in the first three seconds, show the “reduction” process in the middle, and return to a static frame of the finished work at the end to give viewers time to react.
4.3 Quality Control Checklist
Before delivery, check the following items one by one:
- Are the model source and license fully labeled?
- Does the page render properly on mainstream browsers and mobile devices?
- Is the first-screen load time acceptable? Ideally within three seconds.
- Is there clear interaction guidance so users are not left wondering what they can do?
- Does the copy avoid factual errors?
- Is there a fallback plan, such as static image display when WebGL is unavailable?
5. A Reusable Methodology
Abstracting this practice into a transferable method yields roughly four steps:
Step 1: Assess environment capabilities. First confirm the available models, toolchain, and asset sources before deciding on the technical route. Skipping this step often leads to getting stuck midway.
Step 2: Turn goals into verifiable standards. “Runnable and experiencable” is more instructive than “high quality.”
Step 3: Let the model autonomously judge the implementation path. Within clearly defined boundaries, handing over decisions about narrative, visuals, interaction, and technical selection to the model often produces solutions beyond expectations.
Step 4: Deliver a work, not a proposal. Interim proposals and mockups are only process artifacts; the final output must be something that actually runs.
6. Summary
Large models are pushing “content creation” from “manual implementation” toward “intent-driven generation.” But intent-driven does not mean laissez-faire—the degree of prompt structure, the clarity of delivery standards, and the rigor of process verification still determine the floor of the final output.
For developers, the real value of this kind of practice is not “building a website with one sentence,” but understanding that when implementation capability is dramatically compressed, judgment, aesthetics, and quality standards become the scarce resources. This is true for 3D interactive content, and likely for other forms of generative applications as well.
