▶ Jugar / Play · Three.js · WebGL · GitHub Pages
Manos 3D articuladas · vidrio refractivo · neón con bloom · confeti · cero dependencias en runtime
ES — El propósito de este repo es simple: usar Three.js para algo hermoso. Dos manos 3D articuladas se enfrentan sobre un escenario de vidrio: eliges tu jugada, ambas hacen el clásico "¡ca… chi… pún!" y revelan el gesto al mismo tiempo. Confeti para quien gana, y una CPU que aprende tus mañas.
EN — The purpose of this repo is simple: use Three.js to make something beautiful. Two articulated 3D hands face off over a glass stage: pick your move, both hands do the classic three-beat countdown and reveal at once. Confetti for the winner, and a CPU that learns your patterns.
ES — Elige piedra ✊, papel ✋ o tijera ✌️ con los botones o las
teclas 1 · 2 · 3. Piedra le gana a tijera, tijera a papel y papel a piedra.
El marcador se guarda solo en tu navegador.
EN — Pick rock ✊, paper ✋ or scissors ✌️ with the buttons or the
1 · 2 · 3 keys. Rock beats scissors, scissors beat paper, paper beats rock.
The scoreboard is saved in your browser.
| Modo · Mode | ES | EN |
|---|---|---|
| 🧠 CPU astuta | Predictor de Markov de orden 1: aprende qué sueles tirar después de tu jugada anterior y juega la contra. Un 25 % de azar la mantiene ganable. | Order-1 Markov predictor: it learns what you tend to throw after your previous move and plays the counter. A 25 % random slip keeps it beatable. |
| 🎲 CPU al lote | Puro azar, como jugar con tu sobrino. | Pure random, like playing your little cousin. |
| ES | EN |
|---|---|
| Manos 3D articuladas por dedo, poseadas por gesto (✊ ✋ ✌️) | Articulated 3D hands with per-finger joints posed per gesture |
| Coreografía del "¡ca-chi-pún!": tres botes y revelación con resorte | The three-beat countdown choreography with a springy reveal |
Escenario de vidrio refractivo (transmission) con reflejos PMREM |
Refractive glass stage (transmission) with PMREM reflections |
| Neón (tú cian, CPU magenta) que brilla con UnrealBloom | Neon glow (cyan you, magenta CPU) via UnrealBloom |
| Sombras PCF suaves, luces rim de color, fondo con shader + niebla | Soft PCF shadows, colored rim lights, shader sky + fog |
| Cámara que respira con parallax del mouse, confeti para quien gana | Breathing camera with mouse parallax, confetti for the winner |
| Marcador y ajustes en localStorage · sonido WebAudio silenciable | Scoreboard and settings in localStorage · mutable WebAudio sound |
| Responsive (mouse + touch) · sin build step ni CDN | Responsive (mouse + touch) · no build step, no CDN |
Usa módulos ES, así que necesita un servidor estático (no funciona con file://):
It uses ES modules, so it needs a static server (it won't work over file://):
python3 -m http.server 8000 # → http://localhost:8000
# o / or
npx serve .index.html · markup + import map (Three.js vendorizado / vendored)
styles.css · UI glassmorphism (HUD, marcador, botones de jugada)
src/
main.js · flujo de juego, marcador, sonido / game flow, score, sound
scene.js · manos, coreografía y efectos 3D / hands, choreography & FX
game.js · reglas, cerebro de la CPU, localStorage / rules & CPU brain
tween.js · motor de animación con easing / easing tween engine
vendor/ · Three.js r160 (build + addons) — sin CDN en runtime / no runtime CDN
ES — Incluye un workflow en .github/workflows/deploy.yml que publica solo.
Activa Pages una vez en Settings → Pages → Source: GitHub Actions y haz push.
EN — Ships with .github/workflows/deploy.yml that auto-publishes. Enable Pages
once at Settings → Pages → Source: GitHub Actions and push.
Si despliegas desde una rama distinta a la default, permítela en Settings → Environments → github-pages. / If deploying from a non-default branch, allow it under Settings → Environments → github-pages.
- Manos riggeadas a mano con
Group+CapsuleGeometryy poses por articulación / hand-rigged hands via joint groups MeshPhysicalMaterialcontransmission,ior,thickness,clearcoat(vidrio / glass)PMREMGenerator+RoomEnvironment(reflejos realistas / realistic reflections)EffectComposer→RenderPass+UnrealBloomPass+OutputPass(post-proceso / post-processing)PCFSoftShadowMap,ACESFilmicToneMapping,SRGBColorSpacePoints+BufferGeometry(confeti y polvo / confetti and dust)ShaderMaterialpara el degradado del cielo / for the sky gradient
ES — En Chile, cachipún es "piedra, papel o tijera". La primera versión de este repo era en verdad un gato (tres en línea) por una confusión histórica que quedó inmortalizada en el historial de git 😄. Ahora sí: cachipún de verdad.
EN — In Chile, cachipún means "rock, paper, scissors". The first version of this repo was actually tic-tac-toe due to a historic mix-up, now immortalized in the git history 😄. This time it's the real deal.
MIT © 2026 Fabián Maturana. Incluye Three.js (MIT). / Bundles Three.js (MIT).
Hecho con cariño y Three.js · Made with care and Three.js