Блог

Я пытаюсь использовать Orbitcontrols в сочетании с react spring для анимации моей камеры в React Three Fiber. До сих пор это мой подход:

 function Controls({ cameraData, duration }) {  const [orbit, setOrbit] = useState(true);  const [target, setTarget] = useState(cameraData.lookAt);  const { gl, camera } = useThree();   const springProps = useSpring({  config: { duration: duration ? duration : 1000, easing: easings.easeCubic },  from: {  x: camera.position.x - 0.1,  y: camera.position.y - 0.1,  z: camera.position.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],  },  onStart: (ya) =gt; {  setOrbit(false);  },  onRest: (ya) =gt; {  setOrbit(true);  setTarget(cameraData.lookAt)  },  });   useFrame((state, delta) =gt; {  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  );  }  });   return (  lt;OrbitControls  enabled={orbit}  target={target}  args={[camera, gl.domElement]}  /gt;  ); }  

Я отключаю орбитальные контроллеры, когда начинается моя весна. Все работает. Но: При использовании OrbitControl положение моей камеры меняется. После этого, когда я запускаю свою весеннюю анимацию, значения «от» не обновляются.

Например, я переключаюсь с x: 100 до x: 500 . Затем поверните мою камеру с помощью OrbitControls на x: 700 . Когда я начинаю свою следующую весеннюю анимацию, она анимируется, начиная с x: 500 вместо x: 700 .

Как я могу обновить свои from ценности.

Спасибо в связи