React 三纤-Tween Camera

Question

我想补间我的相机，从位置 A 到 B。我用 React spring 做了几次并做了一些解决方法：

import { useSpring } from "react-spring/three";

const springProps = useSpring({
config: { duration: 1000, easing: easings.easeCubicInOut },
to: {
  position: props.position,
  lookAt: props.lookAt,
  offset: props.offset,
},
onRest: (ya) => {
  if (props.enableOrbit) {
    props.parentStateModifier({ enableOrbit: true });
  }
},
});

useFrame(({ clock, camera, mouse }) => {
  camera.position.x = springProps.position.payload[0].value;
  camera.position.y = springProps.position.payload[1].value;
  camera.position.z = springProps.position.payload[2].value;

  camera.lookAt(
    springProps.lookAt.payload[0].value,
    springProps.lookAt.payload[1].value,
    springProps.lookAt.payload[2].value
  );
  camera.updateProjectionMatrix();
});

这不是一个很好的方法，但它奏效了。

我现在正在使用@react-spring/three，但它不再工作了。 “payload”现在未定义，我可以通过调用 springProps.x.animation.values[0]._value

来获取坐标

但是没有动画时值是空的。我相信一定有更好的方法来制作相机动画。

我喜欢 React spring 为三个网格设置动画。我希望我的相机也能用它。

Answer 1

好的，我设法更新了我的代码，以便我的相机再次具有动画效果：

const { gl, camera } = useThree();

const springProps = useSpring({
  config: { duration: 1000, easing: easings.easeCubic },
  from: {
    x: - 0.1,
    y: - 0.1,
    z: - 0.1,
    lookAtX: camera.lookAt.x - 0.1,
    lookAtY: camera.lookAt.y - 0.1,
    lookAtZ: camera.lookAt.z - 0.1,
  },
  to: {
    x: cameraData.position[0],
    y: cameraData.position[1],
    z: cameraData.position[2],
    lookAtX: cameraData.lookAt[0],
    lookAtY: cameraData.lookAt[1],
    lookAtZ: cameraData.lookAt[2],
  }
});

useFrame((state, delta) => {
  if (!orbit) {
    camera.position.x = springProps.x.animation.values[0]._value;
    camera.position.y = springProps.y.animation.values[0]._value;
    camera.position.z = springProps.z.animation.values[0]._value;
    camera.lookAt(
      springProps.lookAtX.animation.values[0]._value,
      springProps.lookAtY.animation.values[0]._value,
      springProps.lookAtZ.animation.values[0]._value
    );
  }
});

问题是，如果 from 和 to 值相同，values[0] 将是未定义的。例如，这不适用于我的代码：

from: {
  x: 0
  y: 0,
  z: 0,
},
to: {
  x: 0,
  y: 2,
  z: 4,
}

因为x有相同的值。我希望有人可以提供一种更好的方法来在 r3f 中为相机设置动画。

React 三纤-Tween Camera

React three fiber - Tween Camera

three.js

reactjs

react-three-fiber