dont show helpers in scnreenshot

- change tock event function to update - add render call before screenshot - add toggleHelpers function - move takeScreenshotNow function to component
3DStreet · Nov 11, 2023 · 39024d8 · 39024d8
1 parent d467f14
commit 39024d8
Showing 1 changed file with 45 additions and 30 deletions.
diff --git a/src/components/screentock.js b/src/components/screentock.js
@@ -14,44 +14,59 @@
 //   AFRAME.scenes[0].setAttribute('screentock', 'takeScreenshot', true);
 // }
 
-takeScreenshotNow = function (filename, type, imgElement) {
-  var renderer = AFRAME.scenes[0].renderer;
-
-  function downloadImageDataURL (filename, dataURL) {
-    var element = document.createElement('a');
-    var url = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
-    element.setAttribute('href', url);
-    element.setAttribute('download', filename);
-    element.style.display = 'none';
-    document.body.appendChild(element);
-    element.click();
-    document.body.removeChild(element);
-  }
-  var saveFilename = filename + '.' + type;
-
-  if (type == 'img') {
-    imgElement.src = renderer.domElement.toDataURL();
-    return;
-  }
-  if (type == 'png') {
-    downloadImageDataURL(saveFilename, renderer.domElement.toDataURL('image/png'));
-  } else {
-    downloadImageDataURL(saveFilename, renderer.domElement.toDataURL('image/jpeg', 0.95));
-  }
-};
-
 AFRAME.registerComponent('screentock', {
   schema: {
     takeScreenshot: { type: 'boolean', default: false },
     filename: { type: 'string', default: 'screenshot' },
     type: { type: 'string', default: 'jpg' }, // png, jpg, img
     imgElementSelector: { type: 'selector' }
   },
-  tock: function () {
+  takeScreenshotNow: function (filename, type, imgElement) {
+    const inspector = AFRAME.INSPECTOR;
+    const renderer = AFRAME.scenes[0].renderer;
+
+    // hide helpers
+    toggleHelpers(false);
+
+    function downloadImage (filename, dataURL) { 
+      downloadImageDataURL(filename, dataURL);
+      // show helpers
+      toggleHelpers(true);
+    }
+
+    function toggleHelpers(show) {
+      if (inspector && inspector.opened) inspector.sceneHelpers.visible = show;
+    }
+
+    function downloadImageDataURL (filename, dataURL) {
+      const element = document.createElement('a');
+      const url = dataURL.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
+      element.setAttribute('href', url);
+      element.setAttribute('download', filename);
+      element.style.display = 'none';
+      document.body.appendChild(element);
+      element.click();
+      document.body.removeChild(element);
+    }
+    const saveFilename = filename + '.' + type;
+
+    renderer.render(AFRAME.scenes[0].object3D, AFRAME.scenes[0].camera);
+
+    if (type == 'img') {
+      imgElement.src = renderer.domElement.toDataURL();
+      return;
+    }
+    if (type == 'png') {
+      downloadImage(saveFilename, renderer.domElement.toDataURL('image/png'));
+    } else {
+      downloadImage(saveFilename, renderer.domElement.toDataURL('image/jpeg', 0.95));
+    }
+  },
+  update: function () {
     // this should be paused when not in use. could be throttled too
     if (this.data.takeScreenshot) {
-      this.el.setAttribute('screentock', 'takeScreenshot', false);
-      takeScreenshotNow(this.data.filename, this.data.type, this.data.imgElementSelector);
-    }
+      this.data.takeScreenshot = false;
+      this.takeScreenshotNow(this.data.filename, this.data.type, this.data.imgElementSelector);
+    }   
   }
 });