All projects
BabylonJS

BabylonJS Character Controller V2

Full character controller in BabylonJS — keyboard + gamepad input, blend tree animations, collision, camera follow. Drop-in reusable system.

Rebuilt from scratch after V1 had animation blending issues and tight mesh-name coupling. Works with any GLB using standard Mixamo/RPM bone naming.

BabylonJS Character Controller V2
Keyboard + gamepad, blend tree, capsule physics, mobile joystick

Architecture

Two modular classes: AnimCtrl (skeletal animation blend tree) and CharCtrl (input + physics). Config consolidated in DEFAULT_CHAR_CONFIG — one place for all tunable values.

Features

  • Input: keyboard + gamepad unified through the same action map
  • Animations: blend tree smoothly transitions Idle → Walk → Sprint with weight lerping
  • Physics: capsule collider (stable, no mesh-collider jitter), slope alignment, squash-and-stretch on landing
  • Camera: adaptive lerped follow, dynamic FOV expansion at higher speeds, mobile framing adjustments
  • Mobile: glassmorphism virtual joystick, settings persisted via localStorage
  • Crouch + sprint: operate as toggles that coexist (high-speed crouched running works)

Asset pipeline

Uses the FBX2GLB batch tool — animations merged and optimized into a single compressed GLB.

Visual Builder & Auto-Rig Engine

The project includes an interactive visual tool (builder.html) run on a local NodeJS server that allows configuring and exporting the character controller visually:

  • Direct FBX Import & Posture Adjustment: Drag-and-drop support for .fbx models which are automatically converted to .glb in the backend, allowing material correction, pivot alignment ("Pivot to Ground"), and base pose angle adjustments (A-pose to T-pose).
  • Auto-Rig (Skeleton Generation): Advanced algorithm that analyzes the vertex cloud and mesh topology of skeleton-less meshes to propose joints (Mixamo-compatible) and calculate skin weights via proximity, including an interactive visual joint editor with symmetry.
  • Animation and Event Management (Animation Events): Automatic mapping of clips, creation of triggers (markers) at specific frames (for footsteps, hits, spells) that execute at runtime (onAnimationEvent), and creation of custom actions.
  • Physics Test Lab: Real-time adjustment of physics parameters using sliders, movement preset selectors (Balanced Adventure, Action Combat, Arcade Platformer, Cinematic Walkthrough), and interactive testing cameras.
  • Versatile Export: Custom initialization snippet generation, configuration download (builder-config.json), export of the .glb model with integrated animations, or download of the pre-configured standalone controller (custom-character-controller.js).
BabylonJS Character Controller V2
Keyboard + gamepad, blend tree, capsule physics, mobile joystick

V1 → V2

V1V2
InputKeyboard onlyKeyboard + Gamepad
ColliderMeshCapsule
AnimationsStart/stopBlend tree
CouplingTight to mesh namesConfig-driven

Built by

Viseni Design Studio

3D, WebGL, interactive & VR/AR experiences

Visit viseni.com