Add movment with rapier

[JBdesarrollo]

Sorry, wrong forum. I can't delete it.
I wrote this again in rapier.

Hello, i'm principally a backend developer, but i want to make a litle game for fun, using three-fiber.
My work: [https://ninjajs.netlify.app/]

If you press "a" or "d", my ninja rotate and play one animation.
With the "shift" key i can change the way o movement (stealth mode), but now i need real movement in the x axis and i don't know how.

Some example or something?

My code:

`
import React, { useRef, useEffect, useState } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import ninjaModel from '../modelos/ninja.glb';
import { degToRad } from "three/src/math/MathUtils";
import { RigidBody } from '@react-three/rapier';

let sigilo = 0;
let vista = 'd';
let rot = degToRad(-90);

document.addEventListener('keydown', function(e){
if(e.key === 'Shift'){
if(sigilo === 0){
sigilo = 1;
}else if(sigilo === 1){
sigilo = 0;
}
}

if(e.key === 'd'){
if(vista !== 'd'){
vista = 'd';
rot = degToRad(-90);
}
}

if(e.key === 'a'){
if(vista !== 'i'){
vista = 'i';
rot = degToRad(90);
}
}
})

export function Ninja(props) {

const group = useRef();
const { nodes, materials, animations } = useGLTF(ninjaModel);
const { actions, names } = useAnimations(animations, group)
const [index, setIndex] = useState(2)

document.addEventListener('keydown', function(e){

if(e.key === 'a' && sigilo === 0){
  setIndex((9) % names.length)
}else if(e.key === 'a' && sigilo=== 1){
  setIndex((3) % names.length)
}

if(e.key === 'd' && sigilo === 0){
  setIndex((9) % names.length)
}else if(e.key === 'd' && sigilo=== 1){
  setIndex((3) % names.length)
}

});

document.addEventListener('keyup', function(e){

if(e.key !== 'Shift'){
  if(e.key === 'a' && sigilo === 0){
    setIndex((5) % names.length)
  }else if(e.key === 'a' && sigilo=== 1){
    setIndex((2) % names.length)
  }
  if(e.key === 'd' && sigilo === 0){
    setIndex((5) % names.length)
  }else if(e.key === 'd' && sigilo=== 1){
    setIndex((2) % names.length)
  }
}else{
  
  if(sigilo === 0){
    setIndex((5) % names.length)
  }else if(sigilo === 1){
    setIndex((2) % names.length)
  }
}

});

useEffect(() => {
// Reset and fade in animation after an index has been changed
actions[names[index]].reset().fadeIn(0.2).play()
// In the clean-up phase, fade it out
return () => actions[names[index]].fadeOut(0.2)
}, [index, actions, names])

return (

  <RigidBody type="dynamic" colliders="hull">
      <group ref={group} {...props} dispose={null} >
        <group name="Scene">
          <group name="Armature" rotation={[Math.PI / 2, 0, rot]} scale={0.01} >
            <primitive object={nodes.mixamorigHips}/>
            <skinnedMesh
              castShadow
              receiveShadow
              name="Sphere_1"
              geometry={nodes.Sphere_1.geometry}
              material={materials.Material_0}
              skeleton={nodes.Sphere_1.skeleton}
            />
          </group>
        </group>    
      </group>
  </RigidBody>

);
}

useGLTF.preload(ninjaModel);
`

PS: Sorry about my english.