<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>ShapeDiver Viewer v2</title>
  
  <!-- ShapeDiver Viewer -->
  <script defer src="https://viewer.shapediver.com/v2/staging/sdv.concat.min.js"></script>
  <link rel='stylesheet' type='text/css' href='https://viewer.shapediver.com/v2/2.15.0/sdv.css'>
  
</head>

<body>
  <!-- ShapeDiver Viewer Main Container -->
  <!-- Set explicit dimensions for the container -->
  <div id='sdv-container' style="width:100%;height:500px;">
  </div>
  <div>
    <img id="img1" height='300' src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='>
    <img id="img2"  height='300' src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='>
    <img id="img3"  height='300' src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='>
</div>
  <div>
    <button onclick ="takeScreenshots()" type="button">Take screenshots</button>
  </div>
</body>
  
</html>

// This example is compatible with any ShapeDiver model ticket.

// ShapeDiver Viewer Initialisation
var initSdvApp = function(/*event*/) {
  // Settings can be defined here, or as attributes of the viewport container. Settings defined here take precedence.
  let _container = document.getElementById("sdv-container");
  let settings = {
    container: _container,
    ticket:
      "2fb69c90b546bc36f6e17364f4e026a16f10d1db7133fc2b5677b64f24141fae7734ca7108a3c9e7281cbd41ce01bc83a4cc07b3e3153184ffee2038a258c9149e928f5ee6773cf26328593cee24e47968e94c2a68a95d4f180a3774e43d557ad94ebc80561cc39dd5203b6d2cd57322cbe3050b9fdb-246a641cd576c26b2d837b25ef1c6bda",
    modelViewUrl: "eu-central-1",
    showControlsInitial: true,
    showSettingsInitial: false
  };

  // See https://viewer.shapediver.com/v2/2.14.0/doc/SDVApp.ParametricViewer.html for all settings available via the constructor.
  window.api = new SDVApp.ParametricViewer(settings);

  window.promiseTimeout = function(time) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(time);
      }, time);
    });
  };

  window.cameraFromIndex = function(idx) {
    var camera = api.getSettings().scene.camera.cameraTypes.perspective.default;
    if (idx == 0) {
      camera.position.x = 0;
      camera.position.y = -0.1;
      camera.position.z = 10000;
    } else if (idx == 1) {
      camera.position.x = 0;
      camera.position.y = -10000;
      camera.position.z = 0;
    } else if (idx == 2) {
      camera.position.x = 10000;
      camera.position.y = 0;
      camera.position.z = 0;
    } else if (idx == 3) {
      camera.position.x = -100;
      camera.position.y = 0;
      camera.position.z = 0;
    } else if (idx == 4) {
      camera.position.x = 0;
      camera.position.y = 100;
      camera.position.z = 0;
    } else if (idx == 5) {
      camera.position.x = 0;
      camera.position.y = -100;
      camera.position.z = 0;
    } else {
      camera = api.getSettings().scene.camera.cameraTypes.perspective.default;
    }
    camera.target.x = 0;
    camera.target.y = 0;
    return camera;
  };
  
  var transitionParameters = {
    duration: 1
}

  window.takeScreenshots = function() {
    var resList = [{}, {}, {}];

    return new Promise(function(resolve, reject) {
      api.scene.camera
        .updateAsync(cameraFromIndex(0),transitionParameters)
        .then(function(response) {
          return api.scene.camera.zoomAsync(null,transitionParameters);
        })
        .then(function(response) {
          return promiseTimeout(100);
        })
        .then(function(response) {
          resList[0].screenshot = api.scene.getScreenshot(); // first screenshot
          resList[0].customField = "Preview0"; //store in this custom field (here "Preview1")
          return promiseTimeout(100);
        })
        .then(function(response) {
          return api.scene.camera.updateAsync(cameraFromIndex(1),transitionParameters);
        })
        .then(function(response) {
          return api.scene.camera.zoomAsync(null,transitionParameters);
        })
        .then(function(response) {
          return promiseTimeout(100);
        })
        .then(function(response) {
          resList[1].screenshot = api.scene.getScreenshot(); // second screenshot
          resList[1].customField = "Preview1"; //store in this custom field (here "Preview2")
          return promiseTimeout(100);
        })
        .then(function(response) {
          return api.scene.camera.updateAsync(cameraFromIndex(2),transitionParameters);
        })
        .then(function(response) {
          return api.scene.camera.zoomAsync(null,transitionParameters);
        })
        .then(function(response) {
          return promiseTimeout(100);
        })
        .then(function(response) {
          resList[2].screenshot = api.scene.getScreenshot(); // third screenshot
          resList[2].customField = "Preview2"; //store in this custom field (here "Preview3")
          return promiseTimeout(100);
        })
        .then(function(response) {
          document.getElementById("img1").src = resList[0].screenshot;
          document.getElementById("img2").src = resList[1].screenshot;
          document.getElementById("img3").src = resList[2].screenshot;
          resolve(resList);
        });
    });
  };
};

// there is a slight chance that loading has been completed already
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initSdvApp, false);
} else {
  initSdvApp();
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.