WebGameKit

Framework-agnostic toolkit for creating 3D games, environments, and generative art with Three.js and Rapier physics.

Get Started →    Journey →

Packages​

@webgamekit/threejs​

Core 3D engine. Wraps Three.js scene setup, Rapier physics, model loading, camera helpers, and post-processing into a single getTools() call. Provides the useSceneViewStore Pinia integration for Vue views.

import { getTools } from '@webgamekit/threejs';
const { scene, camera, world, animate } = await getTools({ canvas });

@webgamekit/animation​

Character animation and timeline system. Handles GLTF mixer actions (walk, idle, blocking clips), physics-based movement with ground detection, and a frame-accurate timeline manager for coordinating per-frame updates.

import { animateTimeline, controllerForward } from '@webgamekit/animation';

@webgamekit/controls​

Unified input controller for keyboard, gamepad, touch (faux-pad joystick), and mouse. Maps raw inputs to named actions; supports 8-way directional input and configurable axis thresholds.

import { createControls } from '@webgamekit/controls';
const { currentActions } = createControls({ mapping: { keyboard: { w: 'move-forward' } } });

@webgamekit/game​

Lightweight reactive game state. Framework-agnostic shallow store with action-based updates, score tracking, and lifecycle status (idle | playing | paused | over).

import { createGame } from '@webgamekit/game';
const game = createGame({ score: 0, lives: 3 });
game.setData('score', 100);

@webgamekit/audio​

Minimal audio playback utilities for background music and sound effects using the Web Audio API.

import { initializeAudio, createSound, playSound } from '@webgamekit/audio';
const sfx = createSound(initializeAudio(), '/audio/jump.mp3');
playSound(sfx);

@webgamekit/logic​

Pathfinding and path-following utilities. Provides A* on a grid with obstacle support, smooth path interpolation, and node-height snapping for 3D terrains.

import { logicCreateGrid, logicGetBestRoute } from '@webgamekit/logic';
const path = logicGetBestRoute(navGrid, start, goal);

Architecture​