fixed canvas size on late registration (#3836)

Author: elalish

packages/model-viewer/src/test/three-components/Renderer-spec.ts

@@ -13,8 +13,10 @@
  * limitations under the License.
  */
 
+import {Vector2} from 'three';
+
 import {$controls} from '../../features/controls.js';
-import {$intersectionObserver, $isElementInViewport, $onResize, $renderer, $scene, Camera, RendererInterface} from '../../model-viewer-base.js';
+import {$intersectionObserver, $isElementInViewport, $onResize, $renderer, $scene, $updateSize, Camera, RendererInterface} from '../../model-viewer-base.js';
 import {ModelViewerElement} from '../../model-viewer.js';
 import {ModelScene} from '../../three-components/ModelScene.js';
 import {Renderer} from '../../three-components/Renderer.js';
@@ -225,6 +227,30 @@ suite('Renderer with two scenes', () => {
           .to.be.eq(true, 'otherScene canvas should still be shown.');
     });
 
+    test(
+        'When registered, the scene canvas dimensions match the renderer size',
+        () => {
+          renderer.render(performance.now());
+          const oldSize = new Vector2();
+          renderer.threeRenderer.getSize(oldSize);
+          console.log(oldSize);
+
+          renderer.unregisterScene(scene);
+          otherScene.element[$updateSize]({width: 400, height: 200});
+          renderer.render(performance.now());
+
+          const size = new Vector2();
+          renderer.threeRenderer.getSize(size);
+          console.log(size);
+          expect(size.x).to.be.greaterThan(oldSize.width, 'renderer width');
+          expect(size.y).to.be.greaterThan(oldSize.height, 'renderer height');
+
+          renderer.registerScene(scene);
+          renderer.render(performance.now());
+          expect(scene.canvas.width).to.be.eq(size.x, 'canvas width');
+          expect(scene.canvas.height).to.be.eq(size.y, 'canvas height');
+        });
+
     suite('when resizing', () => {
       let originalDpr: number;
 

packages/model-viewer/src/three-components/Renderer.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {ACESFilmicToneMapping, Event, EventDispatcher, sRGBEncoding, WebGLRenderer} from 'three';
+import {ACESFilmicToneMapping, Event, EventDispatcher, sRGBEncoding, Vector2, WebGLRenderer} from 'three';
 
 import {$updateEnvironment} from '../features/environment.js';
 import {ModelViewerGlobalConfig} from '../features/loading.js';
@@ -177,6 +177,11 @@ export class Renderer extends EventDispatcher {
 
     scene.forceRescale();
 
+    const size = new Vector2();
+    this.threeRenderer.getSize(size);
+    scene.canvas.width = size.x;
+    scene.canvas.height = size.y;
+
     if (this.canRender && this.scenes.size > 0) {
       this.threeRenderer.setAnimationLoop(
           (time: number, frame?: any) => this.render(time, frame));