Give a position to update camera

[MakitaToki]

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 threejs Camera class, 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 will 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.

[drcmda]

i think you're making it way too complicated: https://codesandbox.io/s/framer-motion-camera-focus-nsb7f?file=/src/App.js (click the sphere)

you have a camera and you can access it anywhere:

// in any component
const camera = useThree(state => state.camera)
// or in useFrame
useFrame(state => {
  state.camera ...
})

the easiest animation is lerp.

const vec = new THREE.Vector3()

function Foo() {
  // ...
  camera.position.lerp(temp.set(x, y, z), friction)

if you combine lerp with useFrame you have an animation ootb. x,y and z represent your target coordinates. how you propagate these through the scene is up to you. friction is how fast the animation is, try 0.1 for starters.

[MakitaToki]

I write a project again. According to my aim, I add some functions, here is my codesandbox. I define a click handler in AppEntry, when click event occurs I want Button component can update. But when I click, data is undefined. I don't know where error comes from, can you fix this? My aim is to update camera when I click button.

[arwenpi]

I think you want to call your state setter function like this:

    const x = distribution(mt);
    const y = distribution(mt);
    const z = distribution(mt);

    setCoordinate({x,y,z}

This fixes propagation of the position into your Button, and then you're going to need to fix the following issues in your button fn:

• you're calling set multiple times on the same vector
• only set the vector values if you have x/y/z

function Button(props) {
  const vec = new THREE.Vector3(10, 5, 10);
  const lightvec = new THREE.Vector3(8, 3, 10);
  const light = useRef();

  console.log(props.position);

  const { x, y, z } = props.position;

  if (x && y && z) {
    vec.set(x, y, z);
    lightvec.set(x - 2, y - 2, z);
  }

  useFrame((state) => {
    const step = 0.1;
    // state.camera.fov = THREE.MathUtils.lerp(state.camera.fov, )
    state.camera.position.lerp(vec, step);
    state.camera.lookAt(0, 0, 0);
    state.camera.updateProjectionMatrix();
    light.current.position.lerp(lightvec, step);
  });

  return (
    <mesh receiveShadow castShadow>
      <sphereBufferGeometry args={[0.75, 64, 64]} />
      <meshPhysicalMaterial
        color={"#e7b056"}
        clearcoat={1}
        clearcoatRoughness={0}
      />
      <Shadow
        position-y={-0.79}
        rotation-x={-Math.PI / 2}
        opacity={0.6}
        scale={[0.8, 0.8, 1]}
      />
      <directionalLight
        ref={light}
        castShadow
        intensity={1.5}
        shadow-camera-far={50}
      />
    </mesh>
  );
}

Addendum: fix in sandbox.

[MakitaToki]

Thanks.