31:Te83,success = (api) => { api.start(function () { api.addEventListener("viewerready", function () { api.getNodeMap(function (err, nodes) { // console.log(nodes); const hip = getNodeByName(nodes, "M0_16"); const thigh = getNodeByName(nodes, "M1_15"); const gear1 = getNodeByName(nodes, "gear_1_7"); const gear2 = getNodeByName(nodes, "gear_2_11"); const lever = getNodeByName(nodes, "lever_8"); const calf = getNodeByName(nodes, "Calf_3"); const MinAngle1 = -25; const MaxAngle1 = 30; const MinAngle2 = -65; const MaxAngle2 = 80; const MinAngle3 = -70; const MaxAngle3 = 35; // Retrieve the materials from the model and set opacity of the thigh document.getElementById("opacity").addEventListener("input", function (event) { const opacityValue = parseFloat(event.target.value); api.getMaterialList(function (err, materials) { const thighMaterial_1 = materials.find(material => material.name === "Thigh"); const thighMaterial_2 = materials.find(material => material.name === "thigh_protection"); thighMaterial_1.channels["Opacity"].factor = opacityValue; thighMaterial_2.channels["Opacity"].factor = opacityValue; api.setMaterial(thighMaterial_1); api.setMaterial(thighMaterial_2); }); }); // Enable/disable wireframe document.getElementById("wireframe").addEventListener("change", function (event) { const wireframeEnabled = event.target.checked; api.setWireframe(wireframeEnabled); }); // Hip rotation (Axis 1): // Action on the node "hip" affects all children objects. // Hence, this is the only node that need to be manipulated. document .getElementById("slider1") .addEventListener("input", function (event) { const sliderValue = parseFloat(event.target.value); const Angle = sliderValue * (MaxAngle1 - MinAngle1) + MinAngle1; const angle = degToRad(Angle); rotateNode(api, hip.instanceID, angle, 1, 0, 0); }); // Thigh rotation (Axis 2): // Action on the node "thigh" affects all children objects. document .getElementById("slider2") .addEventListener("input", function (event) { const sliderValue = parseFloat(event.target.value); const Angle = sliderValue * (MaxAngle2 - MinAngle2) + MinAngle2; const angle = degToRad(Angle); rotateNode(api, thigh.instanceID, angle, 0, 1, 0); }); // Calf rotation (Axis 3): // The mechanism consists of: // * 2 gears (gear 1, gear 2): The gear ratio is 2:1 // * Lever // * Calf // Workaround for GLB format limitation: // The lever is defined as a child of gear 2. // However, we need to compensate for the rotation, // as we only want to translate the lever. document .getElementById("slider3") .addEventListener("input", function (event) { const sliderValue = parseFloat(event.target.value); const Angle = sliderValue * (MaxAngle3 - MinAngle3) + MinAngle3; const angle = degToRad(Angle); rotateNode(api, lever.instanceID, -angle, 0, 1, 0); rotateNode(api, gear1.instanceID, -2 * angle, 0, 1, 0); rotateNode(api, gear2.instanceID, angle, 0, 1, 0); rotateNode(api, calf.instanceID, angle, 0, 1, 0); }); }); }); }); };32:[{"id":"fa33bf8c0e60adb5fe7adc48a737ab732b53e8e1f1feb6cc00e3b1fd36fe2149aa599002963eec9159dcad999f72135f389fc359819541b9fc2d410ec3ab7b84","href":"https://static.observableusercontent.com/files/fa33bf8c0e60adb5fe7adc48a737ab732b53e8e1f1feb6cc00e3b1fd36fe2149aa599002963eec9159dcad999f72135f389fc359819541b9fc2d410ec3ab7b84","name":"sketchfab-viewer-1.11.0.js","type":"application/javascript","lastModified":1722177290203.571,"size":6587},{"id":"2e3bf371affb664229210e70564e5d21f0ebd738b95e7265652de0000db3504da323c796ed7e669f3b0ca536aad8da9a0077f21e430615ad6b68c1381157b507","href":"https://static.observableusercontent.com/files/2e3bf371affb664229210e70564e5d21f0ebd738b95e7265652de0000db3504da323c796ed7e669f3b0ca536aad8da9a0077f21e430615ad6b68c1381157b507","name":"Go2_leg_disassembled_view.png","type":"image/png","lastModified":1722196739920.05,"size":571007},{"id":"026503d9323ed8c58ea323188361bd25019e3f7556e75fc53820ec66195096cb296e3821aaaeb362eb8b7f31a9784db37bfb0595bf29fb86f248c5a8c9ea997b","href":"https://static.observableusercontent.com/files/026503d9323ed8c58ea323188361bd25019e3f7556e75fc53820ec66195096cb296e3821aaaeb362eb8b7f31a9784db37bfb0595bf29fb86f248c5a8c9ea997b","name":"Go2_Robot_Sketchfab.PNG","type":"image/png","lastModified":1774083517859.369,"size":2935467}] 2f:{"title":"Sketchfab API Example: Go2 Robot's Leg","cells":[{"id":0,"value":"# Sketchfab API Example: Go2 Robot's Leg\n## Animate the **Unitree Go2** leg with sliders","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"[Sketchfab](https://sketchfab.com) offers [APIs](https://en.wikipedia.org/wiki/API) to embed 3D models into web apps, or build applications on top of their platform.\n\nIn the following example, based on [Klaas Nienhuis](https://codepen.io/klaasnienhuis)'s CodePen [demonstration script](https://codepen.io/klaasnienhuis/pen/zYaWLRP), a 3D model of a *robot's leg* is loaded from Sketchfab in an iframe and manipulated with sliders.\n","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"---\n*Play with the sliders to manipulate the 3D model.*","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"

\n Axis 1 (Hip) \n \n
\n Axis 2 (Thigh)\n \n
\n Axis 3 (Calf) \n \n
\n
\n Thigh opacity \n \n
\n Wireframe \n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":7,"value":"\n\n

\n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":21,"value":"---\n## References\n\n* [CodePen version](https://codepen.io/Christophe-Yamahata/full/ZEdBjjW) of this notebook\n* CodePen examples by Klaas Nienhuis:\n * [Sketchfab Livestream API basics](https://codepen.io/klaasnienhuis/pen/KKeyrZQ)\n * [Devfab Hero skull](https://codepen.io/klaasnienhuis/pen/MWzMEva) → Example that inspired this Observable notebook\n* Sketchfab resources for developers: [Sketchfab Viewer API](https://sketchfab.com/developers/viewer)\n* YouTube video: [Introduction to the Sketchfab Viewer API](https://www.youtube.com/watch?v=mVQNDCwbXMM) with Klaas Nienhuis\n* 3D model: [Unitree Go2 Robot's Leg](https://sketchfab.com/3d-models/unitree-go2-robots-leg-sketchfab-viewer-api-d84607a0dc864921826cb092364d3990)","pinned":false,"hidden":false,"mode":"md"},{"id":461,"value":"

Unscrewed view of the leg mechanism of the Unitree Go2 robot.\n
This photograph was used to prepare the 3D model shown in this notebook.

","pinned":false,"hidden":false,"mode":"html"},{"id":121,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"Sketchfab = require(await FileAttachment(\"sketchfab-viewer-1.11.0.js\").url())","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"// Sketchfab 3D model's uid\nuid = \"d84607a0dc864921826cb092364d3990\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"loadSketchfab(uid, \"api-frame\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"loadSketchfab = (sceneuid, elementId) => {\n const iframe = document.getElementById(elementId);\n const client = new Sketchfab(\"1.11.0\", iframe);\n\n client.init(sceneuid, {\n success: success,\n error: () => console.error(\"Sketchfab API error\"),\n ui_controls: 0,\n ui_infos: 0,\n ui_watermark: 0,\n ui_stop: 0,\n preload: 1,\n autostart: 1,\n orbit_constraint_pan: 1,\n });\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"getNodeByName = (nodemap, nodename) => {\n return Object.values(nodemap).find((node) => {\n if (node.type === \"MatrixTransform\" && node.name === nodename) {\n return node;\n }\n });\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"// Rotate a node by a certain angle (in radians)\nrotateNode = (api, instanceID, angle, RX, RY, RZ) => {\n api.rotate(\n instanceID,\n [angle, RX, RY, RZ],\n {\n duration: 0.0,\n easing: \"linear\"\n }\n );\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"degToRad = (deg) => (deg / 180) * Math.PI;","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}