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
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
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
Related posts
This is so cool!
Made another web tool, this time for liquid shapes. Everything you see here came out of it.
Built with Claude Code (Opus 5.5) and Toolcraft. It’s a React app that runs entirely in the browser, with a custom WebGL2 path tracer and Intel’s OIDN denoiser on WebGPU, exporting seamless 4K loops.
Building design tools has changed how I think about my job. I used to focus on making the visuals. Now I think more about building the system that makes them, so a client’s brand can keep growing after the project is done.
I think more designers will work this way soon, and more founders will expect it.
hypnotizing!
still some minor editing to do, but a mini crime drama that doubles as a music video for a tale of revenge. made with ChatGPT2.5 for images, Seedance2.5 for clip generation, compiled, sound synced and edited in Invideo editor
