title: THREE js image not displayng in canvas
body: <p>I have two scenes and to renders. I alse use Bootstrap 4 for modal window.
  One scene is main, another is shown in modal window, that's why I am using two renders: one for the element on the main screen and one for modal window.</p>
  <p>Code:</p>
  <p>Main scene:</p>
  <p><code>&lt;div class=&quot;output3d&quot; id=&quot;WebGL-output&quot;&gt;&lt;/div&gt;</code></p>
  <pre><code>function setMainScene() {
          scene = new THREE.Scene();
          scene.background = new THREE.Color(&quot;#ffffff&quot;);
  
          renderer = new THREE.WebGLRenderer({antialias: true, logarithmicDepthBuffer: true});
          renderer.setPixelRatio(window.devicePixelRatio);
          renderer.setSize(window.innerWidth, window.innerHeight);
          document.getElementById(&quot;WebGL-output&quot;).appendChild(renderer.domElement);
  
          camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
          camera.position.x = home[0];
          camera.position.y = home[1];
          camera.position.z = home[2];
          camera.lookAt(home[3], home[4], home[5])
  
          controls = initOrbitControls(camera, renderer, new THREE.Vector3(home[3], home[4], home[5]))
  }
  </code></pre>
  <p>Scene for modal window:</p>
  <pre><code>&lt;div class=&quot;modal&quot; data-backdrop=&quot;static&quot; id=&quot;ObjectInfo&quot; role=&quot;dialog&quot; tabindex=&quot;-1&quot;&gt;
      &lt;div class=&quot;modal-dialog modal-xl modal-dialog-scrollable&quot; role=&quot;document&quot; style=&quot;bottom: 0&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot; id=&quot;ObjectId&quot;&gt;&lt;/h5&gt;
                  &lt;button aria-label=&quot;Close&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; onclick=&quot;&quot; type=&quot;button&quot;&gt;
                      &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;div class=&quot;container&quot;&gt;
                      &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;col&quot;&gt;
                              &lt;div&gt;
                                  &lt;img src=&quot;css/360.jpg&quot; alt=&quot;&lt;--&gt;&quot;&gt;
                              &lt;/div&gt;
                              &lt;div id=&quot;FrontView&quot;&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;col&quot;&gt;
                              &lt;p id=&quot;ObjectType&quot; class=&quot;mb-0&quot;&gt;&lt;/p&gt;
                              &lt;p id=&quot;ObjectInfoText&quot; class=&quot;mb-0&quot;&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code> function setModalWindowScene() {
          modalWindowScene = new THREE.Scene()
          modalWindowScene.background = new THREE.Color(&quot;#ffffff&quot;);
  
          modalWindowRenderer = new THREE.WebGLRenderer({antialias: true});
          modalWindowRenderer.setPixelRatio(window.devicePixelRatio);
          modalWindowRenderer.setSize(450, 450);
          document.getElementById(&quot;FrontView&quot;).appendChild(modalWindowRenderer.domElement);
  
          modalWindowCamera = new THREE.PerspectiveCamera(45, document.getElementById(&quot;FrontView&quot;).innerWidth / document.getElementById(&quot;FrontView&quot;).innerHeight, 1, 100);
          modalWindowControls = new THREE.OrbitControls(modalWindowCamera, modalWindowRenderer.domElement);
  </code></pre>
  <p>Init:</p>
  <pre><code>function init() {
      setMainScene()
      setModalWindowScene()
  
      // adding objects to main scene
      addRoom()
      addRacks()
      addExtinguishingCylinders()
      addHotHalls()
      addWires()
      addLights()
  
      window.addEventListener('resize', onWindowResize, false);
  }
  </code></pre>
  <p>Rendering:</p>
  <pre><code>function animate() {
      requestAnimationFrame(animate);
      render();
  }
  
  function render() {
      renderer.render(scene, camera);
      if (modalWindowOpen) {
          modalWindowRenderer.render(modalWindowScene, modalWindowCamera);
      }
  }
  
  function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      modalWindowCamera.aspect = document.getElementById(&quot;FrontView&quot;).offsetWidth / document.getElementById(&quot;FrontView&quot;).offsetHeight;
  
      camera.updateProjectionMatrix();
      modalWindowCamera.updateProjectionMatrix();
  
      renderer.setSize(window.innerWidth, window.innerHeight);
      modalWindowRenderer.setSize(document.getElementById(&quot;FrontView&quot;).offsetWidth, document.getElementById(&quot;FrontView&quot;).offsetHeight)
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      init();
      animate();
  &lt;/script&gt;
  </code></pre>
  <p>When user opens modal window, object is added to modal scene and the user can interact with it in modal scene with modal controls.</p>
  <p>Problem:</p>
  <p>When the first time user opens the modal window, picture of the object isn't drawn, despite that  object is append to <code>&lt;div id=&quot;FrontView&quot;&gt;&lt;/div&gt;</code> in the modal window, but it is empty. But when user resize the window , picture appears and stay forever.</p>
  <p>Interesting thing. When there is no picture in modal window, I can rotate object with controls, which was binded to modal scene.</p>
  <p>Demonstration:
  <a href="https://i.stack.imgur.com/S20dl.png" rel="nofollow noreferrer">Before resizing</a>
  <a href="https://i.stack.imgur.com/ZK4Iu.png" rel="nofollow noreferrer">After resizing</a></p>