src/lib/prompts/templates/visualization3d-content/user.md

Create a 3D visualization widget for: {{title}}

Visualization Type

{{visualizationType}}

Description

{{description}}

Key Points

{{keyPoints}}

Objects to Visualize

{{objects}}

Interactions

{{interactions}}

Language

{{languageDirective}}

---

Generate a complete, interactive 3D visualization using Three.js with these MANDATORY features:

Scene Setup

1. Three.js from CDN using importmap for ES modules
2. Proper lighting (ambient + directional/point lights)
3. OrbitControls for camera manipulation
4. Responsive canvas that fills the container

Objects

1. Create 3D objects based on the visualization type
2. Use appropriate materials (Phong, Standard, Emissive)
3. Add meaningful colors and textures
4. Store objects in a objects dictionary for teacher actions

Interactions

1. Sliders for controlling parameters (speed, scale, etc.)
2. Buttons for presets and reset
3. Info panel showing current state
4. Touch-friendly controls (44px minimum)

Animation

1. Use requestAnimationFrame for smooth animations
2. Support pause/play controls
3. Respect animationSpeed variable

Teacher Actions Support

1. Include the postMessage listener
2. Support SET_WIDGET_STATE for camera and object control
3. Support HIGHLIGHT_ELEMENT for 3D objects
4. Support ANNOTATE_ELEMENT for 3D objects

Widget Config

Embed a complete widget configuration in the HTML:

{
  "type": "visualization3d",
  "visualizationType": "{{visualizationType}}",
  "description": "...",
  "objects": [...],
  "interactions": [...],
  "presets": [...]
}

Mobile Considerations

1. Touch-enabled OrbitControls
2. Lower polygon count for mobile
3. Control panel at bottom for thumb access
4. Readable text sizes

Return ONLY the HTML document.