[{"data":1,"prerenderedAt":344},["ShallowReactive",2],{"{\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/kinematics-toolkit-demo":3},{"data":4,"headers":321},{"story":5,"cv":303,"rels":304,"links":320},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":295,"full_slug":296,"sort_by_date":30,"position":297,"tag_list":298,"is_startpage":144,"parent_id":299,"meta_data":30,"group_id":300,"first_published_at":301,"release_id":30,"lang":255,"path":30,"alternates":302,"default_full_slug":30,"translated_slugs":30},"Kinematics Toolkit Demo","2026-03-31T09:43:05.400Z","2026-04-23T12:28:57.358Z","2026-04-23T12:28:57.417Z",160811357843863,"5ba787a2-d685-4b13-86fe-49902e985996",{"_uid":13,"body":14,"date":200,"fold":201,"intro":258,"title":6,"gallery":275,"category":276,"metadata":278,"component":282,"demo_link":283,"thumbnail":285,"github_link":291,"last_updated":292,"open_graph_image":293,"include_open_graph":57,"block_search_engines":144},"f50d366a-d67c-4a10-86a7-4b5fc5c9f54e",[15,191],{"gap":16,"_uid":17,"align":16,"count":18,"width":19,"columns":20,"component":190,"remove_padding":57},"","f6f97b29-f4c1-4242-863b-a4543a5a2bbc","column-one","width-full",[21,58,69,73,97,133,174],{"_uid":22,"body":23,"alignment":55,"component":56,"is_full_width":57},"8de28e62-2cac-49b9-8930-9b99335e2e43",{"type":24,"content":25},"doc",[26,38],{"type":27,"attrs":28,"content":31},"heading",{"level":29,"textAlign":30},2,null,[32],{"text":33,"type":34,"marks":35},"Overview","text",[36],{"type":37},"bold",{"type":39,"attrs":40,"content":41},"paragraph",{"textAlign":30},[42,44,53],{"text":43,"type":34},"The classes found in the ",{"text":45,"type":34,"marks":46},"Kinematics Toolkit",[47],{"type":48,"attrs":49},"link",{"href":50,"uuid":30,"anchor":30,"target":51,"linktype":52},"https://github.com/techsoft3d/KinematicsToolkit","_blank","url",{"text":54,"type":34}," make it easy to add kinematics-based animations to CAD Models. In a typical CAD model the product structure is often flat or unrelated to the kinematics/joint relationships of the assembly which is why the Kinematics Manager allows the user to define its own component hierachy independent of the CAD hierachy. Based on this relationship graph it is then straightforward to animate a specific component by setting a single value.","align-left","copy",true,{"_uid":59,"body":60,"alignment":55,"component":56,"is_full_width":57},"f543c157-d41b-4cc3-bfb5-8a8e65bf10d5",{"type":24,"content":61},[62],{"type":27,"attrs":63,"content":64},{"level":29,"textAlign":30},[65],{"text":66,"type":34,"marks":67},"Demo Walkthrough",[68],{"type":37},{"_uid":70,"code":71,"component":72},"6d1ac756-634d-401a-bc7c-4bf015dd38b7","\u003Ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/tFioR2YddAE?si=GvKZkP7WERQkRj5q\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen>\u003C/iframe>","code",{"_uid":74,"body":75,"alignment":55,"component":56,"is_full_width":57},"da9fc8c4-ddde-4ed9-b18b-b4fe3185847c",{"type":24,"content":76},[77,82,87,92],{"type":39,"attrs":78,"content":79},{"textAlign":30},[80],{"text":81,"type":34},"In addition to this basic functionality, the Kinematics Manager also allows defining indirect components driven by other components based on their mathematical relationships. For example, a mapped component will move or rotate in response to the movement or rotation of another component. Other components allow for the creation of hinges, pistons and other more complex mechanical systems. It is also possible to define your own component behaviours. In addition, the Kinematics Toolkit provides a simple Inverse Kinematics solver based on the gradient descent method.",{"type":39,"attrs":83,"content":84},{"textAlign":30},[85],{"text":86,"type":34},"Once a Kinematics Hierachy is defined, it can be easily exported to a JSON object and its template can then be applied to individual instances of a CAD model that exist in the scene, each driven by its own kinematics state (e.g. a number of IoT-enabled devices in a building).",{"type":39,"attrs":88,"content":89},{"textAlign":30},[90],{"text":91,"type":34},"The Kinematics Manager also comes with its own animation system (powered by anime.js), which makes it easy to define simple animations (like pressing a button or starting up a fan) and combine those into more complex animation groups.",{"type":39,"attrs":93,"content":94},{"textAlign":30},[95],{"text":96,"type":34},"In addition to the core Kinematics Toolkit classes, this repo contains an experimental Editor Environment for interactively creating Kinematics Hierarchies, setting up animations and exporting those to JSON.",{"_uid":98,"body":99,"alignment":55,"component":56,"is_full_width":57},"49bfa3fe-caaf-40b4-8123-f5361a510401",{"type":24,"content":100},[101,108,121],{"type":27,"attrs":102,"content":103},{"level":29,"textAlign":30},[104],{"text":105,"type":34,"marks":106},"Questions or Feedback?",[107],{"type":37},{"type":39,"attrs":109,"content":110},{"textAlign":30},[111,113,119],{"text":112,"type":34},"We are looking for feedback and how this toolkit can be improved to meet your needs! Please connect in our ",{"text":114,"type":34,"marks":115},"forum",[116],{"type":48,"attrs":117},{"href":118,"uuid":30,"anchor":30,"target":51,"linktype":52},"https://forum.techsoft3d.com/",{"text":120,"type":34},".",{"type":39,"attrs":122,"content":123},{"textAlign":30},[124,126],{"text":125,"type":34},"You can also sign-up for a 60-day trial of ",{"text":127,"type":34,"marks":128},"HOOPS Visualize. ",[129],{"type":48,"attrs":130},{"href":131,"uuid":30,"anchor":30,"target":132,"linktype":52},"https://developer.techsoft3d.com/hoops/visualize","_self",{"_uid":134,"messages":135,"component":168,"background":169,"remove_padding":57,"is_verticalized":144},"2517b691-8590-46b2-b1a0-c989536a3b36",[136],{"_uid":137,"icon":16,"buttons":138,"content":149,"headline":156,"link_url":16,"metadata":163,"component":166,"icon_size":16,"link_label":16,"headline_heading":167},"1f7a4845-55d4-4520-b973-efe814118e45",[139],{"_uid":140,"href":16,"color":141,"label":142,"action":143,"new_tab":144,"outline":57,"alignment":16,"component":145,"text_link":144,"destination":146},"e25f6918-ec5e-43c9-9ad6-5e4bcf39b279","light","Subscribe","action-modal",false,"element-button",{"id":16,"url":147,"linktype":52,"fieldtype":148,"cached_url":147},"subscribe","multilink",{"type":24,"content":150},[151],{"type":39,"attrs":152,"content":153},{"textAlign":30},[154],{"text":155,"type":34},"We’ll notify you as soon as new projects are available.",{"type":24,"content":157},[158],{"type":39,"attrs":159,"content":160},{"textAlign":30},[161],{"text":162,"type":34},"Be the first to know about new projects",{"_uid":164,"title":16,"plugin":165,"description":16},"0fa59fa4-a396-48fd-8878-1ce90fb5c07c","meta-fields","element-callout-child","heading-h3","element-callout",{"id":170,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":171,"copyright":16,"fieldtype":172,"meta_data":173,"is_external_url":144},72383172008371,"https://a-us.storyblok.com/f/1023536/1350x901/98f768d3c7/mosiac.jpg","asset",{},{"_uid":175,"body":176,"alignment":55,"component":56,"is_full_width":57},"ed21b4a6-d00f-4e0d-a54d-08aa82d4d29d",{"type":24,"content":177},[178],{"type":39,"attrs":179,"content":180},{"textAlign":30},[181,183,189],{"text":182,"type":34},"Need to contact us? Email us at ",{"text":184,"type":34,"marks":185},"labs@techsoft3d.com",[186],{"type":48,"attrs":187},{"href":184,"uuid":30,"anchor":30,"target":132,"linktype":188},"email",{"text":120,"type":34},"columns",{"id":147,"_uid":192,"items":193,"component":199},"ca556064-0fa5-4110-8395-86e3f005ea32",[194],{"id":195,"_uid":196,"component":197,"business_unit":198},"dbdcd35d-8954-4b0d-9902-999e4cd25928","f78173e1-09c9-45b4-92d3-445b190c5ada","hubspot-form","toolkits","modal","2022-05-09 00:00",[202],{"_uid":203,"source":204,"component":257},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":205,"created_at":206,"published_at":207,"updated_at":208,"id":209,"uuid":210,"content":211,"slug":248,"full_slug":249,"sort_by_date":30,"position":250,"tag_list":251,"is_startpage":144,"parent_id":252,"meta_data":30,"group_id":253,"first_published_at":254,"release_id":30,"lang":255,"path":30,"alternates":256,"default_full_slug":30,"translated_slugs":30,"_stopResolving":57},"Main Navigation","2025-04-09T14:04:01.876Z","2026-03-10T15:15:52.184Z","2026-04-14T21:06:12.239Z",27565407,"c5f4a23f-ca2c-41d7-946b-6822d34565a0",{"_uid":212,"items":213,"component":247},"8915070e-32eb-476d-b215-1c92ebdad15c",[214,229],{"_uid":215,"left_nav":16,"messages":216,"component":228,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[217,223],{"_uid":218,"icon":219,"link":220,"target":16,"message":221,"component":222},"87585227-383a-48e2-a5e5-1541d3b4b65a","tdesign:user-talk-1","/contact","Have questions about our SDKs or enterprise applications? Talk to a Tech Soft 3D expert","element-notice-child",{"_uid":224,"icon":225,"link":226,"target":16,"message":227,"component":222},"45ffc4c7-d6cf-4d3c-9606-ec4154852aef","hugeicons:artificial-intelligence-04","/developers/products/hoops-ai","Check out our newest SDK, HOOPS AI, a framework for preparing CAD data for ML workflows","element-notice",{"_uid":230,"menu":231,"component":246,"has_notice":57},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[232,237,240,243],{"url":233,"_uid":234,"label":235,"new_tab":144,"component":236},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","SDKs for Developers","top-menu-child",{"url":233,"_uid":238,"label":239,"new_tab":144,"component":236,"style_as_button":144},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","Apps for Businesses",{"url":233,"_uid":241,"label":242,"new_tab":144,"component":236,"style_as_button":144},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","Company",{"url":233,"_uid":244,"label":245,"new_tab":144,"component":236,"style_as_button":57},"f2040cd1-8c5b-4dcf-8ee1-5b56049d0fe2","Support","top","global","main-navigation","global/main-navigation",-30,[],27501948,"998e76b0-7b0e-4635-8abf-c9db0f0bf29c","2025-04-09T15:16:40.189Z","default",[],"reference",{"type":24,"content":259},[260],{"type":39,"attrs":261,"content":262},{"textAlign":30},[263,265,273],{"text":264,"type":34},"This Kinematics Toolkit is built with ",{"text":266,"type":34,"marks":267},"HOOPS Visualize",[268],{"type":48,"attrs":269},{"href":270,"uuid":271,"anchor":30,"target":132,"linktype":272},"/developers/products/hoops-visualize","b5115ad7-8d04-4a41-ae62-0680605c897d","story",{"text":274,"type":34}," for Web and features a set of classes to add kinematics-based animations to CAD Models.",[],[277],"hoopsVisualize",{"_uid":279,"title":280,"plugin":165,"description":281},"dfdf2d80-e556-4662-9190-d6faab632105","Kinematics Toolkit | Tech Soft 3D Labs","A set of classes to add kinematics-based animations to CAD Models","lab",{"id":16,"url":284,"linktype":52,"fieldtype":148,"cached_url":284},"https://3dsandbox.techsoft3d.com/?snippet=2m1NQ7i09KiyT4PB9wLjKbv3",{"id":286,"alt":287,"name":16,"focus":16,"title":288,"source":16,"filename":289,"copyright":16,"fieldtype":172,"meta_data":290,"is_external_url":144},160812805756789,"3D CAD model with kinematics-based animations","Kinematics 3D Model","https://a-us.storyblok.com/f/1023536/1920x1080/d2576d41b7/kinematics-toolkit-demo.jpg",{"alt":287,"title":288,"source":16,"copyright":16},{"id":16,"url":50,"linktype":52,"fieldtype":148,"cached_url":50},"Monday, May 9, 2022",{"id":286,"alt":287,"name":16,"focus":16,"title":288,"source":16,"filename":289,"copyright":16,"fieldtype":172,"meta_data":294,"is_external_url":144},{"alt":287,"title":288,"source":16,"copyright":16},"kinematics-toolkit-demo","developers/labs/kinematics-toolkit-demo",-80,[],99359039112762,"eee38a1e-8a34-4e5f-93bc-c1089e620283","2026-04-03T18:44:15.198Z",[],1776956007,[305],{"name":205,"created_at":206,"published_at":207,"updated_at":208,"id":209,"uuid":210,"content":306,"slug":248,"full_slug":249,"sort_by_date":30,"position":250,"tag_list":318,"is_startpage":144,"parent_id":252,"meta_data":30,"group_id":253,"first_published_at":254,"release_id":30,"lang":255,"path":30,"alternates":319,"default_full_slug":30,"translated_slugs":30},{"_uid":212,"items":307,"component":247},[308,312],{"_uid":215,"left_nav":16,"messages":309,"component":228,"right_nav":16},[310,311],{"_uid":218,"icon":219,"link":220,"target":16,"message":221,"component":222},{"_uid":224,"icon":225,"link":226,"target":16,"message":227,"component":222},{"_uid":230,"menu":313,"component":246,"has_notice":57},[314,315,316,317],{"url":233,"_uid":234,"label":235,"new_tab":144,"component":236},{"url":233,"_uid":238,"label":239,"new_tab":144,"component":236,"style_as_button":144},{"url":233,"_uid":241,"label":242,"new_tab":144,"component":236,"style_as_button":144},{"url":233,"_uid":244,"label":245,"new_tab":144,"component":236,"style_as_button":57},[],[],[],{"cache-control":322,"connection":323,"content-encoding":324,"content-type":325,"date":326,"etag":327,"referrer-policy":328,"sb-be-version":329,"server":330,"strict-transport-security":331,"transfer-encoding":332,"vary":333,"via":334,"x-amz-cf-id":335,"x-amz-cf-pop":336,"x-cache":337,"x-content-type-options":338,"x-frame-options":339,"x-permitted-cross-domain-policies":340,"x-request-id":341,"x-runtime":342,"x-xss-protection":343},"max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","gzip","application/json; charset=utf-8","Thu, 23 Apr 2026 14:54:03 GMT","W/\"a7c85b5e7ce04f0b3b6b47915f3f5cfe\"","strict-origin-when-cross-origin","5.764.0","nginx/1.29.1","max-age=31536000","chunked","Origin,Accept-Encoding, Origin","1.1 126499baf467343ce75c3d087c3d3500.cloudfront.net (CloudFront)","g6Op6kAHsG_KnnkWuMMOFNADoq7cDUqgiy-CSsFGcKN2DYMB0ZDVqw==","CMH68-P3","Miss from cloudfront","nosniff","SAMEORIGIN","none","f309a558-2236-4386-b85c-c7cb9a505389","0.036585","0",1776956043134]