Three.js FPS Weapon Feel (recoil, ADS, touch aim)
/threejs-fps-weapon-feel
A GameSkill original: a learnable recoil pattern whose recovery never undoes the player's own compensation, aim-down-sights with matched sensitivity, spread you can draw as a crosshair, viewmodel bob, sway, kick and flash, and a phone chapter with a move stick, precision look zone and a fire button that aims.
- License
- MIT
- By
- By GameSkill
Tested by GameSkill
40/40 checks passed on three.js r186 (0.186.1) in Chrome 156 headless (2026-10-28): trigger, a runnable example, a screenshot and self-check, one job per skill, and English + Chinese docs. Trigger checks match prompts against skill descriptions; they are not a live agent run.
Test reportGameSkill's tested copy
Written and tested by GameSkill for gameskill.dev. The ZIP holds the whole skill: SKILL.md and its Chinese version, scripts, a runnable example, tests, the self-check list and our test report.
A GameSkill original, released under MIT. The ZIP keeps LICENSE and CREDITS.md, which lists the workflow inspiration, the CC0 test assets and the third-party libraries with their licenses.
Self-check
- 压枪后停火，准星不会被拉到目标下面 / After compensating and releasing, the aim is not dragged below the target
- 30 帧和 144 帧打出同样的子弹 / 30 fps and 144 fps fire the same shots
- 第一发子弹打在准星上 / The first bullet goes where the crosshair was
- 开镜后灵敏度按 FOV 缩放，屏幕上转速不变 / Aimed sensitivity scales with FOV so on-screen speed stays the same
- 手机上按下视角手指不会跳，开火键能同时瞄准 / On a phone, look does not jump on touch-down and FIRE also aims
- npm test 和 npm run test:browser 都通过 / npm test and npm run test:browser pass
Install
Tell your AI
Install the skill from https://gameskill.dev/skills/threejs-fps-weapon-feel/install.md
GameSkill's tested copy
mkdir -p .claude/skills
curl -fsSL https://gameskill.dev/dl/skills/threejs-fps-weapon-feel.zip -o /tmp/gameskill-threejs-fps-weapon-feel.zip
unzip -oq /tmp/gameskill-threejs-fps-weapon-feel.zip -d .claude/skills
rm /tmp/gameskill-threejs-fps-weapon-feel.zipWhat you get
- Pier Range: a three.js firing range with a pattern board that keeps every hit, steel plates, desktop and phone controls
- src/weapon.js: recoil pattern, debt-based recovery, ADS blend and sensitivity, spread bloom, bob, sway, kick, flash
- src/touch.js: floating move stick with radial deadzone and curve, precision look zone, fire button that also aims
- Fixed-step firing so 30 and 144 fps fire the same shots
- 15 Node tests and an 11-check headless Chrome test with touch
Good fit
- Browser FPS and any first-person gun game
- Fixing floaty or unfair recoil, twitchy aiming, frame-rate dependent spray
- Making a browser FPS playable on a phone
Not for
- Enemy AI, level design or netcode
- Ballistics with bullet drop and travel time
Try this prompt
My three.js shooter feels floaty. Add a learnable recoil pattern, recovery, aim down sights and phone controls.About this skill
A GameSkill original, written and tested for gameskill.dev under MIT. The demo, Pier Range: a three.js range on a pier where a pattern board keeps every hit, so the recoil pattern is visible. Weapon rules are in src/weapon.js, phone controls in src/touch.js; neither touches the DOM or three.js.
Agent steps
- Look and recoil are separate: apply the player's look, call
update, addviewDelta. - Fixed step with catch-up firing; each shot leaves along the aim before its own kick.
- A learnable pattern with a small seeded random tail.
- Recovery returns only the debt the player has not already pulled down; delay it past the shot interval.
- One eased ADS value drives FOV, recoil, spread, bob, sway and the viewmodel; sensitivity uses the tan ratio.
- Spread is a drawable cone: the crosshair gap comes from the same number.
- Viewmodel juice is cosmetic: it never moves the bullet.
- Phone: floating stick with radial deadzone and curve, look zone without the touch-down jump, precision while aiming, a fire button that also aims.
Common errors it fixes
- Recovery dragging the aim below the target after good compensation.
- Random per-frame recoil that differs at 30 and 144 fps.
- Twitchy aiming because ADS changes FOV but not sensitivity.
Credits
Ideas from BLACKWATER by Hiraeth010 (MIT) and SANDLINE by xilinnihao-afk (MIT). Code, numbers, scene and text are ours.
Requirements
- three.js for the demo (vendored); the rules are plain JavaScript and port to any engine
- Node.js 20+ to run the tests; Chrome for the browser check
Topics
FAQ
Based on BLACKWATER by Hiraeth010 (MIT). Ideas only: GameSkill wrote the code and text; CREDITS.md in the ZIP lists every source. · Based on SANDLINE by xilinnihao-afk (MIT). Ideas only: GameSkill wrote the code and text; CREDITS.md in the ZIP lists every source.
Works well with
Skills the author points to as related or as the better fit for neighbouring tasks.
FPS Shooter
Build a first-person shooter: move+mouse-look controller, hitscan or projectile shooting, weapons, health, and enemy AI.
Game Feel & Juice
Add juice to actions: screen shake, hit-stop, eased motion, squash and stretch, knockback and layered audio-visual feedback.
Game Input Systems
Game input architecture: action mapping, rebinding with conflict checks, keyboard, gamepad and touch, deadzones, buffering and coyote time.
Game Camera Systems
Cameras that feel good: 2D follow with deadzone and look-ahead, 3D orbit with collision, first-person look, multi-target framing and shake.
Similar skills
open-game-skills
An MIT pack of about 190 SKILL.md agent skills for game design: combat feel, camera, traversal, world, validation, 2D/Spine and art pipeline, with a dispatcher and adapters for Three.js, PixiJS, Phaser, Cocos, Godot, Unity and Unreal.
Kart Drift Boost (tiers, windows, ramps)
A GameSkill original: arcade kart drift-boost rules that reward skill. Drifts charge three tiers, release opens a 0.85 s window you must press in, counter-steer adds a CUT bonus, ramps give one air and one landing boost, boosts take the maximum instead of stacking, and walls cancel everything pending.
One-button Flight (fair tap-to-flap)
A GameSkill original: the rules of a one-button flight game that is never unfair. Flaps set speed instead of adding it, a fixed-step simulation plays the same at 30 and 144 fps, the hitbox forgives grazes, and a seeded gap generator stays inside the reachable band, checked by an autopilot.
Procedural Low-Poly Buildings (kit, validator, views)
A GameSkill original: build stylised low-poly buildings in code from a small spec, then prove them: plot and height limits, a triangle budget per tier, closed outward meshes, supported parts, level roofs and side-only taper measured from silhouettes, plus front, side, top and 3/4 renders checked against the geometry.