反应三 - 编码第三人称视角相机答案

【问题标题】：React Three- Code a 3rd person view camera反应三 - 编码第三人称视角相机
【发布时间】：2022-07-23 00:16:37
【问题描述】：

我正在尝试设置汽车后面的动态摄像头位置，该位置在类似于以下项目的项目中实现 CAR using raycastVehicle

我尝试使用状态/挂钩更改相机的位置，但由于使用了 useRaycastVehicle，我无法定位汽车的位置。

您可以在https://codesandbox.io/s/ebr0x查看类似的车型代码。我正在尝试在汽车后面设置一个移动摄像头。感谢您的帮助。

部分代码处理汽车的物理等

function Vehicle({ radius = 0.7, width = 1.2, height = -0.04, front = 1.3, back = -1.15, steer = 0.75, force = 2000, maxBrake = 1e5, ...props }) {
  const chassis = useRef()
  const wheel1 = useRef()
  const wheel2 = useRef()
  const wheel3 = useRef()
  const wheel4 = useRef()
  const controls = useControls()
..............................................
 useFrame(() => {
    const { forward, backward, left, right, brake, reset } = controls.current
    for (let e = 2; e < 4; e++) api.applyEngineForce(forward || backward ? force * (forward && !backward ? -1 : 1) : 0, 2)
    for (let s = 0; s < 2; s++) api.setSteeringValue(left || right ? steer * (left && !right ? 1 : -1) : 0, s)
    for (let b = 2; b < 4; b++) api.setBrake(brake ? maxBrake : 0, b)
    if (reset) {
      chassis.current.api.position.set(0, 0.5, 0)
      chassis.current.api.velocity.set(0, 0, 0)
      chassis.current.api.angularVelocity.set(0, 0.5, 0)
      chassis.current.api.rotation.set(0, -Math.PI / 4, 0)
    }
  })

  return (
    <group ref={vehicle} position={[0, -0.4, 0]}>
      <Beetle ref={chassis} rotation={props.rotation} position={props.position} angularVelocity={props.angularVelocity} />
      <Wheel ref={wheel1} radius={radius} leftSide />
      <Wheel ref={wheel2} radius={radius} />
      <Wheel ref={wheel3} radius={radius} leftSide />
      <Wheel ref={wheel4} radius={radius} />
    </group>

【问题讨论】：

标签： reactjs three.js raycasting react-three-fiber cannon.js

【解决方案1】：

所以前几天我不得不做类似的事情。您需要将相机与模型本身一起使用group，

     <group ref={targetRef}>
        <PerspectiveCamera
          makeDefault
          position={[25, 22, 25]}
          args={[45, 1.2, 1, 1000]}
        />
        <mesh castShadow receiveShadow position={[0, 2, 0]}>
          <boxBufferGeometry args={[2, 2, 2]} />
          <meshStandardMaterial color={"#ff0000"} />
        </mesh>
     </group>

然后在useFrame中为组引用设置动画

  useFrame((state, delta) => {
    targetRef.current.position.x += moveRight ? 0.2 : moveLeft ? -0.2 : 0;
    targetRef.current.position.z += moveForward
      ? -0.2
      : moveBackward
      ? +0.2
      : 0;
    state.camera.lookAt(targetRef.current.position);
    state.camera.updateProjectionMatrix();
  });

我整理了一个非常简短的例子here https://codesandbox.io/s/distracted-wozniak-yvfrn4?file=/src/App.js

控制键是 AWSD，您可能需要全屏运行它才能看到它的工作

【讨论】：