Projects in Santa Cruz de TenerifeProjects in Santa Cruz de Tenerife
Projects
People
Cover image for This is a demo game
This is a demo game that i have make it using three.js (https://threejs.org/) 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
0
39
;