80 lines
1.8 KiB
Markdown
80 lines
1.8 KiB
Markdown
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 an `objects` dictionary for widget 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.
|