🐋 Interactive Whale Character
A friendly voxel-style whale with WebGL-powered interactions, touch controls, and smooth animations.
Loading enhanced whale character...
Initializing enhanced GLB viewer...
🎮 How to Interact
Tap
Make the whale happy with a single tap
Double Tap
Surprise the whale with quick double taps
Long Press
Hold to watch the whale swim
Swipe
Swipe to rotate the camera around
Two-Finger Pan
Use two fingers to swipe and smoothly rotate the camera around the whale - perfect for exploring different angles
Pinch
Pinch to zoom in and out
Mouse (Desktop)
Left click + drag to explore, scroll to zoom
Ctrl + Drag (Desktop)
Hold Ctrl key while dragging for smooth orbiting - same silky movement as 2-finger pan on mobile
Happy Animation
Click the happy emoji button to make the whale joyful and playful
Surprised Animation
Click the surprised emoji button to see the whale react with wonder
Swimming Animation
Click the swimming emoji button to watch the whale gracefully swim
Reset Position
Click the reset button to return the whale and camera to default position
Background Colors
Use the emoji buttons on the left to change the underwater environment - Ocean, Deep Sea, Sunset, Arctic, Cosmic, or Classic Black
World Center Controls
Use the X, Y, Z sliders at the bottom left to adjust the 3D world center position for different viewing angles
Auto-Rotate
Toggle the Auto-Rotate button on the right to automatically rotate the camera around the whale
🛠️ Technical Details
Performance
- Target: 60fps on modern mobile devices
- Minimum: 30fps with graceful degradation
- Memory usage: <50MB including textures
- Battery optimized with background pause
Compatibility
- WebGL 1.0+ required
- iOS Safari 14+, Android Chrome 90+
- Desktop: Chrome, Firefox, Safari, Edge
- Fallback for non-WebGL devices
Accessibility
- Reduced motion support
- Keyboard navigation (desktop)
- Screen reader compatible
- High contrast mode support
Technologies
- Three.js r156+ for 3D rendering
- Hammer.js for gesture recognition
- GLB model format with Draco compression
- Astro + TypeScript architecture
📝 Development Notes
This whale character demo showcases modern web 3D capabilities while maintaining excellent performance and accessibility. The implementation follows mobile-first principles with progressive enhancement.
The whale model uses a voxel-inspired design reminiscent of Minecraft aesthetics, making it both charming and technically efficient. All animations are optimized for smooth performance across devices.
This demo represents experimental features that push the boundaries of web technology while remaining practical and user-friendly.
🔗 Resources
💭 Feedback Welcome
This is an experimental feature! If you encounter any issues or have suggestions for improvements, please let us know through our contact channels.
Performance can vary significantly across devices. The demo includes built-in fallbacks and optimization features to ensure the best possible experience.