title: How to move the camera using react-three-fiber and @react-three/drei?
body: <p>I'm drawing a 3d model with the following configuration.</p>
  <ul>
  <li><a href="https://github.com/pmndrs/react-three-fiber" rel="nofollow noreferrer">react-three-fiber</a></li>
  <li><a href="https://github.com/pmndrs/drei" rel="nofollow noreferrer">@react-three/drei</a></li>
  </ul>
  <p>The following is a CodeSandBox with a model drawn.<br />
  <a href="https://codesandbox.io/s/keen-mendel-ersc7" rel="nofollow noreferrer">CodeSandBox-A</a></p>
  <p>The drawn model is close to the top of the canvas, and I want to center it.</p>
  <p><a href="https://i.stack.imgur.com/6t1C0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6t1C0.jpg" alt="canvas" /></a></p>
  <p>Could you please tell me how to center the model on the canvas?<br />
  This is the first time I've touched Three.js, so I'm sure I may have made some elementary mistakes.</p>
  <hr />
  <p>The code is as follows.<br />
  I referred to the following document for the props of the Canvas component.<br />
  <a href="https://docs.pmnd.rs/react-three-fiber/API/canvas" rel="nofollow noreferrer">React Three Fiber Documentation</a></p>
  <pre class="lang-js prettyprint-override"><code>import { useMemo, Suspense } from &quot;react&quot;;
  import &quot;./style.css&quot;;
  import { Canvas } from &quot;@react-three/fiber&quot;;
  const { useGLTF, OrbitControls, Stage } = require(&quot;@react-three/drei&quot;);
  
  const CanvasContainer = () =&gt; {
    const { scene } = useGLTF(&quot;/scene.glb&quot;);
    return (
      &lt;Canvas camera={{ fov: 70, position: [0, 1000, 1000] }}&gt;
      // No matter what I put in this &quot;position&quot; value, I could not see any change in the canvas.
        &lt;OrbitControls enablePan={true} enableZoom={true} enableRotate={true} /&gt;
        &lt;Stage&gt;
          &lt;group dispose={null}&gt;
            &lt;primitive scale={[1, 1, 1]} object={scene} /&gt;
          &lt;/group&gt;
        &lt;/Stage&gt;
      &lt;/Canvas&gt;
    );
  };
  
  const App = () =&gt; {
    const isWindow = typeof window === &quot;undefined&quot;;
    const memoCanvas = useMemo(() =&gt; &lt;CanvasContainer /&gt;, []);
  
    return (
      &lt;&gt;
        &lt;h1&gt;Canvas&lt;/h1&gt;
        &lt;div className=&quot;canvas_container&quot;&gt;
          {!isWindow &amp;&amp; &lt;Suspense fallback={&lt;div /&gt;}&gt;{memoCanvas}&lt;/Suspense&gt;}
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default App;
  </code></pre>
  <hr />
  <p><a href="https://github.com/pmndrs/react-three-fiber/issues/1147" rel="nofollow noreferrer">setDefaultCamera removed in v6.x. · Issue #1147 · pmndrs/react-three-fiber</a><br />
  I also tried the code to use <code>useThree</code> as described in the above Issue.<br />
  The following is its CodeSandBox.<br />
  <a href="https://codesandbox.io/s/sharp-beaver-ngspl" rel="nofollow noreferrer">CodeSandBox-B</a><br />
  As you can see from the CodeSandBox, I was unable to move the camera.</p>