This is a demo game that i have make it using three.js (https://threejs.org/) Features PigCity (P...This is a demo game that i have make it using three.js (https://threejs.org/) Features PigCity (P...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Gabriele's avatar
Gabriele Negri
• May 23
This is a demo game that i have make it using three.js
Features PigCity (Pigopoli) — GTA-style 3D Web Game (Three.js + Rapier + Vite)
Open-world mafia-cartoon game running fully in browser. No heavy engine, no plugins: pure Three.js + WebGL, Rapier.js physics (WASM), Vite build. 60fps on entry-level laptops.
Tech stack
Three.js r160+ — rendering, scene graph, GLTFLoader, SkeletonUtils for skinned-mesh cloning, CSS2DRenderer for 3D-anchored UI (damage labels, dialog bubbles), procedural shader-based sky.
Rapier.js — deterministic WASM physics: capsule character controller, per-building colliders, kinematic vehicles, raycasts for gunfire and line-of-sight.
Vite — HMR, optimized bundle, asset pipeline.
PocketBase (self-hosted) — persistence, anonymous device-auth, IAP claim, server-side hooks for ad rewards.
Stripe Checkout — 4 IAP packs in test mode.
3D / Three.js features shipped
Modular city loaded from Kenney City Kit GLB, grid layout with central plaza and per-building colliders.
Animal trio (pig, rat, chicken) cloned via SkeletonUtils.clone() to preserve skinned animations, runtime hot-key switch.
Full combat system — 3 weapons (fist/pistol/shotgun) with cooldown, ammo, spread, distinct ranges. Camera-origin raycast so crosshair aligns to bullet impact. Sprite muzzle flash, pooled spark particles, floating damage labels via CSS2D.
Aim-driven TPS camera — orbital yaw + pitch that drives aim angle (not just height), lookAt projected far to prevent crosshair drifting onto the player's body.
Vehicles — kinematic controller with dedicated chase cam, E to enter/exit, vehicle HP, pedestrian ramming above 4 m/s triggers ballistic ragdoll (launch + spin).
NPCs — capsule pedestrian pool with HP, ragdoll-flop on death, timed despawn, i18n dialog with CSS2D speech bubbles.
Cop AI — notoriety system with decay, police spawn above threshold, siren audio, escape by range/time.
Mission state machine — repeatable Pizza Run, animated 3D waypoint arrow, soft/hard currency rewards.
Shop UI — HTML overlay with vehicle thumbnails rendered offscreen via a second Three.js renderer (fixed camera, transparent background).
Audio — Web Audio API with pooled MP3 SFX and looping music player with toggle.
HUD + minimap — real-time 2D canvas minimap, player/vehicle HP bars, dual-currency wallet, notoriety meter.
Architecture
Trust boundary: all economy mutations validated server-side via PocketBase hooks.
Save store with fallback: PocketBase primary → localStorage if offline.
Feature-modular layout: src/combat/, src/vehicle/, src/mission/, src/economy/, etc. Each system isolated and testable.
50+ unit tests (Vitest).
Result MVP complete (Plan 01-07 of 8), playtested: walkable city, 3 characters, combat, vehicles, repeatable missions, dual-currency economy, Stripe test IAP, rewarded ads with daily cap.
#threejs #webgl #gamedev #javascript #3dweb #creativecoding #frontenddev #fullstack #freelancedeveloper #indiegame
3D DesignFull Stack DevelopmentGame Developmentthree.jsViteWebGLfreelancer
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started