[{"data":1,"prerenderedAt":485},["ShallowReactive",2],{"{\"language\":\"zh\",\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/product-configurator-demo":3},{"data":4,"headers":462},{"story":5,"cv":444,"rels":445,"links":461},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":437,"full_slug":438,"sort_by_date":33,"position":439,"tag_list":440,"is_startpage":281,"parent_id":441,"meta_data":33,"group_id":442,"first_published_at":8,"release_id":33,"lang":392,"path":33,"alternates":443,"default_full_slug":33,"translated_slugs":33},"Product Configurator Demo","2026-03-27T15:09:47.708Z","2026-04-03T18:44:11.947Z","2026-04-03T18:44:11.968Z",159476071304740,"cd9ac704-e4d7-481d-acff-57ec9ad12356",{"_uid":13,"body":14,"date":337,"fold":338,"intro":395,"title":6,"gallery":408,"category":421,"metadata":423,"component":427,"demo_link":428,"thumbnail":430,"github_link":432,"last_updated":434,"open_graph_image":435,"include_open_graph":69,"block_search_engines":281},"f50d366a-d67c-4a10-86a7-4b5fc5c9f54e",[15,328],{"gap":16,"_uid":17,"align":16,"count":18,"width":19,"columns":20,"component":327,"remove_padding":69},"","f6f97b29-f4c1-4242-863b-a4543a5a2bbc","column-one","width-full",[21,24,70,81,84,154,236,270,311],{"_uid":22,"code":16,"component":23},"5a7eb982-8a51-4f0e-be2e-7e1cd9804968","code",{"_uid":25,"body":26,"alignment":67,"component":68,"is_full_width":69},"8de28e62-2cac-49b9-8930-9b99335e2e43",{"type":27,"content":28},"doc",[29,41,47,52],{"type":30,"attrs":31,"content":34},"heading",{"level":32,"textAlign":33},2,null,[35],{"text":36,"type":37,"marks":38},"Overview","text",[39],{"type":40},"bold",{"type":42,"attrs":43,"content":44},"paragraph",{"textAlign":33},[45],{"text":46,"type":37},"Within this demo, you can select different elements of a bicycle assembly and add them to your scene. If multiple options of the part that has been added are available, you can swap the part out for a different one.",{"type":42,"attrs":48,"content":49},{"textAlign":33},[50],{"text":51,"type":37},"There is an additional web viewer in this demo, allowing you to see a preview of the component before adding it to the assembly.",{"type":42,"attrs":53,"content":54},{"textAlign":33},[55,57,65],{"text":56,"type":37},"This demo comes with a full ",{"text":58,"type":37,"marks":59},"step-by-step tutorial",[60],{"type":61,"attrs":62},"link",{"href":63,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://docs.techsoft3d.com/hoops/visualize-web/tutorials/product-configurator/intro.html?redirect=true","url",{"text":66,"type":37}," that will show you how to implement this project yourself found.","align-left","copy",true,{"_uid":71,"body":72,"alignment":67,"component":68,"is_full_width":69},"f543c157-d41b-4cc3-bfb5-8a8e65bf10d5",{"type":27,"content":73},[74],{"type":30,"attrs":75,"content":76},{"level":32,"textAlign":33},[77],{"text":78,"type":37,"marks":79},"Demo Walkthrough Video",[80],{"type":40},{"_uid":82,"code":83,"component":23},"75d2d6cc-fb66-4a6b-9f27-2a11781e7ec8","\u003Ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/7ELTBR7pG1U?si=JSvCtcquXPWxkK_4\" 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>",{"_uid":85,"body":86,"alignment":67,"component":68,"is_full_width":69},"de567d9f-5e33-4bf8-a22f-7197ecac474f",{"type":27,"content":87},[88,95],{"type":30,"attrs":89,"content":90},{"level":32,"textAlign":33},[91],{"text":92,"type":37,"marks":93},"How It Was Implemented",[94],{"type":40},{"type":96,"content":97},"bullet_list",[98,110,121,132,143],{"type":99,"content":100},"list_item",[101],{"type":42,"attrs":102,"content":103},{"textAlign":33},[104],{"text":105,"type":37,"marks":106},"Setting up the viewers",[107],{"type":61,"attrs":108},{"href":109,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://docs.techsoft3d.com/communicator/latest/tutorials/product-configurator/setting-up-the-viewers.html",{"type":99,"content":111},[112],{"type":42,"attrs":113,"content":114},{"textAlign":33},[115],{"text":116,"type":37,"marks":117},"Load the models",[118],{"type":61,"attrs":119},{"href":120,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://docs.techsoft3d.com/communicator/latest/tutorials/product-configurator/loading-models.html",{"type":99,"content":122},[123],{"type":42,"attrs":124,"content":125},{"textAlign":33},[126],{"text":127,"type":37,"marks":128},"Adding component selection",[129],{"type":61,"attrs":130},{"href":131,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://docs.techsoft3d.com/communicator/latest/tutorials/product-configurator/add-component-selection.html",{"type":99,"content":133},[134],{"type":42,"attrs":135,"content":136},{"textAlign":33},[137],{"text":138,"type":37,"marks":139},"Incorporating model relationships",[140],{"type":61,"attrs":141},{"href":142,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://docs.techsoft3d.com/communicator/latest/tutorials/product-configurator/incorporating-model-relationships.html",{"type":99,"content":144},[145],{"type":42,"attrs":146,"content":147},{"textAlign":33},[148],{"text":149,"type":37,"marks":150},"Clearing the build",[151],{"type":61,"attrs":152},{"href":153,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://docs.techsoft3d.com/communicator/latest/tutorials/product-configurator/clearing-the-build.html",{"_uid":155,"body":156,"alignment":67,"component":68,"is_full_width":69},"3db68134-7b3a-4873-98b3-16972e7ab12a",{"type":27,"content":157},[158,179],{"type":42,"attrs":159,"content":160},{"textAlign":33},[161,165,175],{"text":162,"type":37,"marks":163},"This demo was created using ",[164],{"type":40},{"text":166,"type":37,"marks":167},"HOOPS Visualize for Web",[168,174],{"type":61,"attrs":169},{"href":170,"uuid":171,"anchor":33,"target":172,"linktype":173},"/developers/products/hoops-visualize","b5115ad7-8d04-4a41-ae62-0680605c897d","_self","story",{"type":40},{"text":176,"type":37,"marks":177}," (formerly HOOPS Communicator).",[178],{"type":40},{"type":96,"content":180},[181,196,210,223],{"type":99,"content":182},[183],{"type":42,"attrs":184,"content":185},{"textAlign":33},[186,188,194],{"text":187,"type":37},"Reference the HOOPS Visualize for Web (formerly HOOPS Communicator) ",{"text":189,"type":37,"marks":190},"Documentation",[191],{"type":61,"attrs":192},{"href":193,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://docs.techsoft3d.com/communicator/latest/",{"text":195,"type":37},".",{"type":99,"content":197},[198],{"type":42,"attrs":199,"content":200},{"textAlign":33},[201,203,209],{"text":202,"type":37},"Sign up for a free ",{"text":204,"type":37,"marks":205},"evaluation",[206],{"type":61,"attrs":207},{"href":208,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://manage.techsoft3d.com/signup?product=communicator",{"text":195,"type":37},{"type":99,"content":211},[212],{"type":42,"attrs":213,"content":214},{"textAlign":33},[215,217],{"text":216,"type":37},"Jump straight into coding with the ",{"text":218,"type":37,"marks":219},"3D Sandbox",[220],{"type":61,"attrs":221},{"href":222,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://3dsandbox.techsoft3d.com/",{"type":99,"content":224},[225],{"type":42,"attrs":226,"content":227},{"textAlign":33},[228,230],{"text":229,"type":37},"Join our ",{"text":231,"type":37,"marks":232},"Community Forum",[233],{"type":61,"attrs":234},{"href":235,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://forum.techsoft3d.com/",{"_uid":237,"body":238,"alignment":67,"component":68,"is_full_width":69},"49bfa3fe-caaf-40b4-8123-f5361a510401",{"type":27,"content":239},[240,247,259],{"type":30,"attrs":241,"content":242},{"level":32,"textAlign":33},[243],{"text":244,"type":37,"marks":245},"Questions or Feedback?",[246],{"type":40},{"type":42,"attrs":248,"content":249},{"textAlign":33},[250,252,258],{"text":251,"type":37},"We are looking for feedback and how this toolkit can be improved to meet your needs! Please connect in our ",{"text":253,"type":37,"marks":254},"forum",[255],{"type":61,"attrs":256},{"href":235,"uuid":33,"anchor":33,"target":257,"linktype":64},"_blank",{"text":195,"type":37},{"type":42,"attrs":260,"content":261},{"textAlign":33},[262,264],{"text":263,"type":37},"You can also sign up for a 60-day trial of ",{"text":265,"type":37,"marks":266},"HOOPS Visualize. ",[267],{"type":61,"attrs":268},{"href":269,"uuid":33,"anchor":33,"target":172,"linktype":64},"https://developer.techsoft3d.com/hoops/visualize",{"_uid":271,"messages":272,"component":305,"background":306,"remove_padding":69,"is_verticalized":281},"2517b691-8590-46b2-b1a0-c989536a3b36",[273],{"_uid":274,"icon":16,"buttons":275,"content":286,"headline":293,"link_url":16,"metadata":300,"component":303,"icon_size":16,"link_label":16,"headline_heading":304},"1f7a4845-55d4-4520-b973-efe814118e45",[276],{"_uid":277,"href":16,"color":278,"label":279,"action":280,"new_tab":281,"outline":69,"alignment":16,"component":282,"text_link":281,"destination":283},"e25f6918-ec5e-43c9-9ad6-5e4bcf39b279","light","Subscribe","action-modal",false,"element-button",{"id":16,"url":284,"linktype":64,"fieldtype":285,"cached_url":284},"subscribe","multilink",{"type":27,"content":287},[288],{"type":42,"attrs":289,"content":290},{"textAlign":33},[291],{"text":292,"type":37},"We’ll notify you as soon as new projects are available.",{"type":27,"content":294},[295],{"type":42,"attrs":296,"content":297},{"textAlign":33},[298],{"text":299,"type":37},"Be the first to know about new projects",{"_uid":301,"title":16,"plugin":302,"description":16},"0fa59fa4-a396-48fd-8878-1ce90fb5c07c","meta-fields","element-callout-child","heading-h3","element-callout",{"id":307,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":308,"copyright":16,"fieldtype":309,"meta_data":310,"is_external_url":281},72383172008371,"https://a-us.storyblok.com/f/1023536/1350x901/98f768d3c7/mosiac.jpg","asset",{},{"_uid":312,"body":313,"alignment":67,"component":68,"is_full_width":69},"ed21b4a6-d00f-4e0d-a54d-08aa82d4d29d",{"type":27,"content":314},[315],{"type":42,"attrs":316,"content":317},{"textAlign":33},[318,320,326],{"text":319,"type":37},"Need to contact us? Email us at ",{"text":321,"type":37,"marks":322},"labs@techsoft3d.com",[323],{"type":61,"attrs":324},{"href":321,"uuid":33,"anchor":33,"target":172,"linktype":325},"email",{"text":195,"type":37},"columns",{"id":284,"_uid":329,"items":330,"component":336},"ca556064-0fa5-4110-8395-86e3f005ea32",[331],{"id":332,"_uid":333,"component":334,"business_unit":335},"dbdcd35d-8954-4b0d-9902-999e4cd25928","f78173e1-09c9-45b4-92d3-445b190c5ada","hubspot-form","toolkits","modal","2023-06-27 00:00",[339],{"_uid":340,"source":341,"component":394},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":342,"created_at":343,"published_at":344,"updated_at":345,"id":346,"uuid":347,"content":348,"slug":385,"full_slug":386,"sort_by_date":33,"position":387,"tag_list":388,"is_startpage":281,"parent_id":389,"meta_data":33,"group_id":390,"first_published_at":391,"release_id":33,"lang":392,"path":33,"alternates":393,"default_full_slug":33,"translated_slugs":33,"_stopResolving":69},"Main Navigation","2025-04-09T14:04:01.876Z","2026-03-10T15:15:52.184Z","2026-03-10T15:15:52.242Z",27565407,"c5f4a23f-ca2c-41d7-946b-6822d34565a0",{"_uid":349,"items":350,"component":384},"8915070e-32eb-476d-b215-1c92ebdad15c",[351,366],{"_uid":352,"left_nav":16,"messages":353,"component":365,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[354,360],{"_uid":355,"icon":356,"link":357,"target":16,"message":358,"component":359},"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":361,"icon":362,"link":363,"target":16,"message":364,"component":359},"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":367,"menu":368,"component":383,"has_notice":69},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[369,374,377,380],{"url":370,"_uid":371,"label":372,"new_tab":281,"component":373},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","SDKs for Developers","top-menu-child",{"url":370,"_uid":375,"label":376,"new_tab":281,"component":373,"style_as_button":281},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","Apps for Businesses",{"url":370,"_uid":378,"label":379,"new_tab":281,"component":373,"style_as_button":281},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","Company",{"url":370,"_uid":381,"label":382,"new_tab":281,"component":373,"style_as_button":69},"f2040cd1-8c5b-4dcf-8ee1-5b56049d0fe2","Support","top","global","main-navigation","zh/global/main-navigation",-30,[],27501948,"998e76b0-7b0e-4635-8abf-c9db0f0bf29c","2025-04-09T15:16:40.189Z","zh",[],"reference",{"type":27,"content":396},[397],{"type":42,"attrs":398,"content":399},{"textAlign":33},[400,402,406],{"text":401,"type":37},"This demo showcases how ",{"text":166,"type":37,"marks":403},[404],{"type":61,"attrs":405},{"href":170,"uuid":171,"anchor":33,"target":172,"linktype":173},{"text":407,"type":37}," (formerly HOOPS Communicator) can be used to create a product configurator visualization solution.",[409,415],{"id":410,"alt":411,"name":16,"focus":16,"title":412,"source":16,"filename":413,"copyright":16,"fieldtype":309,"meta_data":414},159477173690123,"3D CAD model of bicycle frame in product configurator demo","3D bicycle frame","https://a-us.storyblok.com/f/1023536/1920x1080/1f9f4ce2bb/product-configurator-demo-2.jpg",{"alt":411,"title":412,"source":16,"copyright":16},{"id":416,"alt":417,"name":16,"focus":16,"title":418,"source":16,"filename":419,"copyright":16,"fieldtype":309,"meta_data":420},159477173677834,"3D CAD model of bicycle in product configurator demo","3D bicycle CAD product","https://a-us.storyblok.com/f/1023536/1920x1080/0e1ae391e0/product-configurator-demo-1.jpg",{"alt":417,"title":418,"source":16,"copyright":16},[422],"hoopsVisualize",{"_uid":424,"title":425,"plugin":302,"description":426},"54a2ef1e-aa5c-4f3b-9b9d-f866451ee8e6","Product 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 solution.","lab",{"id":16,"url":429,"linktype":64,"fieldtype":285,"cached_url":429},"https://techsoft3d.github.io/product-configurator/",{"id":416,"alt":417,"name":16,"focus":16,"title":418,"source":16,"filename":419,"copyright":16,"fieldtype":309,"meta_data":431,"is_external_url":281},{"alt":417,"title":418,"source":16,"copyright":16},{"id":16,"url":433,"linktype":64,"fieldtype":285,"cached_url":433},"https://github.com/techsoft3d/product-configurator","Tuesday, June 27, 2023",{"id":416,"alt":417,"name":16,"focus":16,"title":418,"source":16,"filename":419,"copyright":16,"fieldtype":309,"meta_data":436,"is_external_url":281},{"alt":417,"title":418,"source":16,"copyright":16},"product-configurator-demo","zh/developers/labs/product-configurator-demo",-210,[],99359039112762,"1f085b7e-bbd6-46bd-bee2-00d9efa9898d",[],1775830851,[446],{"name":342,"created_at":343,"published_at":344,"updated_at":345,"id":346,"uuid":347,"content":447,"slug":385,"full_slug":386,"sort_by_date":33,"position":387,"tag_list":459,"is_startpage":281,"parent_id":389,"meta_data":33,"group_id":390,"first_published_at":391,"release_id":33,"lang":392,"path":33,"alternates":460,"default_full_slug":33,"translated_slugs":33},{"_uid":349,"items":448,"component":384},[449,453],{"_uid":352,"left_nav":16,"messages":450,"component":365,"right_nav":16},[451,452],{"_uid":355,"icon":356,"link":357,"target":16,"message":358,"component":359},{"_uid":361,"icon":362,"link":363,"target":16,"message":364,"component":359},{"_uid":367,"menu":454,"component":383,"has_notice":69},[455,456,457,458],{"url":370,"_uid":371,"label":372,"new_tab":281,"component":373},{"url":370,"_uid":375,"label":376,"new_tab":281,"component":373,"style_as_button":281},{"url":370,"_uid":378,"label":379,"new_tab":281,"component":373,"style_as_button":281},{"url":370,"_uid":381,"label":382,"new_tab":281,"component":373,"style_as_button":69},[],[],[],{"cache-control":463,"connection":464,"content-encoding":465,"content-type":466,"date":467,"etag":468,"referrer-policy":469,"sb-be-version":470,"server":471,"strict-transport-security":472,"transfer-encoding":473,"vary":474,"via":475,"x-amz-cf-id":476,"x-amz-cf-pop":477,"x-cache":478,"x-content-type-options":479,"x-frame-options":480,"x-permitted-cross-domain-policies":481,"x-request-id":482,"x-runtime":483,"x-xss-protection":484},"max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","gzip","application/json; charset=utf-8","Fri, 10 Apr 2026 14:21:51 GMT","W/\"e1ae34a622bd43ff032a4c2be58d3f65\"","strict-origin-when-cross-origin","5.711.0","nginx/1.29.1","max-age=31536000","chunked","Origin,Accept-Encoding, Origin","1.1 9c55f18c68e82556d37b177f8dba94da.cloudfront.net (CloudFront)","xn-JlP1fKlIXWzEcfSufQs6edTbzFzdrrvemYzFGP2Kw8GCIjbZmaw==","CMH68-P3","Miss from cloudfront","nosniff","SAMEORIGIN","none","63ebf892-bc76-48ce-b7fc-0fa38fb0fdd8","0.028502","0",1775830911483]