<!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'>
</head>
<body>
<!-- ShapeDiver Viewer Main Container -->
<!-- Set explicit dimensions for the container -->
<div id='sdv-container' style="width:100%;height:300px;">
</div>
<!-- UI container which will be filled dynamically -->
<div id="parameters">
</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: "53af6cbde9e2308f1851ffd0895cbd7b13328cf2bddefbe8a93f2faf9949d2bee5185ee07a5de7ba0e918fed48e07386d21157c53f1665c65e66349edd421d6c3340934b4e2a7ee388422ac4e2ad0230825b7d6f01f3b44c83d62582fa329aa6607217c99968e8c4a13d1acb08083076819db788fadf-6a161aeaf69fff37bcf1ba53679be40e",
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);
let viewerInit = false;
let parameters;
// VISIBILITY_ON is triggered after each scene update. We wait for the first time it is triggered to make sure the scene and parameters are ready.
api.scene.addEventListener(api.scene.EVENTTYPE.VISIBILITY_ON, function() {
if (!viewerInit) {
var globalDiv = document.getElementById("parameters");
parameters = api.parameters.get();
parameters.data.sort(function(a, b) {
return a.order - b.order;
});
console.log(parameters.data);
for (let i = 0; i < parameters.data.length; i++) {
let paramInput = null;
let paramDiv = document.createElement("div");
let param = parameters.data[i];
let label = document.createElement("label");
label.setAttribute("for", param.id);
label.innerHTML = param.name;
if (param.type == "Int" || param.type == "Float" || param.type == "Even" || param.type == "Odd") {
paramInput = document.createElement("input");
paramInput.setAttribute("id", param.id);
paramInput.setAttribute("type", "range");
paramInput.setAttribute("min", param.min);
paramInput.setAttribute("max", param.max);
paramInput.setAttribute("value", param.value);
if (param.type == "Int") paramInput.setAttribute("step", 1);
else if (param.type == "Even" || param.type == "Odd") paramInput.setAttribute("step", 2);
else paramInput.setAttribute("step", 1 / Math.pow(10, param.decimalplaces));
paramInput.onchange = function() {
api.parameters.updateAsync({
id: param.id,
value: this.value
});
};
} else if (param.type == "Bool") {
paramInput = document.createElement("input");
paramInput.setAttribute("id", param.id);
paramInput.setAttribute("type", "checkbox");
paramInput.setAttribute("checked", param.value);
paramInput.onchange = function() {
api.parameters.updateAsync({
id: param.id,
value: this.checked
});
};
} else if (param.type == "String") {
paramInput = document.createElement("input");
paramInput.setAttribute("id", param.id);
paramInput.setAttribute("type", "text");
paramInput.setAttribute("value", param.value);
paramInput.onchange = function() {
api.parameters.updateAsync({
id: param.id,
value: this.value
});
};
} else if (param.type == "Color") {
paramInput = document.createElement("input");
paramInput.setAttribute("id", param.id);
paramInput.setAttribute("type", "color");
paramInput.setAttribute("value", param.value);
paramInput.onchange = function() {
api.parameters.updateAsync({
id: param.id,
value: this.value
});
};
} else if (param.type == "StringList") {
paramInput = document.createElement("select");
paramInput.setAttribute("id", param.id);
for (let j = 0; j < param.choices.length; j++) {
let option = document.createElement("option");
option.setAttribute("value", j);
option.setAttribute("name", param.choices[j]);
option.innerHTML = param.choices[j];
if (param.value == j) option.setAttribute("selected", "");
paramInput.appendChild(option);
}
paramInput.onchange = function() {
api.parameters.updateAsync({
id: param.id,
value: this.value
});
};
}
if (param.hidden) paramDiv.setAttribute("hidden", "");
paramDiv.appendChild(label);
paramDiv.appendChild(paramInput);
globalDiv.appendChild(paramDiv);
}
var exports = api.exports.get();
for (let i = 0; i < exports.data.length; i++) {
let exportAsset = exports.data[i];
let exportDiv = document.createElement("div");
let exportInput = document.createElement("input");
exportInput.setAttribute("id", exportAsset.id);
exportInput.setAttribute("type", "button");
exportInput.setAttribute("name", exportAsset.name);
exportInput.setAttribute("value", exportAsset.name);
exportInput.onclick = function() {
let exportId = this.id;
api.exports.requestAsync({
id: exportId
}).then(
function(response) {
console.log(response);
let link = response.data.content[0].href;
window.location = link;
}
);
};
exportDiv.appendChild(exportInput);
globalDiv.appendChild(exportDiv);
}
viewerInit = true;
}
});
};
// there is a slight chance that loading has been completed already
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initSdvApp, false);
} else {
initSdvApp();
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.