Add movement with Rapier

[JBdesarrollo]

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 (

); }

useGLTF.preload(ninjaModel);
`

PS: Sorry about my english.

[JBdesarrollo]

Ok, i got something but...

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

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

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

});

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)
  }

  if(e.key === 'a' || e.key === 'd'){
    mov = 0;
  }
}else{
  
  if(sigilo === 0){
    setIndex((5) % names.length)
  }else if(sigilo === 1){
    setIndex((2) % names.length)
  }
}

`

And after:
`
const rb = useRef();
useFrame() => {
rb.current.addForce({ x: mov/2000, y: 0, z: 0 }, true);
console.log(mov)

}, [])
`

I have problems with the movement and friction but i have a bad movement.

[JBdesarrollo]

Better:

useFrame(()=>{ rb.current.applyImpulse({ x: mov/5000 * delta.getDelta(), y: 0, z: 0 }, true); },[])