# How to update camera by giving a position

**URL:** <https://discourse.threejs.org/t/how-to-update-camera-by-giving-a-position/25306>\
**Category:** Questions\
**Tags:** camera, animation, react-three-fiber\
**Created:** [April 13, 2021, 5:46am UTC](https://discourse.threejs.org/t/how-to-update-camera-by-giving-a-position/25306 "2021-04-13T05:46:59Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mingxuan\_han](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mingxuan_han/32/13163_2.png) [@mingxuan\_han](https://discourse.threejs.org/u/mingxuan_han)\
**Post date:** [April 13, 2021, 5:46am UTC](https://discourse.threejs.org/t/how-to-update-camera-by-giving-a-position/25306/1 "2021-04-13T05:46:59Z")

</div>

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](https://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](https://codesandbox.io/s/vibrant-fire-bsvby?file=/src/App.js:2545-2551), 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.