feat(viewer): adds native screenshot capability (image/png)

packages/viewer/example/example.html

@@ -28,10 +28,11 @@
           <button onclick="v.interactions.zoomExtents()">Zoom Extents</button>
           <button onclick="v.interactions.toggleSectionBox()">Toggle Section Box</button>
           <button onclick="v.interactions.rotateCamera(undefined, undefined, false)">Rotate</button>
+          <button onclick="viewerScreenshot()">Screenshot</button>
         </div>
         <div class="twelve columns">
           <input id="objectUrlInput" type="text" name="objectId" placeholder="Object Url" style="width:49%" value="https://staging.speckle.dev/streams/a75ab4f10f/objects/a59617590b0bec4e9b5ee487ee75b1a7"/>
-          <button class="" onclick="LoadData()" style="width:49%">Load Object URL</button>
+          <button class="" onclick="loadData()" style="width:49%">Load Object URL</button>
         </div>
         <div class="twelve columns">
           <button onclick="v.sceneManager.removeAllObjects()">Dispose Everything</button>

packages/viewer/src/app.js

@@ -11,7 +11,23 @@ window.addEventListener( 'load', () => {
 
 const token = 'e844747dc6f6b0b5c7d5fbd82d66de6e9529531d75'
 
-window.LoadData = async function LoadData( url ) {
+window.loadData = async function LoadData( url ) {
   url = url || document.getElementById( 'objectUrlInput' ).value
   await v.loadObject( url, token )
 }
+
+window.viewerScreenshot = function() {
+  let data = v.interactions.screenshot() // transparent png.
+
+  let pop = window.open()
+  pop.document.title = 'super screenshot'
+  pop.document.body.style.backgroundColor = 'grey'
+
+  let img = new Image()
+  img.src = data
+  pop.document.body.appendChild( img )
+}
+
+window.zoomFast = function(){
+  v.interactions.zoomExtents( 0.95, false )
+}

packages/viewer/src/assets/example.html

@@ -28,10 +28,11 @@
           <button onclick="v.interactions.zoomExtents()">Zoom Extents</button>
           <button onclick="v.interactions.toggleSectionBox()">Toggle Section Box</button>
           <button onclick="v.interactions.rotateCamera(undefined, undefined, false)">Rotate</button>
+          <button onclick="viewerScreenshot()">Screenshot</button>
         </div>
         <div class="twelve columns">
           <input id="objectUrlInput" type="text" name="objectId" placeholder="Object Url" style="width:49%" value="https://staging.speckle.dev/streams/a75ab4f10f/objects/a59617590b0bec4e9b5ee487ee75b1a7"/>
-          <button class="" onclick="LoadData()" style="width:49%">Load Object URL</button>
+          <button class="" onclick="loadData()" style="width:49%">Load Object URL</button>
         </div>
         <div class="twelve columns">
           <button onclick="v.sceneManager.removeAllObjects()">Dispose Everything</button>

packages/viewer/src/modules/InteractionHandler.js

@@ -150,6 +150,6 @@ export default class InteractionHandler {
   }
 
   screenshot() {
-    return this.viewer.renderer.domElement.toDataUrl()
+    return this.viewer.renderer.domElement.toDataURL( 'image/png' )
   }
 }

packages/viewer/src/modules/Viewer.js

@@ -26,7 +26,7 @@ export default class Viewer extends EventEmitter {
     this.camera.position.set( 1, 1, 1 )
     this.camera.updateProjectionMatrix()
 
-    this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } )
+    this.renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true, preserveDrawingBuffer: true } )
     this.renderer.setClearColor( 0xcccccc, 0 )
     this.renderer.setPixelRatio( window.devicePixelRatio )
     this.renderer.setSize( this.container.offsetWidth, this.container.offsetHeight )
@@ -44,7 +44,7 @@ export default class Viewer extends EventEmitter {
 
     CameraControls.install( { THREE: THREE } )
     this.controls = new CameraControls( this.camera, this.renderer.domElement )
-    // this.controls.maxPolarAngle = Math.PI / 2
+    this.controls.maxPolarAngle = Math.PI / 2
 
     this.composer = new EffectComposer( this.renderer )