Skip to content
vgai Learn

Port: Racing game

capstone lesson Advanced ⏱ 20 min vgai 0.1.0

Prerequisites: Capstone — Vehicle · Manual — Physics

What you'll learn

  • Run a ported third-party game (pmndrs/racing-game) on vgai
  • Drive the circuit with the reused VehicleController + ChaseCamera
  • Understand how an R3F/cannon-es game maps onto Object3D + GameComponents

What you'll build: An arcade circuit racer with lap timing, ported from pmndrs/racing-game.

Walkthrough — Port: Racing game · generated by site/media/lessons/ports-batch.lesson.ts (5 steps)

racing-game (packages/editor/template/src/examples/racing-game/) is a port of pmndrs/racing-game — proof that a real third-party three.js game runs on vgai. Its React-Three-Fiber JSX became Object3D + GameComponents, its cannon-es RaycastVehicle became vgai’s Rapier DynamicRayCastVehicleController, and its zustand store became a RaceController component + a HUD closure.

Run it

Section titled “Run it”

  1. Open the racing-game scene. Load examples/scenes/racing-game.vscn.json.

    The racing-game circuit loaded
    The ported racing circuit.

  2. Enter play mode. Press Play.

    The racing game running
    Play mode.

  3. Accelerate around the circuit with W. The car uses the same VehicleController + ChaseCamera the Vehicle capstone ships — reused directly.

    The car accelerating on the circuit
    Driving the circuit.

  4. Steer through a corner with A and D. Pass the checkpoint gates; lap times are tracked by the RaceController.

    The car steering through a corner
    Cornering; checkpoints + lap timing.

  5. Stop play mode. Press Stop (or Escape).

Why this matters

Section titled “Why this matters”

The port reuses shipped engine capability rather than re-implementing it: the vehicle physics, chase camera, and scene format are all first-party. The porting work is mostly mapping the original’s structure onto vgai’s model — see the porting guides.

Recap

New functionality

  • Ran a ported third-party game on vgai
  • Drove the circuit and cornered

New concepts & skills

  • R3F JSX maps to Object3D + GameComponents
  • cannon-es RaycastVehicle maps to Rapier's raycast vehicle controller
  • Ports reuse shipped engine capability, not re-implement it

Next lesson → Port: Ugh-Guys RTS

See also

Section titled “See also”