0

我喜欢 react-three，我正在尝试用身体制作一个 FPV 角色： https ://codesandbox.io/s/fpv-player-ers63 所以目标是将相机放置在头部水平并且角色移动就像Paul Henschel drcmda的原始示例https://codesandbox.io/s/minecraft-vkgi6

我添加了 PerspectiveCamera 来更改相机位置，但现在 PointerLockControls 不再起作用，我不明白为什么以及如何处理它。

谢谢

透视相机使用

export const Player = (props) => {
  const axe = useRef()
  const [ref, api] = useSphere(() => ({ mass: 1, type: "Dynamic", position: [0, 10, 0], ...props }))
  const { forward, backward, left, right, jump } = usePlayerControls()
  const { camera } = useThree()
  const velocity = useRef([0, 0, 0])
  useEffect(() => api.velocity.subscribe((v) => (velocity.current = v)), [])
  useFrame((state) => {
    ref.current.getWorldPosition(camera.position)
    frontVector.set(0, 0, Number(backward) - Number(forward))
    sideVector.set(Number(left) - Number(right), 0, 0)
    direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation)
    speed.fromArray(velocity.current)
    axe.current.children[0].rotation.x = THREE.MathUtils.lerp(
      axe.current.children[0].rotation.x,
      Math.sin((speed.length() > 1) * state.clock.elapsedTime * 10) / 20,
      0.01,
    )
    axe.current.rotation.copy(camera.rotation)
    axe.current.position.copy(camera.position).add(camera.getWorldDirection(rotation).multiplyScalar(1))

    api.velocity.set(direction.x, velocity.current[1], direction.z)
    if (jump && Math.abs(velocity.current[1].toFixed(2)) < 0.05) api.velocity.set(velocity.current[0], 10, velocity.current[2])
  })
  return (
    <>
      <mesh ref={ref} />
      <group ref={axe} onPointerMissed={(e) => (axe.current.children[0].rotation.x = -0.5)}>
        <group position={[0, 7, 0]}>
          <PerspectiveCamera makeDefault={true} fov={75}>
            <Body position={[0, -4, 1]} />
          </PerspectiveCamera>
        </group>
      </group>
    </>
  )
}

PointerLockControls 用法

export default function App() {
  return (
    <Canvas
      shadows
      gl={{ alpha: false }}
      camera={{ fov: 45 }}
      raycaster={{
        computeOffsets: (e) => ({ offsetX: e.target.width / 2, offsetY: e.target.height / 2 }),
      }}>
      <Sky sunPosition={[100, 20, 100]} />
      <ambientLight intensity={0.3} />
      <pointLight castShadow intensity={0.8} position={[100, 100, 100]} />
      <Physics gravity={[0, -30, 0]}>
        <Ground />
        <Player />
        <Reflector
          blur={[0, 0]} // Blur ground reflections (width, heigt), 0 skips blur
          mixBlur={0.1} // How much blur mixes with surface roughness
          mixStrength={0.25} // Strength of the reflections
          resolution={1024} // Off-buffer resolution, lower=faster, higher=better quality
          args={[10, 30]} // PlaneBufferGeometry arguments
          position={[0, 0, -20]}
          rotation={[0, 0, 2 * Math.PI]}
          mirror={0.5} // Mirror environment, 0 = texture colors, 1 = pick up env colors
          minDepthThreshold={0.25}
          maxDepthThreshold={1}
          depthScale={50}>
          {(Material, props) => <Material metalness={0} roughness={0} {...props} />}
        </Reflector>
      </Physics>
      <PointerLockControls />
    </Canvas>
  )
}

浏览器：Firefox 94.0.2（64 位）、macOS Monterey

“依赖”：{“@pmndrs/branding”：“0.0.8”，“@react-three/cannon”：“4.0.1”，“@react-three/drei”：“7.17.2”，“@ react-three/fiber": "7.0.17", "@types/three": "0.133.1", "react": "17.0.2", "react-dom": "17.0.2", "react -scripts”：“4.0.3”，“simplex-noise”：“3.0.0”，“三个”：“0.133.1”，“zustand”：“3.6.1”}，

https://codesandbox.io/s/fpv-player-ers63

4

1 回答 1

0

好吧，我发现在useFrame更新 https://codesandbox.io/s/fpv-player-ers63中偏移相机就足够了

export const Player = (props) => {
  const axe = useRef()
  const [ref, api] = useSphere(() => ({ args: [1], mass: 1, type: "Dynamic", position: [0, 10, 0], ...props }))
  const { forward, backward, left, right, jump } = usePlayerControls()
  const { camera } = useThree()
  const velocity = useRef([0, 0, 0])
  useEffect(() => api.velocity.subscribe((v) => (velocity.current = v)), [])
  useFrame((state) => {
    ref.current.getWorldPosition(camera.position)
    frontVector.set(0, 0, Number(backward) - Number(forward))
    sideVector.set(Number(left) - Number(right), 0, 0)
    direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation)
    speed.fromArray(velocity.current)
    axe.current.children[0].rotation.x = THREE.MathUtils.lerp(
      axe.current.children[0].rotation.x,
      Math.sin((speed.length() > 1) * state.clock.elapsedTime * 10) / 10,
      0.1,
    )
    axe.current.rotation.copy(camera.rotation)
    axe.current.position.copy(camera.position).add(camera.getWorldDirection(rotation).multiplyScalar(1))
    camera.position.setY(camera.position.y + 8)
    api.velocity.set(direction.x, velocity.current[1], direction.z)
    if (jump && Math.abs(velocity.current[1].toFixed(2)) < 0.05) api.velocity.set(velocity.current[0], 10, velocity.current[2])
  })
  return (
    <>
      <mesh ref={ref} />
      <group ref={axe} onPointerMissed={(e) => (axe.current.children[0].rotation.x = -0.5)}>
        <Body position={[0, 4, 0]} />
      </group>
    </>
  )
}
于 2021-12-08T18:38:08.130 回答