Three.js + Next.js

Chop-n-Bike

A web-based 3D platformer with procedural forest terrain, over-the-shoulder camera, and a chop mechanic for clearing trees. Works on desktop (keyboard + mouse) and mobile (touch controls).

Click the scene and start movingWASD/Arrows to move · Space to jump · K to chop · Mouse to look

World

Procedural forest with clearings, a circular mountain barrier, and soft volumetric fog.

  • Walkable ground with visible paths and tree groupings.
  • Mountains ring the arena; the goal exit sits along the ridge.
  • Dynamic lighting to keep depth and mood.

Player & Camera

Stick-figure placeholder with third-person camera offset over the shoulder.

  • Keyboard: WASD/Arrows to move, Space to jump, K to swing sword.
  • Mouse: click canvas to lock cursor; move to rotate camera.
  • Mobile: touch D-pad for movement, Jump and Chop buttons on the right.

Loop & Testing

Use the embedded scene to validate interactions before expanding mechanics.

  • Run npm run dev for hot reload development.
  • Use npm run lint to catch TypeScript/React issues.
  • Hit npm run build to verify production readiness.
Score: 0

Desktop Controls

  • WASD / Arrow keys to move
  • Space to jump/swim · K to swing sword
  • Click canvas to lock mouse; move to look
Click the scene to capture the cursor and play.

Objective

Explore the dark forest, find the glowing portal, and chop through trees blocking your path. A red bike is hidden somewhere — ride it to go faster!

Level 1 of 6 · Stick-figure visuals for now.