🎓 Educational Resources
Interactive demos and learning tools to master animation concepts:
Welcome to BlackBox Animator!
A powerful yet intuitive animation editing tool designed specifically for GLB files. Whether you're creating character animations for games, VR experiences, or 3D presentations, BlackBox Animator provides a streamlined workflow for bringing your 3D models to life.
Note: This manual covers the core animation features available in v1.0. Advanced IK (Inverse Kinematics) and constraint features are coming soon in v2.0!
What You Need to Know
What is a GLB File?
A GLB file is a binary version of the glTF (GL Transmission Format) file format. Think of it as a container that holds:
- Your 3D model - the shape and appearance
- Textures - the colors and surface details
- Animations - how the model moves
- Skeleton/bones - the internal structure that allows animation
GLB files are widely supported and perfect for web applications, games, and AR/VR experiences.
What is a glTF File?
glTF is the text-based version of the same format. While GLB files pack everything into one binary file, glTF files consist of multiple separate files (.gltf, .bin, textures). GLB is generally preferred for its convenience.
The Meshy3D Pipeline
Most users will be exporting their 3D characters from Meshy3D, a popular tool for creating 3D models. BlackBox Animator is designed to seamlessly work with models exported from Meshy3D, providing you with professional animation capabilities without the complexity of traditional 3D software.
Getting Started
Loading Your Model
- Open BlackBox Animator in your web browser
- Click the "Choose File" button in the top-left corner
- Select your GLB file from your computer
- Wait a moment while the model loads - you'll see your character appear in the center viewport
The camera will automatically frame your model, giving you a perfect view of your character.
Understanding the Interface
BlackBox Animator has five main areas:
1. Header Bar (Top)
The dark header contains all your main controls:
- GLB Animation Editor title on the left
- Choose File button to load your models
- Export GLB - Saves all animations
- Export Selected - Saves only current animation
- New Animation - Create a new animation from scratch
- Mode Indicator - Shows current mode (e.g., "Mode: Select (S)")
- View Options - Four view toggle buttons:
- Wireframe - Shows model as wireframe mesh
- Skeleton - Displays only the bone structure
- Model - Shows the textured 3D model
- Grid - Toggles the floor grid on/off
2. Animation List (Left Panel)
Shows all animations in your GLB file:
- Animations header at the top
- Each animation listed with its name (e.g., "Idle_12", "Walking")
- Active animation highlighted in blue
- Duplicate button to copy an animation
- Delete button to remove an animation
- Animations can be renamed when duplicating
3. 3D Viewport (Center)
Your character appears here in full 3D:
- Dark background for clear visibility
- Grid floor helps with spatial orientation
- Axis indicators (RGB lines) show world directions
- Selected bones highlighted with transform gizmos
- Mouse controls:
- Left-click and drag: Rotate view
- Right-click and drag: Pan view
- Scroll wheel: Zoom in/out
4. Bone Controls (Right Panel)
Hierarchical list of all bones:
- Collapsible sections (click arrows ▶ to expand)
- Each bone shows:
- Position values (X, Y, Z coordinates)
- Rotation values (in degrees)
- Numeric input fields for precise control
- Selected bone appears highlighted
- Values update in real-time as you animate
5. Timeline (Bottom)
Professional animation timeline:
- Playback controls: Play ▶, Pause ⏸, Stop ⏹
- Keyframe buttons: + Key (add), - Key (delete)
- Autokey button 🔑 (green when active)
- Frame counter: Shows current frame and time
- Timeline tracks:
- Expandable bone hierarchy
- Blue dots represent existing keyframes
- Red/pink highlight shows selected keyframe
- Green glow on current bone's keyframes
- Vertical red line shows current playhead position
- Interactive scrubbing: Click and drag anywhere to move through time
- Resizable: Drag the top edge to adjust height
Basic Workflow
Quick Start Guide
- Load Your Model - Choose a GLB file with a skeleton
- Select an Animation - Pick from existing or create new
- Enter Select Mode - Press S
- Click a Joint - Select the bone to animate
- Transform - Press R to rotate or T to move
- Save Keyframes - Enable Autokey or click "+ Key"
- Build Animation - Move timeline, adjust bones, repeat
- Preview - Click Play to watch your animation
- Export - Save your work as GLB
Working with Animations
Animation Concepts
- Keyframes: Specific poses at specific times. The software creates smooth motion between keyframes.
- Timeline: Shows time horizontally. Each bone can have keyframes at different times.
- Interpolation: The automatic blending between keyframes that creates smooth motion.
Creating a New Animation
- If no animations exist, click "+ Create New Animation" in the left panel
- Enter a name for your animation
- Set the duration (default is 3 seconds)
- Your new animation starts with the model in its default pose
Managing Animations
- Duplicate: Create a copy of an existing animation to use as a starting point
- Delete: Remove unwanted animations (with confirmation)
- Rename: Currently requires duplicating with a new name
Animation Controls
Interaction Modes
BlackBox Animator uses different modes for different tasks. Switch modes using keyboard shortcuts or the mode dropdown:
| Mode | Shortcut | Purpose |
|---|---|---|
| Navigate Mode | V | Default mode for camera control - rotate, pan, zoom |
| Select Mode | S | Click near joints to select bones |
| Rotate Mode | R | Rotate the selected bone (requires bone selection) |
| Translate Mode | T | Move the selected bone (requires bone selection) |
Bone Selection
- Click Selection: In Select Mode, click near any joint
- Hierarchy Navigation: Use arrow keys to navigate:
- ↑ Select parent bone
- ↓ Select first child
- ← Previous sibling
- → Next sibling
- Mirror Selection: Press M to select the opposite bone (e.g., LeftArm → RightArm)
- Deselect: Click empty space or press ESC
Transform Controls
Rotation Mode (R)
- Circular rings appear around the selected bone
- Red ring: Rotate around X-axis (pitch)
- Green ring: Rotate around Y-axis (yaw)
- Blue ring: Rotate around Z-axis (roll)
- Click and drag any ring to rotate in that direction
Translation Mode (T)
- Arrow handles appear at the selected bone
- Red arrow: Move along X-axis
- Green arrow: Move along Y-axis (up/down)
- Blue arrow: Move along Z-axis
- Click and drag any arrow to move along that axis
Timeline Features
Understanding the Timeline
The timeline shows a visual representation of your animation:
- Bone names on the left (collapsible hierarchy)
- Time flowing left to right
- Keyframes as dots on the timeline
- T and R indicators show which bones have position/rotation keys
Keyframe Management
Autokey Mode
When Autokey (🔑) is enabled and glowing green:
- Any changes you make are automatically saved as keyframes
- Red flash animation confirms the keyframe was created
- Flash fades to green over 3 seconds
- No need to manually click "+ Key"
Without Autokey: Make your changes, then click "+ Key" to save the current pose
Timeline Navigation
- Scrub: Click and drag anywhere on the timeline
- Snap to Keyframes: Release near a keyframe to snap to it
- Current Time: Shown in seconds and frames (30 fps)
- Resize: Drag the top edge to make timeline bigger/smaller
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Mode Switching | |
| Navigate Mode (camera control) | V |
| Select Mode (bone selection) | S |
| Rotate Mode | R |
| Translate Mode | T |
| Bone Navigation | |
| Select parent bone | ↑ |
| Select first child bone | ↓ |
| Select previous sibling | ← |
| Select next sibling | → |
| Select mirror bone | M |
| General Controls | |
| Deselect bone / Return to Navigate | ESC |
| Undo last action | Ctrl+Z |
| Redo action | Ctrl+Y |
Exporting Your Work
Export Options
1. Export GLB (All Animations)
- Saves your entire model with all animations
- Original textures and materials are preserved
- File name: "exported_model.glb"
2. Export Selected Animation
- Saves only the currently selected animation
- Useful for creating separate animation files
- File name matches the animation name
Export Process
- Make sure all your keyframes are saved
- Click the appropriate export button
- Confirm the export (for selected animation)
- Your browser will download the GLB file
- The file is ready to use in any GLB-compatible application
Tips & Best Practices
For Beginners
- Start Simple: Begin with basic movements like waves or head turns
- Use Autokey: Turn on Autokey (🔑) to automatically save your poses
- Work in Sections: Animate one body part at a time
- Preview Often: Regularly play your animation to check progress
- Save Frequently: Export your work regularly to avoid losing progress
Using View Modes Effectively
- Wireframe View: Great for seeing through the model to select hidden bones
- Skeleton View: Perfect for focusing on bone movements without mesh distraction
- Model View: Best for final preview and checking deformations
- Grid Toggle: Turn off for cleaner screenshots or recordings
Animation Principles
- Keyframe Spacing: Fewer keyframes often create smoother motion
- Anticipation: Add small movements before main actions
- Follow Through: Let movements settle naturally
- Overlapping Action: Not all parts should move at the same time
- Arcs: Natural movements follow curved paths
Common Issues
Can't select a bone?
Make sure you're in Select Mode (S). Click closer to the joint - the selection detection works best near joint centers.
Bone movements look unnatural?
Check parent bones first. Make sure the hierarchy is correct. Sometimes parent bone rotations affect children unexpectedly.
Export file is very large?
Export only the animations you need using "Export Selected" instead of exporting all animations at once.
What's Coming in v2.0?
Advanced IK (Inverse Kinematics) Features
- IK Mode: Drag end effectors (hands, feet) to naturally pose limbs
- Joint Constraints: Set realistic rotation limits for elbows, knees, etc.
- Biomechanical Presets: One-click anatomically correct joint limits
- Constraint Visualization: Interactive 3D widgets for setting joint limits
- IK Solver Integration: Powered by the p0qp0q-IK-Solver engine
These features will make character animation even more intuitive and realistic!
Ready to Animate?
BlackBox Animator makes professional 3D animation accessible to everyone. With its intuitive interface and powerful features, you can bring your Meshy3D characters to life without learning complex 3D software.
Happy Animating!