title: Control model size using react-three-fiber
body: <p>I'm new to react-three-fiber, so I really think my problem is easy but I almost give up on it .</p>
  <p>the problem :
  I have a 3D model it renders ok but it’s away too big
  I have to zoom out to 25% just to see almost half the model (see the picture)
  <a href="https://i.stack.imgur.com/SRN0B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SRN0B.png" alt="enter image description here" /></a></p>
  <p>what I wanted:
  the model to be way smaller so I can put it as a small background for my website.</p>
  <p>Here’s the full model
  <a href="https://i.stack.imgur.com/NFJgT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NFJgT.png" alt="enter image description here" /></a></p>
  <p>I want to put the model.js but it’s too many lines , there’s nothing special really I use the <code>gltfjsx</code> command line to transfer my <code>.gltf</code> file to <code>.js</code> file and I didn’t do any changes to it.</p>
  <p>and here's my app.js</p>
  <pre><code>import React, { Suspense } from &quot;react&quot;;
  import { Canvas } from &quot;@react-three/fiber&quot;;
  import { OrbitControls } from &quot;@react-three/drei&quot;;
  import './App.css';
  import Model from './components/Bedroom';
  
  function App() {
    return (
      &lt;Canvas&gt;
        &lt;OrbitControls /&gt;
        &lt;ambientLight intensity={0.6} /&gt;
        &lt;directionalLight intensity={0.5} /&gt;
        &lt;Suspense fallback={null}&gt;
          &lt;Model/&gt;
        &lt;/Suspense&gt;
      &lt;/Canvas&gt;
    );
  }
   
  export default App;
  </code></pre>