diff --git a/javascript/MaterialXView/source/index.js b/javascript/MaterialXView/source/index.js index d11ba9691e..d46bd2350f 100644 --- a/javascript/MaterialXView/source/index.js +++ b/javascript/MaterialXView/source/index.js @@ -21,6 +21,8 @@ let turntableEnabled = false; let turntableSteps = 360; let turntableStep = 0; +let captureRequested = false; + // Get URL options. Fallback to defaults if not specified. let materialFilename = new URLSearchParams(document.location.search).get("file"); if (!materialFilename) { @@ -31,6 +33,18 @@ let viewer = Viewer.create(); init(); viewer.getEditor().updateProperties(0.9); +// Capture the current frame and save an image file. +function captureFrame() +{ + let canvas = document.getElementById('webglcanvas'); + var url = canvas.toDataURL(); + var link = document.createElement('a'); + link.setAttribute('href', url); + link.setAttribute('target', '_blank'); + link.setAttribute('download', 'screenshot.png'); + link.click(); +} + function init() { let canvas = document.getElementById('webglcanvas'); @@ -82,9 +96,15 @@ function init() orbitControls = new OrbitControls(scene.getCamera(), renderer.domElement); orbitControls.addEventListener('change', () => { viewer.getScene().setUpdateTransforms(); - }) + }) - // Load model and shaders + // Add hotkey 'f' to capture the current frame and save an image file. + // See check inside the render loop when a capture can be performed. + document.addEventListener('keydown', (event) => { + if (event.key === 'f') { + captureRequested = true; + } + }); // Initialize editor viewer.getEditor().initialize(); @@ -160,6 +180,12 @@ function animate() composer.render(); viewer.getScene().updateTransforms(); + + if (captureRequested) + { + captureFrame(); + captureRequested = false; + } } function handleKeyEvents(event)