CODEWITHSUNDEEP
reactjs
Amol Borkar
Amol Borkar

Reputation: 2599

Set camera angle react-three-fiber

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]}}>

Upvotes: 8

Views: 37903

Answers (3)

zero298
zero298

Reputation: 26867

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 />;
};

Upvotes: 12

mohamad kasiri
mohamad kasiri

Reputation: 61

There is no need to use useThree hook. You just need to add rotation={[30,0,0]} or any other values, just like what you did with the position. react-three/fiber could be very tricky, so may need to reset your app to see the result.

Upvotes: 6

Ricardo Javier
Ricardo Javier

Reputation: 11

I don't know if this is the best answer, but for me adding rotation={[0,0,0]} to the camera helps (you have to find what is the best angle for you changing the numbers).

Upvotes: 1

Related Questions