<div style="width: 100%; height: 100%; position: absolute; left: 0%; top: 0%">
<canvas id="canvas"></canvas>
<button id="buttonClick" style=" position:absolute;float: left;top: 0;" onClick="openDoors()">Open doors</button>
</div>
(async () => {
const viewer = await SDV.api.createViewer({
canvas: document.getElementById("canvas"),
id: "myViewer"
});
const session = await SDV.api.createSession({
ticket:
"9fcd8249550469452ffada9595b141d60e157293aa2700fd11ece7c04834e5fa22b8f1f49417c87735c11546c38733d5747d58e041a25506b83359168d22b2407caba09516bfd258d8d06695094e71b82dc7f5a87b4f3a67092afdabece4213dc10f66053f756c-c83e247269761d927d2a0c73a88fd8aa",
modelViewUrl: "https://sdeuc1.eu-central-1.shapediver.com",
id: "mySession"
});
window.viewer = viewer;
window.session = session;
})();
function openDoors() {
//doorOutput is geometry doors
const doorOutput = session
.getOutputByName("puertas")
.find((o) => o.material !== undefined);
const animationData = session.getOutputByName("woodDoors_animationData")[0]
.content[0].data;
// read out pivot 0 and invert it
const pivot0 = [
animationData[0].pivot.x,
animationData[0].pivot.y,
animationData[0].pivot.z
];
const pivot0Inverted = [
-animationData[0].pivot.x,
-animationData[0].pivot.y,
-animationData[0].pivot.z
];
// read out pivot 1 and invert it
const pivot1 = [
animationData[1].pivot.x,
animationData[1].pivot.y,
animationData[1].pivot.z
];
const pivot1Inverted = [
-animationData[1].pivot.x,
-animationData[1].pivot.y,
-animationData[1].pivot.z
];
// create quaternion 0
const q0 = glMatrix.quat.setAxisAngle(
glMatrix.quat.create(),
glMatrix.vec3.fromValues(0, 0, 1),
-Math.PI / 2
);
// create quaternion 1
const q1 = glMatrix.quat.setAxisAngle(
glMatrix.quat.create(),
glMatrix.vec3.fromValues(0, 0, 1),
Math.PI / 2
);
const tracks0 = [
{
times: [0, 4],
node: doorOutput.node.children[0],
values: [...pivot0, ...pivot0],
path: "translation",
interpolation: "linear"
},
{
times: [0, 2, 4],
node: doorOutput.node.children[0],
values: [0, 0, 0, 1, q0[0], q0[1], q0[2], q0[3], 0, 0, 0, 1],
path: "rotation",
interpolation: "linear"
},
{
times: [0, 4],
node: doorOutput.node.children[0].children[0],
values: [...pivot0Inverted, ...pivot0Inverted],
path: "translation",
interpolation: "linear"
}
];
const tracks1 = [
{
times: [0, 4],
node: doorOutput.node.children[1],
values: [...pivot1, ...pivot1],
path: "translation",
interpolation: "linear"
},
{
times: [0, 2, 4],
node: doorOutput.node.children[1],
values: [0, 0, 0, 1, q1[0], q1[1], q1[2], q1[3], 0, 0, 0, 1],
path: "rotation",
interpolation: "linear"
},
{
times: [0, 4],
node: doorOutput.node.children[1].children[0],
values: [...pivot1Inverted, ...pivot1Inverted],
path: "translation",
interpolation: "linear"
}
];
const data = new SDV.AnimationData(
"myAnimation",
tracks0.concat(tracks1),
0,
4
);
data.reset = false;
data.repeat = false;
doorOutput.node.data.push(data);
data.startAnimation();
viewer.update();
}
This Pen doesn't use any external CSS resources.