Sketchfab = require(await FileAttachment("sketchfab-viewer-1.11.0.js").url())
loadSketchfab = (sceneuid, elementId) => {
const iframe = document.getElementById(elementId);
const client = new Sketchfab("1.11.0", iframe);
client.init(sceneuid, {
success: success,
error: () => console.error("Sketchfab API error"),
ui_controls: 0,
ui_infos: 0,
ui_watermark: 0,
ui_stop: 0,
preload: 1,
camera: 0,
autostart: 1,
scrollwheel: 0,
orbit_constraint_pan: 1,
});
};
loadSketchfab(uid, "api-frame");
getNodeByName = (nodemap, nodename) => {
return Object.values(nodemap).find((node) => {
if (node.type === "MatrixTransform" && node.name === nodename) {
return node;
}
});
};
// Rotate a node by a certain angle (in radians) using a specific
// easing. Easing modifies the motion and can make it look more natural.
// After the rotation is complete, a callback function is run
rotateNode = (api, instanceID, angle, callback) => {
api.rotate(
instanceID,
[angle, 1, 0, 0],
{
duration: 1.5,
easing: "easeOutBounce"
},
callback
);
};
addClickEvent = (api, instanceID) => {
let isOpen = false;
let isAnimating = false;
api.addEventListener(
"click",
function (info) {
// Determine the rotation angle based on whether the lid is open or closed
const angle = isOpen ? 0 : (angle_degrees / 180) * Math.PI;
// Do not pursue if an animation is running
if (isAnimating) return;
isAnimating = true;
// Rotate the lid
rotateNode(api, instanceID, angle, rotateCallback);
},
{ pick: "fast" }
);
// After rotating, toggle the isOpen state
function rotateCallback() {
isOpen = !isOpen
isAnimating = false;
};
};
success = (api) => {
api.start(function () {
api.addEventListener("viewerready", function () {
api.getNodeMap(function (err, nodes) {
const node = getNodeByName(nodes, "Lid_0");
addClickEvent(api, node.instanceID);
});
});
});
};
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
