setup canvas on first capture screenshot.js (#5442)

* setup canvas on first capture screenshot.js

* Update screenshot.js

* Update screenshot.js

* Update screenshot.js

* Update screenshot.js

* Update screenshot.js

* Update screenshot.js

* Update screenshot.js

* Update screenshot.js

Author: arpu

src/components/scene/screenshot.js

@@ -50,37 +50,28 @@ module.exports.Component = registerComponent('screenshot', {
     camera: {type: 'selector'}
   },
 
-  init: function () {
+  setup: function () {
     var el = this.el;
-    var self = this;
-
-    if (el.renderer) {
-      setup();
-    } else {
-      el.addEventListener('render-target-loaded', setup);
-    }
-
-    function setup () {
-      var gl = el.renderer.getContext();
-      if (!gl) { return; }
-      self.cubeMapSize = gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE);
-      self.material = new THREE.RawShaderMaterial({
-        uniforms: {map: {type: 't', value: null}},
-        vertexShader: VERTEX_SHADER,
-        fragmentShader: FRAGMENT_SHADER,
-        side: THREE.DoubleSide
-      });
-      self.quad = new THREE.Mesh(
-        new THREE.PlaneGeometry(1, 1),
-        self.material
-      );
-      self.quad.visible = false;
-      self.camera = new THREE.OrthographicCamera(-1 / 2, 1 / 2, 1 / 2, -1 / 2, -10000, 10000);
-      self.canvas = document.createElement('canvas');
-      self.ctx = self.canvas.getContext('2d');
-      el.object3D.add(self.quad);
-      self.onKeyDown = self.onKeyDown.bind(self);
-    }
+    if (this.canvas) { return; }
+    var gl = el.renderer.getContext();
+    if (!gl) { return; }
+    this.cubeMapSize = gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE);
+    this.material = new THREE.RawShaderMaterial({
+      uniforms: {map: {type: 't', value: null}},
+      vertexShader: VERTEX_SHADER,
+      fragmentShader: FRAGMENT_SHADER,
+      side: THREE.DoubleSide
+    });
+    this.quad = new THREE.Mesh(
+      new THREE.PlaneGeometry(1, 1),
+      this.material
+    );
+    this.quad.visible = false;
+    this.camera = new THREE.OrthographicCamera(-1 / 2, 1 / 2, 1 / 2, -1 / 2, -10000, 10000);
+    this.canvas = document.createElement('canvas');
+    this.ctx = this.canvas.getContext('2d');
+    el.object3D.add(this.quad);
+    this.onKeyDown = this.onKeyDown.bind(this);
   },
 
   getRenderTarget: function (width, height) {
@@ -181,6 +172,7 @@ module.exports.Component = registerComponent('screenshot', {
     var isVREnabled = this.el.renderer.xr.enabled;
     var renderer = this.el.renderer;
     var params;
+    this.setup();
     // Disable VR.
     renderer.xr.enabled = false;
     params = this.setCapture(projection);