javascript - Reposition camera to object & lookAt() (React three fiber) - Stack Overflow

admin管理员组

文章数量:1292054

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 : =/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 e 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 wele.

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 e 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 wele.

• javascript
• reactjs
• three.js
• 3d
• react-three-fiber

Share Improve this question Follow edited Aug 13, 2021 at 17:15 laffan asked Aug 13, 2021 at 16:31 laffanlaffan 14911 gold badge22 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.)

本文标签： javascriptReposition camera to object amp lookAt() (React three fiber)Stack Overflow