[{"data":1,"prerenderedAt":489},["ShallowReactive",2],{"{\"language\":\"de\",\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/product-configurator-demo":3},{"data":4,"headers":465},{"story":5,"cv":447,"rels":448,"links":464},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":439,"full_slug":440,"sort_by_date":33,"position":441,"tag_list":442,"is_startpage":282,"parent_id":443,"meta_data":33,"group_id":444,"first_published_at":445,"release_id":33,"lang":393,"path":33,"alternates":446,"default_full_slug":33,"translated_slugs":33},"Product Configurator Demo","2026-03-27T15:09:47.708Z","2026-04-23T12:28:55.122Z","2026-04-23T12:28:55.144Z",159476071304740,"cd9ac704-e4d7-481d-acff-57ec9ad12356",{"_uid":13,"body":14,"date":338,"fold":339,"intro":396,"title":409,"gallery":410,"category":423,"metadata":425,"component":429,"demo_link":430,"thumbnail":432,"github_link":434,"last_updated":436,"open_graph_image":437,"include_open_graph":69,"block_search_engines":282},"f50d366a-d67c-4a10-86a7-4b5fc5c9f54e",[15,329],{"gap":16,"_uid":17,"align":16,"count":18,"width":19,"columns":20,"component":328,"remove_padding":69},"","f6f97b29-f4c1-4242-863b-a4543a5a2bbc","column-one","width-full",[21,24,70,81,84,154,237,271,312],{"_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},"Überblick","text",[39],{"type":40},"bold",{"type":42,"attrs":43,"content":44},"paragraph",{"textAlign":33},[45],{"text":46,"type":37},"In dieser Demo können Sie verschiedene Elemente einer Fahrradmontage auswählen und Ihrer Szene hinzufügen. Wenn mehrere Optionen des Hinzugefügten verfügbar sind, können Sie das Teil gegen ein anderes austauschen.",{"type":42,"attrs":48,"content":49},{"textAlign":33},[50],{"text":51,"type":37},"Es gibt einen zusätzlichen Web-Viewer in dieser Demo, der Ihnen ermöglicht, eine Vorschau der Komponente zu sehen, bevor Sie sie zur Montage hinzufügen.",{"type":42,"attrs":53,"content":54},{"textAlign":33},[55,57,65],{"text":56,"type":37},"Diese Demo wird mit einem vollständigen ",{"text":58,"type":37,"marks":59},"Schritt-für-Schritt-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}," geliefert, das Ihnen zeigt, wie Sie dieses Projekt selbst umsetzen können.","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-Durchlauf-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},"Wie es implementiert wurde",[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},"Einstellung der Viewer",[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},"Modelle laden",[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},"Komponentenauswahl hinzufügen",[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},"Einbeziehung von Modellbeziehungen",[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},"Bereinigung des Aufbaus",[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},"Diese Demo wurde mit ",[164],{"type":40},{"text":166,"type":37,"marks":167},"HOOPS Visualize für 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}," (ehemals HOOPS Communicator) erstellt.",[178],{"type":40},{"type":96,"content":180},[181,196,211,224],{"type":99,"content":182},[183],{"type":42,"attrs":184,"content":185},{"textAlign":33},[186,188,194],{"text":187,"type":37},"Verweisen Sie auf die HOOPS Visualize für Web (ehemals HOOPS Communicator) ",{"text":189,"type":37,"marks":190},"Dokumentation",[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},"Melden Sie sich für eine kostenlose ",{"text":204,"type":37,"marks":205},"Evaluierung",[206],{"type":61,"attrs":207},{"href":208,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://manage.techsoft3d.com/signup?product=communicator",{"text":210,"type":37},"an.",{"type":99,"content":212},[213],{"type":42,"attrs":214,"content":215},{"textAlign":33},[216,218],{"text":217,"type":37},"Beginnen Sie direkt mit dem Programmieren mit dem ",{"text":219,"type":37,"marks":220},"3D Sandbox",[221],{"type":61,"attrs":222},{"href":223,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://3dsandbox.techsoft3d.com/",{"type":99,"content":225},[226],{"type":42,"attrs":227,"content":228},{"textAlign":33},[229,231],{"text":230,"type":37},"Treten Sie unserem ",{"text":232,"type":37,"marks":233},"Community-Forum",[234],{"type":61,"attrs":235},{"href":236,"uuid":33,"anchor":33,"target":33,"linktype":64},"https://forum.techsoft3d.com/",{"_uid":238,"body":239,"alignment":67,"component":68,"is_full_width":69},"49bfa3fe-caaf-40b4-8123-f5361a510401",{"type":27,"content":240},[241,248,260],{"type":30,"attrs":242,"content":243},{"level":32,"textAlign":33},[244],{"text":245,"type":37,"marks":246},"Fragen oder Feedback?",[247],{"type":40},{"type":42,"attrs":249,"content":250},{"textAlign":33},[251,253,259],{"text":252,"type":37},"Wir suchen nach Feedback und wie dieses Toolkit verbessert werden kann, um Ihren Anforderungen gerecht zu werden! Bitte verbinden Sie sich in unserem ",{"text":254,"type":37,"marks":255},"Forum",[256],{"type":61,"attrs":257},{"href":236,"uuid":33,"anchor":33,"target":258,"linktype":64},"_blank",{"text":195,"type":37},{"type":42,"attrs":261,"content":262},{"textAlign":33},[263,265],{"text":264,"type":37},"Sie können sich auch für eine 60-tägige Testversion von ",{"text":266,"type":37,"marks":267},"HOOPS Visualize ",[268],{"type":61,"attrs":269},{"href":270,"uuid":33,"anchor":33,"target":172,"linktype":64},"https://developer.techsoft3d.com/hoops/visualize",{"_uid":272,"messages":273,"component":306,"background":307,"remove_padding":69,"is_verticalized":282},"2517b691-8590-46b2-b1a0-c989536a3b36",[274],{"_uid":275,"icon":16,"buttons":276,"content":287,"headline":294,"link_url":16,"metadata":301,"component":304,"icon_size":16,"link_label":16,"headline_heading":305},"1f7a4845-55d4-4520-b973-efe814118e45",[277],{"_uid":278,"href":16,"color":279,"label":280,"action":281,"new_tab":282,"outline":69,"alignment":16,"component":283,"text_link":282,"destination":284},"e25f6918-ec5e-43c9-9ad6-5e4bcf39b279","light","Abonnieren","action-modal",false,"element-button",{"id":16,"url":285,"linktype":64,"fieldtype":286,"cached_url":285},"subscribe","multilink",{"type":27,"content":288},[289],{"type":42,"attrs":290,"content":291},{"textAlign":33},[292],{"text":293,"type":37},"Wir benachrichtigen Sie, sobald neue Projekte verfügbar sind.",{"type":27,"content":295},[296],{"type":42,"attrs":297,"content":298},{"textAlign":33},[299],{"text":300,"type":37},"Seien Sie der Erste, der über neue Projekte informiert wird",{"_uid":302,"title":16,"plugin":303,"description":16},"0fa59fa4-a396-48fd-8878-1ce90fb5c07c","meta-fields","element-callout-child","heading-h3","element-callout",{"id":308,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":309,"copyright":16,"fieldtype":310,"meta_data":311,"is_external_url":282},72383172008371,"https://a-us.storyblok.com/f/1023536/1350x901/98f768d3c7/mosiac.jpg","asset",{},{"_uid":313,"body":314,"alignment":67,"component":68,"is_full_width":69},"ed21b4a6-d00f-4e0d-a54d-08aa82d4d29d",{"type":27,"content":315},[316],{"type":42,"attrs":317,"content":318},{"textAlign":33},[319,321,327],{"text":320,"type":37},"Müssen Sie uns kontaktieren? Senden Sie eine E-Mail an ",{"text":322,"type":37,"marks":323},"labs@techsoft3d.com",[324],{"type":61,"attrs":325},{"href":322,"uuid":33,"anchor":33,"target":172,"linktype":326},"email",{"text":195,"type":37},"columns",{"id":285,"_uid":330,"items":331,"component":337},"ca556064-0fa5-4110-8395-86e3f005ea32",[332],{"id":333,"_uid":334,"component":335,"business_unit":336},"dbdcd35d-8954-4b0d-9902-999e4cd25928","f78173e1-09c9-45b4-92d3-445b190c5ada","hubspot-form","toolkits","modal","2023-06-27 00:00",[340],{"_uid":341,"source":342,"component":395},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":343,"created_at":344,"published_at":345,"updated_at":346,"id":347,"uuid":348,"content":349,"slug":386,"full_slug":387,"sort_by_date":33,"position":388,"tag_list":389,"is_startpage":282,"parent_id":390,"meta_data":33,"group_id":391,"first_published_at":392,"release_id":33,"lang":393,"path":33,"alternates":394,"default_full_slug":33,"translated_slugs":33,"_stopResolving":69},"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":350,"items":351,"component":385},"8915070e-32eb-476d-b215-1c92ebdad15c",[352,367],{"_uid":353,"left_nav":16,"messages":354,"component":366,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[355,361],{"_uid":356,"icon":357,"link":358,"target":16,"message":359,"component":360},"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":362,"icon":363,"link":364,"target":16,"message":365,"component":360},"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":368,"menu":369,"component":384,"has_notice":69},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[370,375,378,381],{"url":371,"_uid":372,"label":373,"new_tab":282,"component":374},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","SDKs for Developers","top-menu-child",{"url":371,"_uid":376,"label":377,"new_tab":282,"component":374,"style_as_button":282},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","Apps for Businesses",{"url":371,"_uid":379,"label":380,"new_tab":282,"component":374,"style_as_button":282},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","Company",{"url":371,"_uid":382,"label":383,"new_tab":282,"component":374,"style_as_button":69},"f2040cd1-8c5b-4dcf-8ee1-5b56049d0fe2","Support","top","global","main-navigation","de/global/main-navigation",-30,[],27501948,"998e76b0-7b0e-4635-8abf-c9db0f0bf29c","2025-04-09T15:16:40.189Z","de",[],"reference",{"type":27,"content":397},[398],{"type":42,"attrs":399,"content":400},{"textAlign":33},[401,403,407],{"text":402,"type":37},"Diese Demo zeigt, wie ",{"text":166,"type":37,"marks":404},[405],{"type":61,"attrs":406},{"href":170,"uuid":171,"anchor":33,"target":172,"linktype":173},{"text":408,"type":37}," (ehemals HOOPS Communicator) genutzt werden kann, um eine Visualisierungslösung für Produktkonfiguratoren zu erstellen.","Produktkonfigurator-Demo",[411,417],{"id":412,"alt":413,"name":16,"focus":16,"title":414,"source":16,"filename":415,"copyright":16,"fieldtype":310,"meta_data":416},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":413,"title":414,"source":16,"copyright":16},{"id":418,"alt":419,"name":16,"focus":16,"title":420,"source":16,"filename":421,"copyright":16,"fieldtype":310,"meta_data":422},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":419,"title":420,"source":16,"copyright":16},[424],"hoopsVisualize",{"_uid":426,"title":427,"plugin":303,"description":428},"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":431,"linktype":64,"fieldtype":286,"cached_url":431},"https://techsoft3d.github.io/product-configurator/",{"id":418,"alt":419,"name":16,"focus":16,"title":420,"source":16,"filename":421,"copyright":16,"fieldtype":310,"meta_data":433,"is_external_url":282},{"alt":419,"title":420,"source":16,"copyright":16},{"id":16,"url":435,"linktype":64,"fieldtype":286,"cached_url":435},"https://github.com/techsoft3d/product-configurator","Dienstag, 27. Juni 2023",{"id":418,"alt":419,"name":16,"focus":16,"title":420,"source":16,"filename":421,"copyright":16,"fieldtype":310,"meta_data":438,"is_external_url":282},{"alt":419,"title":420,"source":16,"copyright":16},"product-configurator-demo","de/developers/labs/product-configurator-demo",-210,[],99359039112762,"1f085b7e-bbd6-46bd-bee2-00d9efa9898d","2026-04-03T18:44:11.947Z",[],1777045065,[449],{"name":343,"created_at":344,"published_at":345,"updated_at":346,"id":347,"uuid":348,"content":450,"slug":386,"full_slug":387,"sort_by_date":33,"position":388,"tag_list":462,"is_startpage":282,"parent_id":390,"meta_data":33,"group_id":391,"first_published_at":392,"release_id":33,"lang":393,"path":33,"alternates":463,"default_full_slug":33,"translated_slugs":33},{"_uid":350,"items":451,"component":385},[452,456],{"_uid":353,"left_nav":16,"messages":453,"component":366,"right_nav":16},[454,455],{"_uid":356,"icon":357,"link":358,"target":16,"message":359,"component":360},{"_uid":362,"icon":363,"link":364,"target":16,"message":365,"component":360},{"_uid":368,"menu":457,"component":384,"has_notice":69},[458,459,460,461],{"url":371,"_uid":372,"label":373,"new_tab":282,"component":374},{"url":371,"_uid":376,"label":377,"new_tab":282,"component":374,"style_as_button":282},{"url":371,"_uid":379,"label":380,"new_tab":282,"component":374,"style_as_button":282},{"url":371,"_uid":382,"label":383,"new_tab":282,"component":374,"style_as_button":69},[],[],[],{"age":466,"cache-control":467,"connection":468,"content-encoding":469,"content-type":470,"date":471,"etag":472,"referrer-policy":473,"sb-be-version":474,"server":475,"strict-transport-security":476,"transfer-encoding":477,"vary":478,"via":479,"x-amz-cf-id":480,"x-amz-cf-pop":481,"x-cache":482,"x-content-type-options":483,"x-frame-options":484,"x-permitted-cross-domain-policies":485,"x-request-id":486,"x-runtime":487,"x-xss-protection":488},"175025","max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","gzip","application/json; charset=utf-8","Fri, 24 Apr 2026 16:03:56 GMT","W/\"a63d33dc8fae76053fffea22ccca0197\"","strict-origin-when-cross-origin","5.764.0","nginx/1.29.1","max-age=31536000","chunked","Origin,Accept-Encoding, Origin","1.1 57cb281e5423af1daf1086071d6858a4.cloudfront.net (CloudFront)","FDo6J5XftPBGtujRkNrwquP5HXO6duB2a9nDhM0yolVWVgcmGM9VIQ==","CMH68-P3","Hit from cloudfront","nosniff","SAMEORIGIN","none","6df50a92-625c-4a12-bd6e-bd174023e87f","0.040593","0",1777221661508]