2c:null 2d:["$","title",null,{"children":"Sketchfab API Example: Treasure Chest | Christophe Yamahata | Observable"}] 32:[{"id":"fa33bf8c0e60adb5fe7adc48a737ab732b53e8e1f1feb6cc00e3b1fd36fe2149aa599002963eec9159dcad999f72135f389fc359819541b9fc2d410ec3ab7b84","href":"https://static.observableusercontent.com/files/fa33bf8c0e60adb5fe7adc48a737ab732b53e8e1f1feb6cc00e3b1fd36fe2149aa599002963eec9159dcad999f72135f389fc359819541b9fc2d410ec3ab7b84","name":"sketchfab-viewer-1.11.0.js","type":"application/javascript","lastModified":1721827979842.51,"size":6587},{"id":"e735af258b94f2a5af46a46bfd63a9f241df83198144d22628637b83471b482f55b3abc4b70f931a8e5f530c4d7fcf223056c8bec9c367869d333f7818f657ae","href":"https://static.observableusercontent.com/files/e735af258b94f2a5af46a46bfd63a9f241df83198144d22628637b83471b482f55b3abc4b70f931a8e5f530c4d7fcf223056c8bec9c367869d333f7818f657ae","name":"Blender_Screen_capture_-_Treasure_chest.jpg","type":"image/jpeg","lastModified":1721854102083.769,"size":41542}] 30:{"id":"e14c5f8f0eaaadfc","slug":"sketchfab-api-example-treasure-chest","title":"Sketchfab API Example: Treasure Chest","thumbnail":"74cc22bbf863bbf8a66be9861a5e058eb720d7f48a4b0f64a43b2915b49f9974","access_level":"public","create_time":"$D2024-07-24T13:23:40.462Z","update_time":"$D2024-07-28T20:01:31.988Z","view_time":null,"first_public_time":"$D2024-07-24T15:24:01.892Z","has_unpublished_edits":null,"fork":false,"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":317,"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"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"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":"Sketchfab API Example: Treasure Chest","cells":[{"id":0,"value":"# Sketchfab API Example: Treasure Chest\n## Find an object and rotate it upon mouse click event","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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/KKeyrZQ), a 3D model of a *treasure chest* is loaded from Sketchfab in an iframe. A mouse click event is used to open and close the chest. The object to be manipulated is identified by the node name \\`Lid_0\\`.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"\n\n

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"## 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* 3D model: [Treasure Chest](https://sketchfab.com/3d-models/treasure-chest-2161ffd41a074c3e8c3d78783b2f2902)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"

Screen capture of the model visualized in Blender.\n
The *Empty object* (dummy node) marks the origin and axis of rotation for the chest lid.\n
[ Source: FBX file\n available on Sketchfab, 3D model by Harley Torrisi ]\n

","pinned":false,"hidden":false,"mode":"html","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":14,"value":"// Sketchfab 3D model's uid\nuid = \"2161ffd41a074c3e8c3d78783b2f2902\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"angle_degrees = 120","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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","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 camera: 0,\n autostart: 1,\n scrollwheel: 0,\n orbit_constraint_pan: 1,\n });\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// Rotate a node by a certain angle (in radians) using a specific\n// easing. Easing modifies the motion and can make it look more natural.\n// After the rotation is complete, a callback function is run\nrotateNode = (api, instanceID, angle, callback) => {\n api.rotate(\n instanceID,\n [angle, 1, 0, 0],\n {\n duration: 1.5,\n easing: \"easeOutBounce\"\n },\n callback\n );\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"addClickEvent = (api, instanceID) => {\n let isOpen = false;\n let isAnimating = false;\n api.addEventListener(\n \"click\",\n function (info) {\n \n // Determine the rotation angle based on whether the lid is open or closed\n const angle = isOpen ? 0 : (angle_degrees / 180) * Math.PI;\n\n // Do not pursue if an animation is running\n if (isAnimating) return;\n\n isAnimating = true;\n // Rotate the lid\n rotateNode(api, instanceID, angle, rotateCallback);\n },\n { pick: \"fast\" }\n );\n\n // After rotating, toggle the isOpen state\n function rotateCallback() {\n isOpen = !isOpen\n isAnimating = false;\n };\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"success = (api) => {\n api.start(function () {\n api.addEventListener(\"viewerready\", function () { \n api.getNodeMap(function (err, nodes) {\n const node = getNodeByName(nodes, \"Lid_0\");\n addClickEvent(api, node.instanceID);\n });\n });\n });\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"