logo

Babylon.js Market

By Lawrence

5 minutes

The road moves and the car is bolted to the origin. That is a screensaver with a shadow on it. The obvious next move — give the box a velocity and point it with the arrow keys — produces a walking character wearing a car's mesh: it goes exactly where you press, stops the instant you let go, and turns on the spot. A car does none of those things, and the reason is one lag.

Add the keyboard bridge and the handling profile

Two edits. A bare entity that publishes keystrokes onto the bus, and a drive law on the box you already have:

    "Input": {
      "components": {
        "KeyboardInput": {}
      }
    },
    "Player": {
      "tags": ["player"],
      "components": {
        "MeshPrimitive": { "primitive": "box", "width": 1.8, "height": 1, "depth": 4, "position": [0, 0.5, 0],
          "material": { "diffuseColor": [0.85, 0.25, 0.15], "emissiveColor": [0.16, 0.04, 0.02], "specularColor": [0.2, 0.2, 0.2] } },
        "Shadow": { "castShadow": true, "receiveShadow": false },
        "CarDrive": {
          "maxSpeed": 30, "acceleration": 15, "braking": 28, "reverseSpeed": 8,
          "steerRate": 2.6, "steerSpeedFalloff": 0.55,
          "grip": 0.85, "drag": 0.8, "driftThreshold": 3,
          "keyboardControlled": true
        }
      }
    },

KeyboardInput is the only thing in this scene that touches the DOM. It republishes every key as keyboard.keydown / keyboard.keyup carrying a code, and CarDriveSystem mirrors those into a set of held keys. Take that entity out and the car keeps its whole handling profile and has no driver.

Continue reading

Unlock the Full Course

Every lesson, the runnable examples, and the finished build — yours to keep.

$9one-time

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search