File size: 1,811 Bytes
f56a29b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 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:
```json
{
"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. |