<!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.22.0/sdv.concat.min.js"></script>
  <link rel='stylesheet' type='text/css' href='https://viewer.shapediver.com/v2/2.22.0/sdv.css'>
  
  <!-- ShapeDiver Viewer Controls and Export Modal Dialog Dependencies -->
  <!-- UIkit CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css"
    integrity="sha256-sO/kKFCHPL4rhYHDyHC2dwGlaIBttifOfQ0ZaGLAheo=" crossorigin="anonymous" />
  <!-- UIkit JS -->
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js"
    integrity="sha256-jN++RwBoYassp9qTuZDfQuptszFdL1Pm4dKZWS5KjjY=" crossorigin="anonymous"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js"
    integrity="sha256-6pktS+jePPdXx9oCn8r4hS5jR1eq0Ry7vbifYtG0LDU=" crossorigin="anonymous"></script>
  
</head>

<body>
  <!-- ShapeDiver Viewer Main Container -->
  <div id='sdv-container' class='shapediver-container-flex shapediver-container-fullsize'
    sdv-fullscreen="true">
    <!-- ShapeDiver Viewer Settings Controls Container -->
    <div id='sdv-container-settings' class='shapediver-settings-flex' style='display: none;'></div>
    <!-- ShapeDiver Viewer Viewport Container -->
    <div class='shapediver-viewport-flex'>
      <div id='sdv-container-viewport' class='shapediver-container-fullsize' style='opacity: 0;' 
           logginglevel=0 messagelogginglevel=2 showControlsInitial=true>
      </div>
      
      <!-- The loading icon will be created here -->
    </div>
    <!-- ShapeDiver Viewer Parameter Controls Container -->
    <div id='sdv-container-controls' class='shapediver-controls-flex' style='display: none;'></div>
  </div>
</body>
  
</html>
// ShapeDiver Viewer Initialisation
var initSdvApp = async function (/*event*/) {
  
  let constructorSettings = {
    showControlsInitial: true,
    showSettingsInitial: false,
  };
  window.api = new SDVApp.ParametricViewer(constructorSettings);

  await update();
  
  // now load the CommPlugin, which will load the geometry
  await api.plugins.registerCommPluginAsync({
    ticket: 'fd35ca445f6e5af4d260072ae4b95bd16c0198f55488eee7b191f78e397de1525d0a7c718dc57567f0fa09683d9cb94ad773301b9b7ef5bc645dcc843446335d935a7c23a01b7ccb911a08c29d79c09ee3f2c47a235ee301112b5c31b9e2703af660264e064e473de1f9d8e5864ed05163e3f145d772-1b025542cdd6161364a8dd3374eb6561',
    modelViewUrl: 'eu-central-1',
    runtimeId: 'CommPlugin_1'
  });
};
// there is a slight chance that loading has been completed already
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initSdvApp, false);
} else {
  initSdvApp();
}

var update = async function () {

  let settings = api.getSettings();
  settings.scene.camera.controls.orbit.restrictions.rotation.maxPolarAngle = 90;
  settings.scene.camera.controls.orbit.restrictions.zoom.minDistance = 200;
  await api.updateSettingsAsync(settings);

  // for model 'diamond-ring'
  let cubeMapImg = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1051593/d3nacS9.png';
  let cubeMap = [cubeMapImg, cubeMapImg, cubeMapImg, cubeMapImg, cubeMapImg, cubeMapImg];
  let diamondMat = {
    materialType: 'gem',
    metalness: 1.0,
    roughness: 0.0,
    colorTransferBegin: "0xffffff",
    colorTransferEnd: "0xdee4ed",
    impurityScale: 0.0,
    depth: 2,
    refractionIndex: 2.4,
    dispersion: 0.003,
    gamma: 1.3,
    contrast: 1.5,
    brightness: -0.125,
    transparency: 0.0,
    tracingTransparency: 0,
    environmenttexture: JSON.stringify(cubeMap),
  }; 

  await api.scene.updateAsync([
    {
      id: 'gem_material', content: [{
        format: 'material', data: diamondMat
      }]
    }
  ], 'CommPlugin_1');

  await api.scene.updatePersistentAsync([
    {
      id: "e55117df2dbb232b52e298ff121ee545", // big diamond
      material: 'gem_material'
    }, {
      id: "74a48869b64bf2b91502acab03c6fa27", // big side diamonds
      material: 'gem_material'
    }, {
      id: "5b9dc1881982a6a9c893d1ff7f769dec", // small side diamonds
      material: 'gem_material'
    }
  ], 'CommPlugin_1');
};
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.