Skip to content


KeyboardControls is a special type of controller that allows you to move using your keyboard.


In combination with PointerLockControls

Here you need to use the PointerLockControls with make-default props, KeyboardControls will automatically adapt to it, creating a really good effect first player experiences.

  <TresCanvas shadows alpha>
    <TresPerspectiveCamera :position="[0, 0, 3]" />
    <PointerLockControls make-default  />
    <KeyboardControls />
    <TresGridHelper :args="[10, 10]" />

Just by doing this, works great but in addition the TresJs team give some special props (only available with this mode) to create more realistic sensation

  • headBobbing: To simulate the walk balance of the head
  • Jump: to jump
  • gravity: to control the gravity related to the jump

In combination with slots

Here you can move meshes by using your keyboard, by default you move through the X and Z axis, but you can change it with the is2D prop, to move your meshes on the X and Y axis

  <TresCanvas shadows alpha>
    <TresPerspectiveCamera :position="[0, 0, 3]" />
        <TresMeshNormalMaterial />


Is really important that the Perspective camera is set first in the canvas. Otherwise might break.


forwardKeys to go forward.['w', 'W']
backKeys to go back.['s', 'S']
leftKeys to go left.['a', 'A']
rightKeys to go right.['d', 'D']
headBobbingIndicates if the forward movement is in the Z axis or Y axis. (only with PointerLockControls)false
jumpKey to jump (only with PointerLockControls).[' ']
gravityDefault gravity number for jump.9.8
moveSpeedSpeed movement0.1
is2DIndicates if the forward movement is in the Z axis or Y axis. (only for meshes)false