Documentation
Avatar & Camera Guide
Learn how to control the camera, understand the skateboard physics, and load custom 3D rigged avatars.
Camera Controls
Camera Modes (Press V to cycle)
Mouse
Keyboard
Gamepad
Skateboard Controls
Movement
Tricks
Pro tip: Hold the ollie button longer for higher jumps. Use lean (Q/E) combined with turns for sharper carves and to maintain balance at high speeds.
Avatar Animation States
The avatar automatically animates based on physics state. These poses blend smoothly based on your speed, direction, and actions.
Loading Custom 3D Avatars
The Board Sports Engine supports loading custom 3D rigged humanoid avatars in FBX or GLB format. This allows you to use your own character models with full skeletal animation support.
Supported Formats
Model Requirements
- + Humanoid skeleton with standard bone names (Mixamo compatible)
- + Y-up coordinate system
- + Model should be around 1.7-1.8 meters tall
- + Rigged and weight-painted mesh
- + Optional: Embedded animations
Recommended Software
- * Blender (free) - export as GLB
- * Mixamo (free) - auto-rigging and animations
- * Maya/3ds Max - professional options
Tips for Best Results
- ! Use Mixamo to auto-rig your character
- ! Download animations from Mixamo in FBX format
- ! Convert FBX to GLB using Blender for better web performance
- ! Keep polygon count under 15k for smooth performance
- ! Test your model at https://gltf-viewer.donmccurdy.com/
Step-by-Step: Adding Your Avatar
Get or Create a Rigged Model
Use Mixamo to get a free rigged character, or create your own in Blender. The model must have a humanoid skeleton with standard bone names.
Export as GLB
GLB is the recommended format for web. In Blender: File > Export > glTF 2.0 (.glb/.gltf). Make sure to include the skeleton and any animations.
Place in Static Folder
Put your GLB file in static/models/.
For example: static/models/my-skater.glb
Configure the Avatar Store
Update the avatar configuration to point to your model:
import { setModelPath } from '$lib/stores/avatar-store';
// Load your custom avatar
setModelPath('/models/my-skater.glb', 'glb');Adjust Scale and Offset
Fine-tune how your avatar sits on the skateboard:
import { setAvatarScale, setAvatarOffset } from '$lib/stores/avatar-store';
setAvatarScale(1.0); // Adjust if too big/small
setAvatarOffset(0.1); // Raise/lower on the board