<!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/2.17.0/sdv.concat.min.js"></script>
  <link rel='stylesheet' type='text/css' href='https://viewer.shapediver.com/v2/2.17.0/sdv.css'>
  
</head>

<body>
  <!-- ShapeDiver Viewer Main Container -->
  <!-- Set explicit dimensions for the container -->
  <div id='sdv-container' style="width:100%;height:600px;">
  </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: "20f9d15ecb236b79c4c342f2714558f571d34ae17fc3678f09a4e6742f28045119010401d66d47bd2f4c0a4a5ae92be36c560606effd0a98ec6ebdcec3975a5fd947d156338ff31e4a3c142a7eb4aa864f62d3db3938be957ab118903125b434296303731c19772d5a7fc89ae42348eba26888a80fdd-75013a6ebb275765f424fa8c2b7976a5",
    modelViewUrl: "eu-central-1",
    showControlsInitial: true,
    showSettingsInitial: false,
  };
  // See http://app.shapediver.com/api/SDVApp.ParametricViewer.html for all settings available via the constructor.
  window.api = new SDVApp.ParametricViewer(settings);
};

// 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.