Set camera angle react-three-fiber

Question

How do I point the camera to a certain direction in my scene using react-three-fiber? The canvas element has a camera prop but it doesn't provide a way to set the angle.

    <Canvas camera={{ fov: 75, position: [-10, 45, 20]}}>

Answer 1

You can get access to the underlying three.js camera object through the useThree hook.

Setting the rotation property on the camera of the canvas element didn't seem to do anything so it may be reset by something else in my test scene.

Bear in mind, R3F is a very thin wrapper over three.js. All of the documentation that applies to three.js applies to R3F as well.

There is no hard dependency on a particular Threejs version, it does not wrap or duplicate a single Threejs class. It merely expresses Threejs in JSX: <mesh /> becomes new THREE.Mesh(), and that happens dynamically.

import { Canvas, useThree } from "@react-three/fiber";
import * as THREE from 'three';

const Scene = () => {
  useThree(({ camera }) => {
    camera.rotation.set(THREE.MathUtils.degToRad(30), 0, 0);
  });
  
  return <Canvas />;
};