How to update camera by giving a position

Questions
, ,
1

Hi, I get stuck in camera animation. I want to implement following effect: a component can receive a prop representing camera position, such as an array or THREE.Camera, and this change can be animated when I click button to update this prop by giving a new camera position.

Currently, the project is like here, but there are some problems:

  1. prop.cameraPosition should be an array idealy but it can lost ‘length’ or ‘hasOwnProperty’ property in component ModelCanvas. Why?
  2. Because the project isn’t complete, the prop is randomly generated now. However, this prop eventually will get value by some computations from reading contents of glb. How to maximize compatibility with subsequent features?
  3. @react-three/fiber is used in the example. In addition, react-spring can also implements animation effects. How do I make a choice between @react-three/fiber and react-spring to implement animation?
  4. Please give me some examples to learn.

Thanks.