Tween Camera Position in React Three Fiber

[ravsamy]

Hello,

I am looking for some help when it comes to animating the camera from one position to another in React Three Fiber.

I was able to accomplish it in Core Threejs like this:

var i = 0;

var x1 = 0.12; var y1 = 17; var z1 = 0.366;

var x2 = 53.526401075713835; var y2 = 26.12390207046461; var z2 = 61.710756497254096;

var x3 = -52.81991689783848; var y3 = 25.047377914605715; var z3 = 62.756964374300054;

var startButton = document.getElementById("start");

startButton.addEventListener("click", function ()

{ console.log("Position", camera.position);

if (i == 0)

{ new TWEEN.Tween(camera.position) .to({ x: x1, y1, z1 }, 1700)
.easing(TWEEN.Easing.Linear.None) .start(); i = i + 1; }

else if

(i == 1)
{ new TWEEN.Tween(camera.position) .to({ x: x2, y: y2, z: z2 }, 1700)
.easing(TWEEN.Easing.Linear.None) .start(); i = i + 1; }

else if

(i == 2) { new TWEEN.Tween(camera.position) .to({ x: x3, y: y3, z: z3 }, 1700)
.easing(TWEEN.Easing.Linear.None) .start(); i = 0; } });

I want to make the same functionality in React Three Fiber using Spring or Tween, for eg: every time a user clicks on a button, the camera position will change without changing the position of the GLTF Model (JSX).

Can someone help me out with this?

Thanks in Advance.

[drcmda]

react + three doesnt change anything, you still have cameras and all the regular threejs objects. if you could tween your camera before, that's exactly how you'd do it now. you can get the camera via useThree or useFrame.