title: How to load the same gltf model in threejs or react-three-fiber
body: <p>i'm using react-three-fiber and i want to make a house. So i use a GLTF model for displaying the door.</p>
  <p>Render one door is fine but when i render 2 doors from the same GLTF file then only the 2nd door is rendered. Looks like the 2nd door has replaced the 1st instead of being a new door.</p>
  <p>How can i achieve having multiple doors, i've searched but there seems to be no one asking this question???</p>
  <p>My code:</p>
  <p><code>Door.tsx</code></p>
  <pre><code>import React from 'react';
  import { useLoader } from &quot;@react-three/fiber&quot;;
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
  
  interface DoorProps {
    rotation: any;
  }
  
  function Door(props: DoorProps) {
    const gltf = useLoader(GLTFLoader, '/simple_door.gltf');
  
    return (
      &lt;&gt;
        &lt;primitive
          object={gltf.scene}
          position={[25, 1, -17]}
          scale={0.05}
          rotation={props.rotation}
        /&gt;
      &lt;/&gt;
    );
  }
  
  export default Door;
  </code></pre>
  <p><code>Room.tsx</code></p>
  <pre><code>function Room() {
    return (
      &lt;Canvas
        shadows
        dpr={[1, 2]}
        frameloop=&quot;demand&quot;
        style={{ height: 800 }}
        camera={{ fov: 75, near: 0.1, far: 1000, position: [0, 10, 20] }}
      &gt;
        &lt;OrbitControls addEventListener={undefined} hasEventListener={undefined} removeEventListener={undefined} dispatchEvent={undefined} /&gt;
        &lt;ambientLight intensity={0.8} /&gt;
        &lt;color attach=&quot;background&quot; args={['#d0d0d0']} /&gt;
        &lt;fog attach=&quot;fog&quot; args={['#d0d0d0', 100, 600]} /&gt;
        &lt;Suspense fallback={null}&gt;
          &lt;Environment preset=&quot;city&quot; /&gt;
          &lt;Door /&gt;
          &lt;Plane 
            width={50}
            height={10}
            depth={1}
            position={[0, 0, -20]}
          /&gt;
          &lt;Door
            rotation={[0, 90*Math.PI/180, 0]}
          /&gt;
  
          &lt;Plane 
            width={50}
            height={1}
            depth={50}
            position={[0, -4.5, 5]}
          /&gt;
        &lt;/Suspense&gt;
      &lt;/Canvas&gt;
    );
  };
  
  export default Room;
  </code></pre>