反应三纤维如何控制人的运动？

Question

我想创建一个游戏，我必须让我的模型可以通过键盘输入进行控制。我不知道什么是最好的方法以及如何正确实施它。

Answer 1

我们可以用 cannon.js

来实现

创建一个自定义挂钩来侦听用户的输入。

const usePersonControls = () => {
  const keys = {
    KeyW: 'forward',
    KeyS: 'backward',
    KeyA: 'left',
    KeyD: 'right',
    Space: 'jump',
  }

  const moveFieldByKey = (key) => keys[key]

  const [movement, setMovement] = useState({
    forward: false,
    backward: false,
    left: false,
    right: false,
    jump: false,
  })

  useEffect(() => {
    const handleKeyDown = (e) => {
      setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: true }))
    }
    const handleKeyUp = (e) => {
      setMovement((m) => ({ ...m, [moveFieldByKey(e.code)]: false }))
    }
    document.addEventListener('keydown', handleKeyDown)
    document.addEventListener('keyup', handleKeyUp)
    return () => {
      document.removeEventListener('keydown', handleKeyDown)
      document.removeEventListener('keyup', handleKeyUp)
    }
  }, [])
  return movement
}

现在就这样使用，

const { forward, backward, left, right, jump } = usePersonControls()

为大炮世界中的人物创建一个body。

const [mesh, api] = useSphere(() => ({
    mass: 10,
    position: [0, 1, 0],
    type: 'Dynamic',
}))

将速度应用于球体 body。

useFrame(() => {
    // Calculating front/side movement ...
    frontVector.set(0, 0, Number(forward) - Number(backward))
    sideVector.set(Number(right) - Number(left), 0, 0)
    direction
      .subVectors(frontVector, sideVector)
      .normalize()
      .multiplyScalar(SPEED)

    api.velocity.set(direction.x, 0, direction.z)
})

现在我们的球体 body 可以随着用户在 Cannon World 中的输入而移动，所以现在只需使用球体在每一帧上的位置更新您在光纤中的玩家模型，就像这样

// Setting person model position to sphere body position ...
useFrame(() => {
    ...
    mesh.current.getWorldPosition(playerModelReference.current.position)
})

抱歉解释得太长了，希望对您有所帮助。

反应三纤维如何控制人的运动？

How to control movement of a person in react three fiber?

react-three-fiber