Reset camera to initial position in react three fiber

Questions
1

Hi, I’m a beginner to threejs and react three fiber, I’m trying to build upon one of the examples given in the docs, the shoe configurator

I’ve added an image downloading function according to
this example

Now the canvas image downloads fine but it downloads in the the position which i had dragged it, but instead i need it to download the image in the original camera position

I tried doing this with a state for the camera position, and a function to set the camera postion in a standard react sense but it doesn’t seem to work

export default function App() {
  const ref = useRef();
  function downloadScreenshot() {
    const image = ref.current.toDataURL("image/png");
    const a = document.createElement("a");
    a.setAttribute("download", "screenshot.png");
    a.setAttribute("href", image);
    a.click();
  }
  const [cameraPosition, setCameraPosition] = useState([0, 0, 4]); // Initial camera position

  const changeCameraPosition = (newPosition) => {
    setCameraPosition(newPosition);
  };

  return (
    <div className="flex justify-center items-center w-screen h-screen bg-gray-200 ">
      <Canvas
        shadows
        camera={{ position: cameraPosition, fov: 45 }}
        ref={ref}
        gl={{ preserveDrawingBuffer: true }}
      >
        <ambientLight intensity={0.7} />
        <spotLight
          intensity={0.5}
          angle={0.1}
          penumbra={1}
          position={[10, 15, 10]}
          castShadow
        />
        <Shoe />
        <Environment preset="city" />
        <ContactShadows
          position={[0, -0.8, 0]}
          opacity={0.25}
          scale={10}
          blur={1.5}
          far={0.8}
        />
        <OrbitControls maxPolarAngle={Math.PI / 2} enableZoom={false} />
      </Canvas>
      <div className=" flex flex-col  justify-evenly h-screen w-[280px]  bg-gray-100  ">
        <Picker />
        <button
          className=" bg-gray-300 p-6 rounded-full m-4 text-2xl"
          onClick={() => {
            console.log(state.items.band);
            console.log(state.items.sole);
            console.log(state.items.mesh);
          }}
        >
          Proceed
        </button>

        <button
          className=" bg-gray-300 p-6 rounded-full m-4 text-2xl"
          onClick={() => {
            changeCameraPosition([0, 0, 4]);
            downloadScreenshot();
          }}
        >
          Download
        </button>
      </div>
    </div>
  );
}
2

Figured it out, Sorry for the newbie question

Here’s a solution if someone may come across this problem in the future

Make a ref for the orbit controls
Use the .reset() function to reset it to the initial state

  const orbitref = useRef();
  
        <OrbitControls
          ref={orbitref}
          maxPolarAngle={Math.PI / 2}
          enableZoom={false}
        />

    <button className=" bg-gray-300 p-6 rounded-full m-4 text-2xl"
          onClick={() => {
            orbitref.current.reset();
            setTimeout(() => {
              downloadScreenshot();
            }, 1500);
          }}
        >
          Download
    </button>
1 Like
3

This is exactly what I needed, thank you!