Build a polished browser-based 3D Rocket League-style game using Three.js.
Goal: Create a fully playable local web game that runs in the browser. The first screen should be the actual game, not a landing page.
Tech requirements:
Use Three.js for rendering.
Use a real physics engine, preferably Rapier.js, for car, ball, arena, wall, and goal physics.
Use TypeScript if the project already supports it, otherwise plain modern JavaScript is fine.
Use Vite for the dev server unless another stack already exists.
Keep the architecture clean: separate rendering, physics, controls, game state, UI/HUD, and assets.
Core gameplay:
Third-person controllable rocket car.
Large soccer ball with believable bouncy physics.
Enclosed arena with side walls, back walls, ceiling or high invisible bounds, and two goals.
Score detection when the ball crosses fully into a goal.
Reset after each goal with a countdown.
Match timer and score display.
Boost system:Boost meter from 0-100.
Hold boost key to accelerate with flame/trail effect.
Boost drains while active.
Boost pads around the arena refill boost.
Jump system:Single jump.
Optional second jump / flip if feasible.
Air control with pitch, yaw, and roll.
Car should feel responsive and arcade-like, not like a slow simulator.
Controls:
WASD or arrow keys: drive / steer.
Space: jump.
Shift: boost.
R: reset car.
C: toggle camera mode.
Esc or P: pause.
Camera:
Smooth chase camera behind the car.
Camera should follow car rotation and velocity while remaining readable.
Optional ball-cam toggle that keeps the ball in view.
Visual design:
Recreate a Rocket League-inspired feel, including branded-style presentation if desired.
Add a futuristic indoor stadium, colored goals, boost pads, arena trim, and energetic UI.
Add lighting, shadows, bloom or subtle postprocessing if performance allows.
Add clear team colors, goal colors, boost pad glow, trail effects, ball highlight, and simple particle effects.
Use generated, procedural, or available assets as appropriate.
Add a readable HUD with score, timer, boost meter, countdown, and goal celebration text.
Ensure the game works on common laptop screens and resizes correctly.
Physics feel:
Prioritize fun over realism.
The ball should be heavy but responsive.
Cars should have strong acceleration, drift-friendly turning, and stable recovery.
Avoid cars flipping uncontrollably from minor bumps.
Tune gravity, friction, restitution, angular damping, and impulses until gameplay feels good.
AI / opponent:
If time permits, add a simple bot opponent:Bot chases the ball.
Bot aims roughly toward the player goal.
Bot can boost occasionally.
Bot should be beatable, not perfect.
If bot is too risky, create a solo practice mode with two goals and a working scoreboard.
Implementation expectations:
Build the complete working game, not just a prototype shell.
Include all source files.
Add brief comments only where the logic is non-obvious.
Avoid overengineering.
Do not create a marketing homepage.
Verification:
Start the dev server.
Test the game in the browser.
Verify:The scene renders.
The car moves, turns, jumps, and boosts.
The ball collides with the car and arena.
Goals are detected correctly.
Score and timer update.
Reset after goal works.
Boost pads refill boost.
The camera does not clip badly or lose the car.
No major console errors.
Take at least one screenshot or use browser automation to confirm the canvas is nonblank.
Deliverable:
A local runnable browser game.
Provide the dev server URL.
Summarize controls and what was implemented.
Quality bar: Make it feel like an arcade sports game people would actually want to play for five minutes. Spend extra effort tuning car handling, camera smoothing, ball impact, boost feel, and goal feedback. A technically complete but boring physics demo is not acceptable.
A few more bits of feedback. I would like for you to test the game and work back and forth until you have a very strong match to the original Rocket League, including the car design for the Octane. It all should look nearly identical to the original. We are not going to sell or reproduce this. It's just for a visual test, so it is okay to make it look the same, as it will never be distributed.
I want there to be infinite boosts by pressing B, and I want the UI to look extremely polished, like a real game. Make sure that the actual map also looks like Champions Field and is a strong match for the original and very polished. It should look very good. The lighting and the gameplay should be true to life. The physics should feel correct according to the original game. Everything should work exactly the same as it did, from the flip resets to the tackles, to the goal explosions, to the smoke behind the ball when it goes fast, to all of the little small details that generally get missed. I really want you to pay attention to the details.
I really want you to work in a loop and make sure that you are really comparing it to the original game, and I want you to keep iterating until the assets in the game look legitimate and real. You have as many tokens as you want to complete this task. I'm not in a rush at all. I think I just want it to look and play as best as possible. So iterate and take your time.
You have as many tokens as you want to complete this task. I'm not in a rush at all. I think I just want it to look and play as best as possible. So iterate and take your time.
Use every available asset that you can find to improve the quality of your work. Leave no stone unturned. You literally can work for as long as you want and build something truly exceptional.
한국어 번역
Three.js를 사용해 브라우저 기반의 완성도 높은 3D 로켓 리그 스타일 게임을 제작하세요.
목표: 브라우저에서 실행되는, 완전히 플레이 가능한 로컬 웹 게임을 만드세요. 첫 화면은 랜딩 페이지가 아니라 실제 게임이어야 합니다.
기술 요구 사항:
렌더링에는 Three.js를 사용하세요.
차량, 공, 경기장, 벽, 골대 물리에는 실제 물리 엔진을 사용하고, 가능하면 Rapier.js를 사용하세요.
프로젝트가 이미 TypeScript를 지원한다면 TypeScript를 사용하고, 그렇지 않다면 순수 모던 JavaScript로 충분합니다.
다른 스택이 이미 존재하지 않는 한 개발 서버에는 Vite를 사용하세요.
아키텍처를 깔끔하게 유지하세요: 렌더링, 물리, 조작, 게임 상태, UI/HUD, 에셋을 분리하세요.
핵심 게임플레이:
3인칭으로 조작 가능한 로켓 차량.
그럴듯한 튀는 물리를 지닌 커다란 축구공.
측면 벽, 후면 벽, 천장 또는 높은 위치의 보이지 않는 경계, 그리고 두 개의 골대를 갖춘 밀폐형 경기장.
공이 골대 안으로 완전히 들어갔을 때 득점을 감지합니다.
득점 후 카운트다운과 함께 리셋합니다.
경기 타이머와 점수 표시.
부스트 시스템:부스트 게이지는 0-100.
부스트 키를 누르고 있으면 화염/트레일 효과와 함께 가속합니다.
부스트가 작동하는 동안 게이지가 소모됩니다.
경기장 곳곳의 부스트 패드가 부스트를 채워 줍니다.
점프 시스템:단일 점프.
가능하다면 선택적으로 두 번째 점프/플립.
피치, 요, 롤을 이용한 공중 제어.
차량은 느린 시뮬레이터가 아니라 반응성이 좋고 아케이드 같은 느낌이어야 합니다.
조작:
WASD 또는 방향키: 주행/조향.
Space: 점프.
Shift: 부스트.
R: 차량 리셋.
C: 카메라 모드 전환.
Esc 또는 P: 일시정지.
카메라:
차량 뒤에서 부드럽게 따라가는 추적 카메라.
카메라는 차량의 회전과 속도를 따라가되 시야가 읽기 쉽게 유지되어야 합니다.
선택적으로 공을 화면에 계속 담아 두는 볼캠 토글.
비주얼 디자인:
원한다면 브랜드 스타일의 프레젠테이션을 포함해 로켓 리그에서 영감을 받은 느낌을 재현하세요.
미래적인 실내 경기장, 컬러 골대, 부스트 패드, 경기장 장식, 에너지 넘치는 UI를 추가하세요.
성능이 허락한다면 조명, 그림자, 블룸 또는 은은한 포스트프로세싱을 추가하세요.
명확한 팀 컬러, 골대 색상, 부스트 패드 발광, 트레일 효과, 공 하이라이트, 간단한 파티클 효과를 추가하세요.
상황에 따라 생성된 에셋, 절차적 에셋 또는 사용 가능한 에셋을 사용하세요.
점수, 타이머, 부스트 게이지, 카운트다운, 득점 세리머니 텍스트가 담긴 읽기 쉬운 HUD를 추가하세요.
게임이 일반적인 노트북 화면에서 작동하고 크기 조정이 올바르게 되도록 하세요.
물리 감각:
사실성보다 재미를 우선하세요.
공은 무겁지만 반응성이 좋아야 합니다.
차량은 강한 가속력, 드리프트에 유리한 회전, 안정적인 복구를 갖춰야 합니다.
사소한 충돌로 차량이 통제 불능으로 뒤집히지 않도록 하세요.
게임플레이가 좋게 느껴질 때까지 중력, 마찰, 반발 계수, 각도 감쇠, 임펄스를 조정하세요.
AI / 상대:
시간이 허락한다면 간단한 봇 상대를 추가하세요:봇이 공을 쫓아갑니다.
봇은 대략 플레이어 골대를 향해 조준합니다.
봇은 가끔 부스트를 사용할 수 있습니다.
봇은 완벽하지 않고 이길 수 있어야 합니다.
봇이 너무 위험하다면 두 개의 골대와 작동하는 스코어보드를 갖춘 솔로 연습 모드를 만드세요.
구현 기대 사항:
프로토타입 껍데기가 아니라 완전히 작동하는 게임을 만드세요.
모든 소스 파일을 포함하세요.
로직이 명확하지 않은 곳에만 간단한 주석을 추가하세요.
과도한 엔지니어링을 피하세요.
마케팅용 홈페이지를 만들지 마세요.
검증:
개발 서버를 시작하세요.
브라우저에서 게임을 테스트하세요.
확인하세요:씬이 렌더링됩니다.
차량이 이동하고, 회전하고, 점프하고, 부스트합니다.
공이 차량 및 경기장과 충돌합니다.
골이 올바르게 감지됩니다.
점수와 타이머가 갱신됩니다.
득점 후 리셋이 작동합니다.
부스트 패드가 부스트를 채웁니다.
카메라가 심하게 관통하거나 차량을 놓치지 않습니다.
심각한 콘솔 오류가 없습니다.
최소 한 장의 스크린샷을 찍거나 브라우저 자동화를 사용해 캔버스가 비어 있지 않은지 확인하세요.
산출물:
로컬에서 실행 가능한 브라우저 게임.
개발 서버 URL을 제공하세요.
조작 방식과 구현된 내용을 요약하세요.
품질 기준: 사람들이 실제로 5분 정도는 플레이하고 싶어 할 아케이드 스포츠 게임처럼 느껴지게 하세요. 차량 핸들링, 카메라 스무딩, 공의 충돌감, 부스트 감각, 득점 피드백을 조정하는 데 추가로 공을 들이세요. 기술적으로 완성도가 높아도 지루한 물리 데모는 용납되지 않습니다.
몇 가지 피드백을 더 드리겠습니다. Octane의 차량 디자인을 포함해 원작 로켓 리그와 매우 잘 맞아떨어질 때까지 게임을 테스트하고 주고받으며 작업해 주셨으면 합니다. 전체적으로 원작과 거의 동일하게 보여야 합니다. 우리는 이것을 판매하거나 복제하지 않을 것입니다. 단지 시각적 테스트일 뿐이고 절대 배포되지 않으니, 똑같이 보이게 만들어도 괜찮습니다.
B를 누르면 부스트가 무한이 되도록 하고, UI가 실제 게임처럼 극도로 세련되게 보이길 원합니다. 실제 맵도 Champions Field처럼 보이고 원작과 강하게 일치하며 매우 세련되게 만들어지도록 하세요. 아주 좋아 보여야 합니다. 조명과 게임플레이는 실사에 가까워야 합니다. 물리는 원작 게임에 맞게 느껴져야 합니다. 플립 리셋부터 태클, 골 폭발, 공이 빨라질 때 공 뒤에 생기는 연기, 그리고 흔히 놓치기 쉬운 모든 작은 디테일까지 모든 것이 예전과 정확히 동일하게 작동해야 합니다. 세부 사항에 정말 신경 써 주시기 바랍니다.
루프를 돌며 작업하면서 원작 게임과 정말로 비교하고 있는지 확인해 주시고, 게임 속 에셋이 그럴듯하고 진짜처럼 보일 때까지 계속 반복해 주셨으면 합니다. 이 작업을 완료하는 데 토큰은 원하는 만큼 사용하셔도 됩니다. 저는 전혀 서두르지 않습니다. 그냥 최대한 보기 좋고 플레이하기 좋게 만들고 싶습니다. 그러니 반복하시고 시간을 충분히 들이세요.
이 작업을 완료하는 데 토큰은 원하는 만큼 사용하셔도 됩니다. 저는 전혀 서두르지 않습니다. 그냥 최대한 보기 좋고 플레이하기 좋게 만들고 싶습니다. 그러니 반복하시고 시간을 충분히 들이세요.
작업의 품질을 높이기 위해 찾을 수 있는 모든 에셋을 사용하세요. 돌 하나도 그냥 지나치지 마세요. 원하는 만큼 오래 작업해 정말 예외적인 무언가를 만들어도 됩니다.
