I’m trying to implement camera movement in my React Three Fiber scene when a specific object is clicked. I want the camera to smoothly move from its current position to a position where it’s facing the object. The object is a computer screen, and I want when I press on the screen, the camera starting position moves to where it faces the screen. My canvas is set up with <Canvas shadows camera={{ position: [0, 3, 10], fov: 12 }}>. I went on blender and used the camera to calculate the position of where I want it to move to, those values are the perfect ones for where I want the screen to move to:
Location:
X: -0.00731 m
Y: -0.066827 m
Z: 0.56103 m
Rotation:
XYZ Euler
X:85.524°
Y:-0.1033°
Z:-2.1789°
Scale:
X: 0.597
Y:0.596
Z: 0.155
I tried to do this with:
const { camera } = useThree();
// Initial camera positions to restore after screen view
const initialCameraPosition = useRef(null);
const initialCameraRotation = useRef(null);
// Add state to track if screen is zoomed in
const [isScreenZoomed, setIsScreenZoomed] = useState(false);
// Reference to screen mesh for positioning
const screenRef = useRef();
// Convert Blender Euler angles (degrees) to radians
const degreesToRadians = (degrees) => degrees * (Math.PI / 180);
// Reset camera to its original position and rotation
const resetCamera = () => {
if (initialCameraPosition.current && initialCameraRotation.current) {
animate(camera.position, {
x: initialCameraPosition.current.x,
y: initialCameraPosition.current.y,
z: initialCameraPosition.current.z
}, {
duration: 0.8
});
animate(camera.rotation, {
x: initialCameraRotation.current.x,
y: initialCameraRotation.current.y,
z: initialCameraRotation.current.z
}, {
duration: 0.8,
onComplete: () => setIsScreenZoomed(false)
});
}
};
// Handle screen click event
const handleScreenClick = () => {
if (!isScreenZoomed && section === 0) {
// Store current camera position and rotation before zooming
initialCameraPosition.current = camera.position.clone();
initialCameraRotation.current = camera.rotation.clone();
// Set camera to the exact position and rotation from Blender
animate(camera.position, {
x: -0.00731,
y: -0.066827,
z: 0.56103
}, {
duration: 0.8
});
// Convert Blender Euler angles to radians for Three.js
animate(camera.rotation, {
x: degreesToRadians(85.524),
y: degreesToRadians(-0.1033),
z: degreesToRadians(-2.1789)
}, {
duration: 0.8,
onComplete: () => setIsScreenZoomed(true)
});
} else if (isScreenZoomed && section === 0) {
resetCamera();
}
};
return (
{/* Screen with click interaction - no hover effect */}
<mesh
ref={screenRef}
name=“Screen”
geometry={nodes.Screen.geometry}
material={materials[‘Material.019’]}
position={[0, 0.475, -0.434]}
rotation={[-Math.PI / 2, 0, 0]}
onClick={handleScreenClick}
>
… )}
However, the camera is moving in a straight line, its not even moving anywhere close to the screen, I tried to change the position values, its very difficult to get it anywhere close to the screen, in fact, it goes out of the whole office model. Please help!
Also if there are any tips on how to make the camera movement responsive, please kindly provide me with help on this as well please!
