[{"data":1,"prerenderedAt":494},["ShallowReactive",2],{"{\"language\":\"zh\",\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/product-configurator-demo":3},{"data":4,"headers":471},{"story":5,"cv":452,"rels":453,"links":470},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":444,"full_slug":445,"sort_by_date":33,"position":446,"tag_list":447,"is_startpage":282,"parent_id":448,"meta_data":33,"group_id":449,"first_published_at":450,"release_id":33,"lang":398,"path":33,"alternates":451,"default_full_slug":33,"translated_slugs":33},"Product Configurator Demo","2026-03-27T15:09:47.708Z","2026-10-10T22:15:39.852Z","2026-10-10T22:15:39.902Z",159476071304740,"cd9ac704-e4d7-481d-acff-57ec9ad12356",{"_uid":13,"body":14,"date":338,"fold":339,"intro":401,"title":414,"gallery":415,"category":428,"metadata":430,"component":434,"demo_link":435,"thumbnail":437,"github_link":439,"last_updated":441,"open_graph_image":442,"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,236,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},"概述","text",[39],{"type":40},"bold",{"type":42,"attrs":43,"content":44},"paragraph",{"textAlign":33},[45],{"text":46,"type":37},"在此演示中，您可以选择自行车组件的不同元素并将它们添加到您的场景中。如果已添加部件有多个选项，您可以将该部件换为不同的部件。",{"type":42,"attrs":48,"content":49},{"textAlign":33},[50],{"text":51,"type":37},"此演示中还有一个额外的网页查看器，让您在将组件添加到组件组合前查看其预览。",{"type":42,"attrs":53,"content":54},{"textAlign":33},[55,57,65],{"text":56,"type":37},"此演示附带一个完整的 ",{"text":58,"type":37,"marks":59},"逐步教程",[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}," ，该教程将展示如何自行实现此项目。","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},"演示讲解视频",[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},"实现方式",[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},"设置查看器",[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},"加载模型",[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},"添加组件选择",[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},"整合模型关系",[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},"清除构建",[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},"此演示是使用 ",[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}," (前身为 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},"参考 HOOPS Visualize for Web（前身为 HOOPS Communicator） ",{"text":189,"type":37,"marks":190},"文档",[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},"注册免费 ",{"text":204,"type":37,"marks":205},"评估",[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},"在 ",{"text":218,"type":37,"marks":219},"3D 沙盒",[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},"中直接开始编码 ",{"text":231,"type":37,"marks":232},"加入我们的",[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,260],{"type":30,"attrs":241,"content":242},{"level":32,"textAlign":33},[243],{"text":244,"type":37,"marks":245},"有问题或反馈？",[246],{"type":40},{"type":42,"attrs":248,"content":249},{"textAlign":33},[250,252,258],{"text":251,"type":37},"我们正在寻求反馈，以及如何改进此工具包以满足您的需求！请在我们的 ",{"text":253,"type":37,"marks":254},"论坛",[255],{"type":61,"attrs":256},{"href":235,"uuid":33,"anchor":33,"target":257,"linktype":64},"_blank",{"text":259,"type":37},"中联系。",{"type":42,"attrs":261,"content":262},{"textAlign":33},[263,265],{"text":264,"type":37},"您也可以注册 HOOPS Visualize 的60天试用。 ",{"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","订阅","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},"新项目可用时我们会立即通知您。",{"type":27,"content":295},[296],{"type":42,"attrs":297,"content":298},{"textAlign":33},[299],{"text":300,"type":37},"第一时间了解新项目",{"_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},"需要联系我们？请发邮件至 ",{"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":400},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":343,"created_at":344,"published_at":345,"updated_at":346,"id":347,"uuid":348,"content":349,"slug":391,"full_slug":392,"sort_by_date":33,"position":393,"tag_list":394,"is_startpage":282,"parent_id":395,"meta_data":33,"group_id":396,"first_published_at":397,"release_id":33,"lang":398,"path":33,"alternates":399,"default_full_slug":33,"translated_slugs":33,"_stopResolving":69},"Main Navigation","2025-04-09T14:04:01.876Z","2026-10-10T22:18:15.264Z","2026-10-10T22:18:15.279Z",27565407,"c5f4a23f-ca2c-41d7-946b-6822d34565a0",{"_uid":350,"items":351,"component":390},"8915070e-32eb-476d-b215-1c92ebdad15c",[352,372],{"_uid":353,"left_nav":16,"messages":354,"component":371,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[355,361,366],{"_uid":356,"icon":357,"link":358,"target":257,"message":359,"component":360},"1773ad80-3b42-4f4a-97eb-c9cd1258a7ed","cil:magnifying-glass","https://pages.techsoft3d.com/engineering-data-insights?utm_campaign=48796445-2026%20Build%20or%20Buy%20Research&utm_source=Website&utm_medium=Main%20Banner","最新研究：制造商如何满足对工程数据日益增长的需求","element-notice-child",{"_uid":362,"icon":363,"link":364,"target":257,"message":365,"component":360},"b4b88ef9-df13-42b9-8794-0acf2f43a408","hugeicons:calendar-04","https://pages.techsoft3d.com/get-the-most-out-of-your-cad-data-webinar","注册参加我们即将举行的网络研讨会：了解 VNTANA 如何通过 HOOPS Exchange 利用 CAD 数据",{"_uid":367,"icon":368,"link":369,"target":16,"message":370,"component":360},"87585227-383a-48e2-a5e5-1541d3b4b65a","tdesign:user-talk-1","/contact","对我们的SDK或企业应用有疑问？与 Tech Soft 3D 专家沟通","element-notice",{"_uid":373,"menu":374,"component":389,"has_notice":69},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[375,380,383,386],{"url":376,"_uid":377,"label":378,"new_tab":282,"component":379},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","开发者SDK","top-menu-child",{"url":376,"_uid":381,"label":382,"new_tab":282,"component":379,"style_as_button":282},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","企业应用",{"url":376,"_uid":384,"label":385,"new_tab":282,"component":379,"style_as_button":282},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","公司",{"url":376,"_uid":387,"label":388,"new_tab":282,"component":379,"style_as_button":69},"f2040cd1-8c5b-4dcf-8ee1-5b56049d0fe2","支持","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":402},[403],{"type":42,"attrs":404,"content":405},{"textAlign":33},[406,408,412],{"text":407,"type":37},"此演示展示了如何使用 ",{"text":166,"type":37,"marks":409},[410],{"type":61,"attrs":411},{"href":170,"uuid":171,"anchor":33,"target":172,"linktype":173},{"text":413,"type":37}," （前身为 HOOPS Communicator）来创建产品配置器可视化解决方案。","产品配置器演示",[416,422],{"id":417,"alt":418,"name":16,"focus":16,"title":419,"source":16,"filename":420,"copyright":16,"fieldtype":310,"meta_data":421},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":418,"title":419,"source":16,"copyright":16},{"id":423,"alt":424,"name":16,"focus":16,"title":425,"source":16,"filename":426,"copyright":16,"fieldtype":310,"meta_data":427},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":424,"title":425,"source":16,"copyright":16},[429],"hoopsVisualize",{"_uid":431,"title":432,"plugin":303,"description":433},"979ee977-db94-40fe-8b22-1b3f60581922","产品配置器演示 | Tech Soft 3D 实验室","此演示展示了如何使用 HOOPS Visualize for Web （前称 HOOPS Communicator）来创建产品配置器可视化解决方案。","lab",{"id":16,"url":436,"linktype":64,"fieldtype":286,"cached_url":436},"https://techsoft3d.github.io/product-configurator/",{"id":423,"alt":424,"name":16,"focus":16,"title":425,"source":16,"filename":426,"copyright":16,"fieldtype":310,"meta_data":438,"is_external_url":282},{"alt":424,"title":425,"source":16,"copyright":16},{"id":16,"url":440,"linktype":64,"fieldtype":286,"cached_url":440},"https://github.com/techsoft3d/product-configurator","2023年6月27日，星期二",{"id":423,"alt":424,"name":16,"focus":16,"title":425,"source":16,"filename":426,"copyright":16,"fieldtype":310,"meta_data":443,"is_external_url":282},{"alt":424,"title":425,"source":16,"copyright":16},"product-configurator-demo","zh/developers/labs/product-configurator-demo",-210,[],99359039112762,"1f085b7e-bbd6-46bd-bee2-00d9efa9898d","2026-04-03T18:44:11.947Z",[],1791995899,[454],{"name":343,"created_at":344,"published_at":345,"updated_at":346,"id":347,"uuid":348,"content":455,"slug":391,"full_slug":392,"sort_by_date":33,"position":393,"tag_list":468,"is_startpage":282,"parent_id":395,"meta_data":33,"group_id":396,"first_published_at":397,"release_id":33,"lang":398,"path":33,"alternates":469,"default_full_slug":33,"translated_slugs":33},{"_uid":350,"items":456,"component":390},[457,462],{"_uid":353,"left_nav":16,"messages":458,"component":371,"right_nav":16},[459,460,461],{"_uid":356,"icon":357,"link":358,"target":257,"message":359,"component":360},{"_uid":362,"icon":363,"link":364,"target":257,"message":365,"component":360},{"_uid":367,"icon":368,"link":369,"target":16,"message":370,"component":360},{"_uid":373,"menu":463,"component":389,"has_notice":69},[464,465,466,467],{"url":376,"_uid":377,"label":378,"new_tab":282,"component":379},{"url":376,"_uid":381,"label":382,"new_tab":282,"component":379,"style_as_button":282},{"url":376,"_uid":384,"label":385,"new_tab":282,"component":379,"style_as_button":282},{"url":376,"_uid":387,"label":388,"new_tab":282,"component":379,"style_as_button":69},[],[],[],{"cache-control":472,"connection":473,"content-encoding":474,"content-type":475,"date":476,"etag":477,"referrer-policy":478,"sb-be-version":479,"server":480,"strict-transport-security":481,"transfer-encoding":482,"vary":483,"via":484,"x-amz-cf-id":485,"x-amz-cf-pop":486,"x-cache":487,"x-content-type-options":488,"x-frame-options":489,"x-permitted-cross-domain-policies":490,"x-request-id":491,"x-runtime":492,"x-xss-protection":493},"max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","gzip","application/json; charset=utf-8","Wed, 14 Oct 2026 17:02:47 GMT","W/\"d321b55f40e2ffd3ad09e24c3a978b98\"","strict-origin-when-cross-origin","5.980.1","nginx/1.29.1","max-age=31536000","chunked","Origin,Accept-Encoding, Origin","1.1 dfefeb7bf78c4bb787739d020c642c14.cloudfront.net (CloudFront)","b89hnEc3OVcH-c4CpzXi_P68IYyR8YtCjYsWjDSJ4j_OpEN8RejbAQ==","CMH68-P3","Miss from cloudfront","nosniff","SAMEORIGIN","none","dacc0675-ca96-41f1-87b5-ee36381638ed","0.034924","0",1791997367543]