CODEWITHSUNDEEP
javascriptreactjsthree.js3dreact-three-fiber
laffan
laffan

Reputation: 149

Reposition camera to object & lookAt() (React three fiber)

I am trying to transition camera.position and camera.lookAt smoothly between "zoomed out" and "zoomed in" views of individual, randomly placed objects.

The positioning works great. Lerping the lookAt(), however, doesn't seem to be playing nicely with other solutions for traditional ThreeJS ( see @bovesan's answer here) nor addressed by the relevant example on the react-three-fiber docs (link).

Zooming in past the z axis flips the camera around, and at the corners it's wildly distored.

You can see my progress here : https://codesandbox.io/s/three-fiber-zoom-to-object-rlme0?file=/src/App.js

With the relevant bit of code being in App.js on line 63 :

 useFrame((state) => {
    const step = 0.05;

    // `focus` is a state variable that sends a Vec3 of the objects position
    zoom ? vec.set(focus.x, focus.y, focus.z + 0.2) : vec.set(0, 0, 5);

    // HERE, looking for a way to lerp camera lookAt in a way that can toggle.
    state.camera.lookAt(0, 0, 0);
    state.camera.position.lerp(vec, step);

    state.camera.updateProjectionMatrix();
  });

I've spent hours looking for relevant examples/tutorials, but haven't come up with much. I'm afraid I don't have enough ThreeJs experience to be looking in the right direction, though, so any help in any direction would be most welcome.

Upvotes: 3

Views: 19940

Answers (1)

laffan
laffan

Reputation: 149

To anyone who happens upon this later, the solution was figured out over at by @drcmda.

You can find a working example here :

https://codesandbox.io/s/three-fiber-zoom-to-object-camera-controls-solution-final-sbgx0?file=/src/App.js

This is just a slight change on @drcmda 's implementation of camera-controls with normal lerping to move the camera. It’s not perfect (for one, the transition time in camera controls doesn’t seem to be editable, so there’s a weird swing-around thing that happens, when you’re zooming back out) but it definitely solves the problem. (Many thanks to @looeee and @forerunrun for additional help.)

If you'd rather not use another library, @forerunrun's answer in the original thread also works well, but I wasn't able to debug it enough to have it be reliable. (See convo.)

Upvotes: 6

Related Questions