25:["$","title",null,{"children":"Sketchfab API Example: Go2 Robot's Leg | Ronin's Workspace | Observable"}] 49: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); }); }); }); }); };4a:[{"id":"2e3bf371affb664229210e70564e5d21f0ebd738b95e7265652de0000db3504da323c796ed7e669f3b0ca536aad8da9a0077f21e430615ad6b68c1381157b507","href":"https://static.observableusercontent.com/files/2e3bf371affb664229210e70564e5d21f0ebd738b95e7265652de0000db3504da323c796ed7e669f3b0ca536aad8da9a0077f21e430615ad6b68c1381157b507","name":"Go2_leg_disassembled_view.png","type":"image/png","lastModified":1754556230096.764,"size":571007},{"id":"fa33bf8c0e60adb5fe7adc48a737ab732b53e8e1f1feb6cc00e3b1fd36fe2149aa599002963eec9159dcad999f72135f389fc359819541b9fc2d410ec3ab7b84","href":"https://static.observableusercontent.com/files/fa33bf8c0e60adb5fe7adc48a737ab732b53e8e1f1feb6cc00e3b1fd36fe2149aa599002963eec9159dcad999f72135f389fc359819541b9fc2d410ec3ab7b84","name":"sketchfab-viewer-1.11.0.js","type":"application/javascript","lastModified":1754556230096.764,"size":6587}] 29:{"id":"bf4b1aed5a01c96f","slug":null,"title":"Sketchfab API Example: Go2 Robot's Leg","thumbnail":"217f9f197c1ddad62294c3f7a223a611b433bb577944e0b94350db880ac37156","access_level":"public","create_time":"$D2025-08-07T08:43:50.096Z","update_time":"$D2025-08-07T08:43:50.096Z","view_time":null,"first_public_time":"$D2025-08-07T08:43:50.096Z","has_unpublished_edits":null,"fork":{"id":"c22007da01448c97","slug":"sketchfab-api-example-go2-robot-leg","title":"Sketchfab API Example: Go2 Robot's Leg","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"stars":0,"starred":false,"owner":{"type":"team","id":"30da7631bd711db0","login":"ronin-ws","name":"Ronin's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/fad82ba29824e0ce232d6e76444717d0cd30315f5b871b7b2613e897a1428f73","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":482,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a9c16f2ed303b7cb","login":"ronin","name":"Ronin","avatar_url":"https://avatars-next.observableusercontent.com/c215ee0be2b865013e0942d79ac4ca36ca917e8677114fc5cf97911268440796","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a9c16f2ed303b7cb","login":"ronin","name":"Ronin","avatar_url":"https://avatars-next.observableusercontent.com/c215ee0be2b865013e0942d79ac4ca36ca917e8677114fc5cf97911268440796","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"---\n*Play with the sliders to manipulate the 3D model.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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

\n \n

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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"Sketchfab = require(await FileAttachment(\"sketchfab-viewer-1.11.0.js\").url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// Sketchfab 3D model's uid\nuid = \"d84607a0dc864921826cb092364d3990\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"loadSketchfab(uid, \"api-frame\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"degToRad = (deg) => (deg / 180) * Math.PI;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null