LUDUS — 가벼운 장난과 설렘을 즐기는 사랑
〈When Love Responds, 사랑의 응답〉 두 번째 작품 LUDUS의 인터랙티브 웹사이트입니다.
Three.js + Vite로 제작되었으며, EROS와 완전히 분리된 독립 프로젝트입니다.
실행
npm install
npm run dev # 로컬 개발 서버 (http://localhost:5173)
npm run build # 배포용 빌드 → dist/
npm run preview # 빌드 결과 확인
Node.js 20.19 이상이 필요합니다.
조작
| 입력 | PC | 모바일 |
|---|
| 좌우 이동 | 마우스 이동 | 화면을 좌우로 드래그 |
| 상하 이동 | 휠 ↓ / 휠 ↑ (페이지는 스크롤되지 않음) | 오른쪽 세로 슬라이더 |
| 잡기 / 놓기 | 좌클릭 (토글) | 하단 잡기 버튼 (토글) |
흐름: 오프닝 → "체험 시작하기"(전체화면 진입, 바로 카운트다운 시작) → 플레이 → 결과 화면
("Okay, you win!" 또는 "Missed me!" → 작은 가사 2줄 → 출처 → "다시 잡아볼래?") → 오프닝 없이 즉시 새 판(전체화면 유지).
- ESC로 전체화면을 빠져나오면 왼쪽 아래에 작은 전체화면 아이콘이 나타나며, 게임은 그대로 이어집니다.
- 가사·출처는
index.html의 #win 안 .verse에 있으며 성공·실패 엔딩에 함께 쓰입니다.
- 주소 끝에
?skip을 붙이면 오프닝 없이 열립니다(개발·테스트용, 카운트다운은 시작하지 않음).
상태: 대기(idle) → 플레이(play) → 성공(won) / 실패(missed) → 대기. 결과는 한 번만 확정되고 바뀌지 않습니다.
두 번째 기회 — "Missed me!" 다음 판은 남은 시간에 따라 조용히 쉬워지고 반드시 성공으로 끝납니다.
- 45–31초: 잘 잡히고 덜 미끄러지며, 중심이 조금 어긋나도 잡힘 (그래도 튕겨 나갈 수 있음)
- 30–16초: 제대로 잡은 공은 떨어지지 않고, 미끄러지던 공도 다시 붙잡힘. 내려온 집게 쪽으로 공이 살짝 굴러감
- 11초: 아직 못 잡았다면 공이 통통 뛰어 집게 아래로 오고, 집게가 내려와 잡아 올림 (9초: 잡고만 있으면 집게가 들어 올림)
- 6.2초 / 5초: 비상 보조 (시뮬레이션에서는 도달하지 않음)
이 판을 이긴 뒤(또는 첫 판에서 이긴 뒤, 새로고침 시) 다시 일반 난이도로 시작합니다.
배포 (GitHub → Vercel)
- GitHub에 새 저장소(예:
ludus)를 만들고 이 폴더를 올립니다.
git init
git add .
git commit -m "LUDUS interactive site"
git branch -M main
git remote add origin https://github.com/<아이디>/ludus.git
git push -u origin main
- vercel.com → Add New… → Project → 위 저장소를 Import.
- Framework Preset이 Vite로 자동 인식됩니다. (Build Command
npm run build, Output Directory dist — 그대로 두면 됩니다.)
- Deploy를 누르면 상시 접속 가능한 URL이 생성됩니다. 이후
main 브랜치에 push할 때마다 자동으로 재배포됩니다.
EROS 프로젝트와는 별도의 Vercel 프로젝트로 생성하세요.
폴더 구조
public/models/ludus.glb Blender에서 내보낸 모델 (집게 + 공, 계층·피벗·재질 이름 유지)
src/config.js ★ 확률·속도·물성·성공선 높이 등 모든 조정값
src/claw.js 집게 이동, 실제 관절 기준 팔 회전, 팔-공 접촉 계산
src/ball.js 공의 메시 변형(눌림·부피 보존·젤리 흔들림) + 낙하/바운드 물리
src/game.js 잡기 판정, 4가지 결과(A–D), 미끄러짐, 성공 판정, 연속 실패 보정
src/materials.js 크롬 / 새틴 팁 / 젤 공(볼륨 셰이더 + 광택 스킨)
src/stage.js 카메라, 스튜디오 반사 환경, 조명
src/hud.js 성공선, 결과 화면(문구 → 가사 → 다시 잡아볼래?) 연출
src/fullscreen.js 전체화면 진입·감지
src/timer.js 45초 카운트다운 표시와 맥동 효과
src/input.js, touch.js 마우스 입력 / 모바일 드래그·슬라이더·잡기 버튼
tools/export_glb.py .blend → GLB 변환 스크립트 (원본 .blend는 수정하지 않음)
자주 바꿀 설정 (src/config.js)
난이도
OUTCOMES — 잡힌 뒤 결과 확률 (튕겨 나감 34% / 들어 올리다 미끄러짐 30% / 성공선 근처 낙하 26% / 성공 10%)PITY — 연속 실패 시 성공 확률을 점차 올리는 규칙 (4번 실패 후부터, 최대 32%)ALIGNMENT_INFLUENCE, GRIP.centreTolerance — 중심을 얼마나 정확히 맞춰야 잡히는지HOLD — 잡힌 공이 흔들리고 처지는 정도VARIATION — 미끄러지는 높이·시간, 튕기는 속도·방향의 랜덤 범위
성공
SUCCESS.lineY — 성공선 높이 (공 전체가 이 선 위로 올라가야 성공)SUCCESS.textDelay, SUCCESS.buttonDelay — 문구와 버튼이 나타나는 시점
공 재질
ORB.density — 전체 젤리 밀도 (낮을수록 투명)ORB.clearCore — 중심부 투명도 (높을수록 가운데가 맑음)ORB.rimGlow — 가장자리 민트·아이스블루 밝기
제한시간 (TIMER, MISS)
TIMER.duration — 제한시간(초, 실제 시계 기준)TIMER.pulseFrom, TIMER.urgentFrom — 은은한 맥동(15초), 빠른 맥동(5초)이 시작되는 시점MISS.hops — 시간 초과 후 공이 놀리듯 튀는 높이(속도)와 횟수MISS.textDelay, MISS.buttonDelay — "Missed me!"와 버튼이 나타나는 시점
두 번째 기회 (ASSIST)
ASSIST.tier1 — 45–31초 구간의 결과 확률ASSIST.tolerance, ASSIST.magnet — 구간별 중심 허용 오차, 공이 집게 쪽으로 굴러가는 정도ASSIST.autoAt, ASSIST.autoLiftAt, ASSIST.rescueAt, ASSIST.guaranteeBy — 자동 보조 시점
움직임 / 화면
CLAW — 집게 반응 속도, 휠 감도, 이동 범위BALL — 중력, 바운드 탄성, 굴러가는 마찰PLAYFIELD — 가로 화면 / 세로(모바일) 화면의 이동 범위
모델 다시 내보내기
Blender 4.2 이상에서 모델을 수정했다면:
blender -b 재질.blend --python tools/export_glb.py -- 재질.blend public/models/ludus.glb
이 스크립트는 LUDUS 계층(집게·와이어·팔 3개·공)만 GLB로 내보내고, 웹 접촉 계산에 쓰는
팔 중심선 좌표를 collision_pts(extras)로 함께 저장합니다.
