反应三纤维-吐温相机

Question

我想把我的相机从位置A切换到位置B。我用反作用弹簧做了几次，但有一点变通办法：

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，但它已经不起作用了"有效载荷"；现在没有定义，我可以通过调用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中提供一种更好的相机动画方式。