21:null 22:["$","title",null,{"children":"Play with Light Using the Sketchfab Viewer API | Christophe Yamahata | Observable"}] 27:T1608,success = (api) => { api.start(function () { api.addEventListener("viewerready", function () { // Hide the annotations that would not display well on the animated model. api.hideAnnotation(5); api.hideAnnotationTooltip(5); api.hideAnnotation(6); api.hideAnnotationTooltip(6); api.hideAnnotation(7); api.hideAnnotationTooltip(7); api.getNodeMap(function (err, nodes) { console.log(nodes); const J0 = getNodeByName(nodes, "J0_10"); const J1 = getNodeByName(nodes, "J1_9"); const J2 = getNodeByName(nodes, "J2_6"); // _____________________ Lamp rotation ______________________ // // Rotation around base (J0) document .getElementById("slider_j0") .addEventListener("input", function (event) { const sliderValue = parseFloat(event.target.value); const Angle = sliderValue; const angle = degToRad(Angle); rotateNode(api, J0.instanceID, angle, 0, 1, 0); }); // Rotation around J1 document .getElementById("slider_j1") .addEventListener("input", function (event) { const sliderValue = parseFloat(event.target.value); const Angle = sliderValue; const angle = degToRad(Angle); rotateNode(api, J1.instanceID, angle, 1, 0, 0); }); // Rotation around J2 (not used) /* document .getElementById("slider_j2") .addEventListener("input", function (event) { const sliderValue = parseFloat(event.target.value); const Angle = sliderValue; const angle = degToRad(Angle); rotateNode(api, J2.instanceID, angle, 1, 0, 0); }); */ // _______________ End of: Lamp rotation ____________________ // // __________________ Spotlight rotation ____________________ // // Retrieve the current light matrix when the page loads or when needed api.getLight(1, function (err, light) { if (!err) { let initialMatrix = light.matrix; // Store the original matrix // Function to create a new matrix with updated rotations function createNewMatrix(theta0, theta1) { // Create a copy of the initial matrix let newMatrix = [...initialMatrix]; // Create rotation matrix around the Base (J0) const cosTheta0 = Math.cos(theta0); const sinTheta0 = Math.sin(theta0); const rotationMatrix_J0 = [ cosTheta0, -sinTheta0, 0, 0, sinTheta0, cosTheta0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; // Create rotation matrix around the J1 const cosTheta1 = Math.cos(theta1); const sinTheta1 = Math.sin(theta1); const rotationMatrix_J1 = [ 1, 0, 0, 0, 0, cosTheta1, -sinTheta1, 0, 0, sinTheta1, cosTheta1, 0, 0, 0, 0, 1 ]; // Multiply the initial matrix with the rotation matrices const combinedMatrix = multiplyMatrices( multiplyMatrices(newMatrix, rotationMatrix_J0), rotationMatrix_J1 ); return combinedMatrix; } // Function to multiply two 4x4 matrices function multiplyMatrices(a, b) { const result = []; for (let i = 0; i < 4; i++) { for (let j = 0; j < 4; j++) { result[i * 4 + j] = a[i * 4] * b[j] + a[i * 4 + 1] * b[j + 4] + a[i * 4 + 2] * b[j + 8] + a[i * 4 + 3] * b[j + 12]; } } return result; } // Function to update the light function updateLight() { const theta0 = parseFloat(document.getElementById("slider_j0").value) * (Math.PI / 180); // Convert degrees to radians const theta1 = parseFloat(document.getElementById("slider_j1").value) * (Math.PI / 180); // Convert degrees to radians const intensity = parseFloat(document.getElementById("slider_light").value) // Create a new matrix based on the current slider values const newMatrix = createNewMatrix(theta0, theta1); // Set the updated matrix back to the light api.setLight(1, { color: light.color, // Use existing color intensity: intensity, // Use existing intensity matrix: newMatrix // Apply the new matrix }); } // Event listeners for sliders document .getElementById("slider_j0") .addEventListener("input", updateLight); document .getElementById("slider_j1") .addEventListener("input", updateLight); document .getElementById("slider_light") .addEventListener("input", updateLight); // Initial application of rotations based on current slider values updateLight(); } }); api.setLightFeatureEnabled(true); // _______________ End of: Spotlight rotation _______________ // }); }); }); };28:[{"id":"0d35ee12d0ffdcaf36a5b2f082b8f20263b79e93940430f5274f7550e20bbcd0e162cc7a7d3457ff75724bfdc27cc02ede2a903823d54300e400bee44bcb6e83","href":"https://static.observableusercontent.com/files/0d35ee12d0ffdcaf36a5b2f082b8f20263b79e93940430f5274f7550e20bbcd0e162cc7a7d3457ff75724bfdc27cc02ede2a903823d54300e400bee44bcb6e83","name":"sketchfab-viewer-1.12.1.js","type":"application/javascript","lastModified":1749103787359.114,"size":6573}] 25:{"id":"396adca147e1fc92","slug":"play-with-light-using-the-sketchfab-viewer-api","title":"Play with Light Using the Sketchfab Viewer API","thumbnail":"ae0c43121e09352958ef79233d03003b134067060ed8e32fcd6d6355aedbac0c","access_level":"public","create_time":"$D2025-06-04T09:50:05.984Z","update_time":"$D2025-06-05T06:41:47.518Z","view_time":null,"first_public_time":"$D2025-06-04T11:57:02.425Z","has_unpublished_edits":null,"fork":{"id":"e14c5f8f0eaaadfc","slug":"sketchfab-api-example-treasure-chest","title":"Sketchfab API Example: Treasure Chest","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":537,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"0e48f0602412f50d","slug":"3d-three-js","title":"3D (three.js, Sketchfab)","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"titling":"auto","title":"Play with Light Using the Sketchfab Viewer API","cells":[{"id":0,"value":"# Play with Light Using the Sketchfab Viewer API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"The [Sketchfab Viewer API](https://sketchfab.com/developers/viewer) enables dynamic manipulation of embedded 3D models in web applications using iframe. It provides control over model properties, such as orientation, camera settings, and lighting.\n\nIn this example, a 3D lamp model is loaded from [Sketchfab](https://sketchfab.com/3d-models/lamp-notebook-play-with-light-in-viewer-api-e40fd8f2fb6744b79de1f1106fd50304). Sliders allow dynamic adjustments to the lamp’s orientation and its light spot’s position within an iframe.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"---\n*Play with the sliders to manipulate the 3D model.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"

\n J0\n (rotation around the lamp’s base)\n

\n J1\n (rotation around the lamp’s joint J1)\n

\n Light\n (intensity of the light spot)\n

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"---\n\n## References\n\n* Sketchfab resources for developers: [Sketchfab Viewer API](https://sketchfab.com/developers/viewer)\n* CodePen examples by Klaas Nienhuis:\n * [Sketchfab Livestream API basics](https://codepen.io/klaasnienhuis/pen/KKeyrZQ)\n → Example that inspired this Observable notebook\n * [Devfab Hero skull](https://codepen.io/klaasnienhuis/pen/MWzMEva) → Bonus example where a slider is used to open a skull model\n* YouTube video: [Introduction to the Sketchfab Viewer API](https://www.youtube.com/watch?v=mVQNDCwbXMM) with Klaas Nienhuis\n* **CodePen version** of this demonstration: [Playing with light with the Sketchfab Viewer API\n](https://codepen.io/Christophe-Yamahata/pen/KKjeKmG)\n* **3D model of the lamp** on Sketchfab: [Lamp + notebook](https://sketchfab.com/3d-models/lamp-notebook-play-with-light-in-viewer-api-e40fd8f2fb6744b79de1f1106fd50304)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"Sketchfab = require(await FileAttachment(\"sketchfab-viewer-1.12.1.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// Sketchfab 3D model's uid\nuid = \"e40fd8f2fb6744b79de1f1106fd50304\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"loadSketchfab(uid, \"api-frame\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"loadSketchfab = (sceneuid, elementId) => {\n const iframe = document.getElementById(elementId);\n const client = new Sketchfab(\"1.12.1\", iframe);\n\n client.init(sceneuid, {\n success: success,\n error: () => console.error(\"Sketchfab API error\"),\n ui_infos: 0,\n ui_stop: 0,\n preload: 1,\n camera: 0\n });\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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, callback) => {\n api.rotate(\n instanceID,\n [angle, RX, RY, RZ],\n {\n duration: 0.0,\n easing: \"linear\"\n },\n callback\n );\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// Convert an angle in degrees to an angle in radians. The\n// API works with radians only\ndegToRad = (deg) => (deg / 180) * Math.PI;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W28","stdlib":"1"}} 26:"$25:body"