[{"data":1,"prerenderedAt":474},["ShallowReactive",2],{"{\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/configurator-demo":3},{"data":4,"headers":451},{"story":5,"cv":433,"rels":434,"links":450},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":425,"full_slug":426,"sort_by_date":30,"position":427,"tag_list":428,"is_startpage":265,"parent_id":429,"meta_data":30,"group_id":430,"first_published_at":431,"release_id":30,"lang":376,"path":30,"alternates":432,"default_full_slug":30,"translated_slugs":30},"Configurator Demo","2026-03-24T20:33:36.512Z","2026-04-23T12:28:56.299Z","2026-04-23T12:28:56.366Z",158493968474293,"5a44ce41-1aab-4759-8902-bce8663d5df8",{"_uid":13,"body":14,"date":321,"fold":322,"intro":379,"title":6,"gallery":392,"category":409,"metadata":411,"component":415,"demo_link":416,"thumbnail":418,"github_link":420,"last_updated":422,"open_graph_image":423,"include_open_graph":63,"block_search_engines":265},"f50d366a-d67c-4a10-86a7-4b5fc5c9f54e",[15,312],{"gap":16,"_uid":17,"align":16,"count":18,"width":19,"columns":20,"component":311,"remove_padding":63},"","f6f97b29-f4c1-4242-863b-a4543a5a2bbc","column-one","width-full",[21,64,135,219,254,295],{"_uid":22,"body":23,"alignment":61,"component":62,"is_full_width":63},"8de28e62-2cac-49b9-8930-9b99335e2e43",{"type":24,"content":25},"doc",[26,38,56],{"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,54],{"text":43,"type":34},"This demo showcases how ",{"text":45,"type":34,"marks":46},"HOOPS Visualize for Web",[47],{"type":48,"attrs":49},"link",{"href":50,"uuid":51,"anchor":30,"target":52,"linktype":53},"/developers/products/hoops-visualize","b5115ad7-8d04-4a41-ae62-0680605c897d","_self","story",{"text":55,"type":34}," (formerly HOOPS Communicator) can be used to create a product configurator visualization workflow. Within this demo, you can select elements of an automotive assembly and add them to your scene through dynamic loading. Additionally, if multiple options of the part that has been added are available, you can swap the part out for a different one. Within this demo there are different predefined views, some with animations, to highlight different aspects of the assembly.",{"type":39,"attrs":57,"content":58},{"textAlign":30},[59],{"text":60,"type":34},"To operate this demo, simply hover over the views, drop down to change your viewing location and see the built-in animations. Additionally, you can hover over the trailer, engine, and steering wheel dropdowns to add more elements to the scene, or swap out a part if it already exists within the scene.","align-left","copy",true,{"_uid":65,"body":66,"alignment":61,"component":62,"is_full_width":63},"f543c157-d41b-4cc3-bfb5-8a8e65bf10d5",{"type":24,"content":67},[68,75],{"type":27,"attrs":69,"content":70},{"level":29,"textAlign":30},[71],{"text":72,"type":34,"marks":73},"How it was implemented:",[74],{"type":37},{"type":76,"content":77},"bullet_list",[78,91,102,113,124],{"type":79,"content":80},"list_item",[81],{"type":39,"attrs":82,"content":83},{"textAlign":30},[84],{"text":85,"type":34,"marks":86},"Setting up the viewers",[87],{"type":48,"attrs":88},{"href":89,"uuid":30,"anchor":30,"target":30,"linktype":90},"https://docs.techsoft3d.com/communicator/latest/tutorials/product-configurator/setting-up-the-viewers.html","url",{"type":79,"content":92},[93],{"type":39,"attrs":94,"content":95},{"textAlign":30},[96],{"text":97,"type":34,"marks":98},"Load the models",[99],{"type":48,"attrs":100},{"href":101,"uuid":30,"anchor":30,"target":30,"linktype":90},"https://docs.techsoft3d.com/communicator/latest/tutorials/product-configurator/loading-models.html",{"type":79,"content":103},[104],{"type":39,"attrs":105,"content":106},{"textAlign":30},[107],{"text":108,"type":34,"marks":109},"Adding component selection",[110],{"type":48,"attrs":111},{"href":112,"uuid":30,"anchor":30,"target":30,"linktype":90},"https://docs.techsoft3d.com/communicator/latest/tutorials/product-configurator/add-component-selection.html",{"type":79,"content":114},[115],{"type":39,"attrs":116,"content":117},{"textAlign":30},[118],{"text":119,"type":34,"marks":120},"Incorporating model relationships",[121],{"type":48,"attrs":122},{"href":123,"uuid":30,"anchor":30,"target":30,"linktype":90},"https://docs.techsoft3d.com/communicator/latest/tutorials/product-configurator/incorporating-model-relationships.html",{"type":79,"content":125},[126],{"type":39,"attrs":127,"content":128},{"textAlign":30},[129],{"text":130,"type":34,"marks":131},"Adding animations",[132],{"type":48,"attrs":133},{"href":134,"uuid":30,"anchor":30,"target":30,"linktype":90},"https://docs.techsoft3d.com/communicator/latest/prog_guide/viewing/animation.html?highlight=animation",{"_uid":136,"body":137,"alignment":61,"component":62,"is_full_width":63},"3db68134-7b3a-4873-98b3-16972e7ab12a",{"type":24,"content":138},[139,146,162],{"type":27,"attrs":140,"content":141},{"level":29,"textAlign":30},[142],{"text":143,"type":34,"marks":144},"Explore HOOPS Visualise for Web",[145],{"type":37},{"type":39,"attrs":147,"content":148},{"textAlign":30},[149,153,158],{"text":150,"type":34,"marks":151},"This demo was created using ",[152],{"type":37},{"text":45,"type":34,"marks":154},[155,157],{"type":48,"attrs":156},{"href":50,"uuid":51,"anchor":30,"target":52,"linktype":53},{"type":37},{"text":159,"type":34,"marks":160}," (formerly HOOPS Communicator).",[161],{"type":37},{"type":76,"content":163},[164,179,193,206],{"type":79,"content":165},[166],{"type":39,"attrs":167,"content":168},{"textAlign":30},[169,171,177],{"text":170,"type":34},"Reference the HOOPS Visualize for Web (formerly HOOPS Communicator) ",{"text":172,"type":34,"marks":173},"Documentation",[174],{"type":48,"attrs":175},{"href":176,"uuid":30,"anchor":30,"target":30,"linktype":90},"https://docs.techsoft3d.com/communicator/latest/",{"text":178,"type":34},".",{"type":79,"content":180},[181],{"type":39,"attrs":182,"content":183},{"textAlign":30},[184,186,192],{"text":185,"type":34},"Sign up for a free ",{"text":187,"type":34,"marks":188},"evaluation",[189],{"type":48,"attrs":190},{"href":191,"uuid":30,"anchor":30,"target":30,"linktype":90},"https://manage.techsoft3d.com/signup?product=communicator",{"text":178,"type":34},{"type":79,"content":194},[195],{"type":39,"attrs":196,"content":197},{"textAlign":30},[198,200],{"text":199,"type":34},"Jump straight into coding with the ",{"text":201,"type":34,"marks":202},"3D Sandbox",[203],{"type":48,"attrs":204},{"href":205,"uuid":30,"anchor":30,"target":30,"linktype":90},"https://3dsandbox.techsoft3d.com/",{"type":79,"content":207},[208],{"type":39,"attrs":209,"content":210},{"textAlign":30},[211,213],{"text":212,"type":34},"Join our ",{"text":214,"type":34,"marks":215},"Community Forum",[216],{"type":48,"attrs":217},{"href":218,"uuid":30,"anchor":30,"target":30,"linktype":90},"https://forum.techsoft3d.com/",{"_uid":220,"body":221,"alignment":61,"component":62,"is_full_width":63},"49bfa3fe-caaf-40b4-8123-f5361a510401",{"type":24,"content":222},[223,230,242],{"type":27,"attrs":224,"content":225},{"level":29,"textAlign":30},[226],{"text":227,"type":34,"marks":228},"Questions or Feedback?",[229],{"type":37},{"type":39,"attrs":231,"content":232},{"textAlign":30},[233,235,241],{"text":234,"type":34},"We are looking for feedback and how this toolkit can be improved to meet your needs! Please connect in our ",{"text":236,"type":34,"marks":237},"forum",[238],{"type":48,"attrs":239},{"href":218,"uuid":30,"anchor":30,"target":240,"linktype":90},"_blank",{"text":178,"type":34},{"type":39,"attrs":243,"content":244},{"textAlign":30},[245,247,253],{"text":246,"type":34},"You can also sign-up for a 60-day trial of the ",{"text":248,"type":34,"marks":249},"HOOPS Web Platform",[250],{"type":48,"attrs":251},{"href":252,"uuid":30,"anchor":30,"target":240,"linktype":90},"https://www.techsoft3d.com/products/hoops/web-platform",{"text":178,"type":34},{"_uid":255,"messages":256,"component":289,"background":290,"remove_padding":63,"is_verticalized":265},"2517b691-8590-46b2-b1a0-c989536a3b36",[257],{"_uid":258,"icon":16,"buttons":259,"content":270,"headline":277,"link_url":16,"metadata":284,"component":287,"icon_size":16,"link_label":16,"headline_heading":288},"1f7a4845-55d4-4520-b973-efe814118e45",[260],{"_uid":261,"href":16,"color":262,"label":263,"action":264,"new_tab":265,"outline":63,"alignment":16,"component":266,"text_link":265,"destination":267},"e25f6918-ec5e-43c9-9ad6-5e4bcf39b279","light","Subscribe","action-modal",false,"element-button",{"id":16,"url":268,"linktype":90,"fieldtype":269,"cached_url":268},"subscribe","multilink",{"type":24,"content":271},[272],{"type":39,"attrs":273,"content":274},{"textAlign":30},[275],{"text":276,"type":34},"We’ll notify you as soon as new projects are available.",{"type":24,"content":278},[279],{"type":39,"attrs":280,"content":281},{"textAlign":30},[282],{"text":283,"type":34},"Be the first to know about new projects",{"_uid":285,"title":16,"plugin":286,"description":16},"0fa59fa4-a396-48fd-8878-1ce90fb5c07c","meta-fields","element-callout-child","heading-h3","element-callout",{"id":291,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":292,"copyright":16,"fieldtype":293,"meta_data":294,"is_external_url":265},72383172008371,"https://a-us.storyblok.com/f/1023536/1350x901/98f768d3c7/mosiac.jpg","asset",{},{"_uid":296,"body":297,"alignment":61,"component":62,"is_full_width":63},"ed21b4a6-d00f-4e0d-a54d-08aa82d4d29d",{"type":24,"content":298},[299],{"type":39,"attrs":300,"content":301},{"textAlign":30},[302,304,310],{"text":303,"type":34},"Need to contact us? Email us at ",{"text":305,"type":34,"marks":306},"labs@techsoft3d.com",[307],{"type":48,"attrs":308},{"href":305,"uuid":30,"anchor":30,"target":52,"linktype":309},"email",{"text":178,"type":34},"columns",{"id":268,"_uid":313,"items":314,"component":320},"ca556064-0fa5-4110-8395-86e3f005ea32",[315],{"id":316,"_uid":317,"component":318,"business_unit":319},"dbdcd35d-8954-4b0d-9902-999e4cd25928","f78173e1-09c9-45b4-92d3-445b190c5ada","hubspot-form","toolkits","modal","2023-06-25 00:00",[323],{"_uid":324,"source":325,"component":378},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":326,"created_at":327,"published_at":328,"updated_at":329,"id":330,"uuid":331,"content":332,"slug":369,"full_slug":370,"sort_by_date":30,"position":371,"tag_list":372,"is_startpage":265,"parent_id":373,"meta_data":30,"group_id":374,"first_published_at":375,"release_id":30,"lang":376,"path":30,"alternates":377,"default_full_slug":30,"translated_slugs":30,"_stopResolving":63},"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":333,"items":334,"component":368},"8915070e-32eb-476d-b215-1c92ebdad15c",[335,350],{"_uid":336,"left_nav":16,"messages":337,"component":349,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[338,344],{"_uid":339,"icon":340,"link":341,"target":16,"message":342,"component":343},"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":345,"icon":346,"link":347,"target":16,"message":348,"component":343},"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":351,"menu":352,"component":367,"has_notice":63},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[353,358,361,364],{"url":354,"_uid":355,"label":356,"new_tab":265,"component":357},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","SDKs for Developers","top-menu-child",{"url":354,"_uid":359,"label":360,"new_tab":265,"component":357,"style_as_button":265},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","Apps for Businesses",{"url":354,"_uid":362,"label":363,"new_tab":265,"component":357,"style_as_button":265},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","Company",{"url":354,"_uid":365,"label":366,"new_tab":265,"component":357,"style_as_button":63},"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":380},[381],{"type":39,"attrs":382,"content":383},{"textAlign":30},[384,385,390],{"text":43,"type":34},{"text":386,"type":34,"marks":387},"HOOPS Visualize",[388],{"type":48,"attrs":389},{"href":50,"uuid":51,"anchor":30,"target":52,"linktype":53},{"text":391,"type":34}," for Web (formerly HOOPS Communicator) can be used to create a product configurator visualization workflow. ",[393,399,405],{"id":394,"alt":395,"name":16,"focus":16,"title":396,"source":16,"filename":397,"copyright":16,"fieldtype":293,"meta_data":398},158749818666057,"3D model of vehicle for configurator demo","Configurator Model","https://a-us.storyblok.com/f/1023536/4500x3000/a2b8ba9027/configurator-demo-model.jpg",{"alt":395,"title":396,"source":16,"copyright":16},{"id":400,"alt":401,"name":16,"focus":16,"title":402,"source":16,"filename":403,"copyright":16,"fieldtype":293,"meta_data":404},158750117702730,"Close up of a 3D trailer model for configurator demo","Configurator Model Close Up","https://a-us.storyblok.com/f/1023536/4500x3000/15fa29cfa4/configurator-demo-close-up.jpg",{"alt":401,"title":402,"source":16,"copyright":16},{"id":406,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":407,"copyright":16,"fieldtype":293,"meta_data":408},158750527593548,"https://a-us.storyblok.com/f/1023536/4500x3000/a67872034b/configurator-demo-model-front.jpg",{},[410],"hoopsVisualize",{"_uid":412,"title":413,"plugin":286,"description":414},"c466d7c7-e531-448e-9ccc-1195cbd0aa38","Configurator Demo | Tech Soft 3D Labs","This demo showcases how HOOPS Visualize for Web (formerly HOOPS Communicator) can be used to create a product configurator visualization workflow. ","lab",{"id":16,"url":417,"linktype":90,"fieldtype":269,"cached_url":417},"https://configurator-docker.techsoft3d.com/",{"id":394,"alt":395,"name":16,"focus":16,"title":396,"source":16,"filename":397,"copyright":16,"fieldtype":293,"meta_data":419,"is_external_url":265},{"alt":395,"title":396,"source":16,"copyright":16},{"id":16,"url":421,"linktype":90,"fieldtype":269,"cached_url":421},"https://github.com/techsoft3d/configurator-docker/","Sunday, June 25, 2023",{"id":394,"alt":395,"name":16,"focus":16,"title":396,"source":16,"filename":397,"copyright":16,"fieldtype":293,"meta_data":424,"is_external_url":265},{"alt":395,"title":396,"source":16,"copyright":16},"configurator-demo","developers/labs/configurator-demo",-140,[],99359039112762,"994da7ba-6801-4c31-bd3d-95d5270d377d","2026-04-03T18:44:13.707Z",[],1776956007,[435],{"name":326,"created_at":327,"published_at":328,"updated_at":329,"id":330,"uuid":331,"content":436,"slug":369,"full_slug":370,"sort_by_date":30,"position":371,"tag_list":448,"is_startpage":265,"parent_id":373,"meta_data":30,"group_id":374,"first_published_at":375,"release_id":30,"lang":376,"path":30,"alternates":449,"default_full_slug":30,"translated_slugs":30},{"_uid":333,"items":437,"component":368},[438,442],{"_uid":336,"left_nav":16,"messages":439,"component":349,"right_nav":16},[440,441],{"_uid":339,"icon":340,"link":341,"target":16,"message":342,"component":343},{"_uid":345,"icon":346,"link":347,"target":16,"message":348,"component":343},{"_uid":351,"menu":443,"component":367,"has_notice":63},[444,445,446,447],{"url":354,"_uid":355,"label":356,"new_tab":265,"component":357},{"url":354,"_uid":359,"label":360,"new_tab":265,"component":357,"style_as_button":265},{"url":354,"_uid":362,"label":363,"new_tab":265,"component":357,"style_as_button":265},{"url":354,"_uid":365,"label":366,"new_tab":265,"component":357,"style_as_button":63},[],[],[],{"cache-control":452,"connection":453,"content-encoding":454,"content-type":455,"date":456,"etag":457,"referrer-policy":458,"sb-be-version":459,"server":460,"strict-transport-security":461,"transfer-encoding":462,"vary":463,"via":464,"x-amz-cf-id":465,"x-amz-cf-pop":466,"x-cache":467,"x-content-type-options":468,"x-frame-options":469,"x-permitted-cross-domain-policies":470,"x-request-id":471,"x-runtime":472,"x-xss-protection":473},"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:02 GMT","W/\"ec69cbdd2b81d922ef670119d2a23e26\"","strict-origin-when-cross-origin","5.764.0","nginx/1.29.1","max-age=31536000","chunked","Origin,Accept-Encoding, Origin","1.1 9c55f18c68e82556d37b177f8dba94da.cloudfront.net (CloudFront)","BazTJXeNFSfizNbpvj8Un0xgLLOxGAdQwnzxZm8UH97xQgQ8Bj1Mlw==","CMH68-P3","Miss from cloudfront","nosniff","SAMEORIGIN","none","9924c7e2-2a29-4a96-87e0-608f7db948df","0.023698","0",1776956042214]