[{"data":1,"prerenderedAt":482},["ShallowReactive",2],{"{\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/four-models":3},{"data":4,"headers":459},{"story":5,"cv":441,"rels":442,"links":458},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":433,"full_slug":434,"sort_by_date":30,"position":435,"tag_list":436,"is_startpage":141,"parent_id":437,"meta_data":30,"group_id":438,"first_published_at":439,"release_id":30,"lang":389,"path":30,"alternates":440,"default_full_slug":30,"translated_slugs":30},"Four Models","2026-03-09T14:52:27.370Z","2026-04-23T12:28:58.817Z","2026-04-23T12:28:58.884Z",153101710869841,"2529b396-28a8-4653-aba4-42d8d0b6c78e",{"_uid":13,"body":14,"date":334,"fold":335,"intro":392,"title":399,"gallery":400,"category":413,"metadata":415,"component":419,"demo_link":420,"thumbnail":422,"github_link":428,"last_updated":430,"open_graph_image":431,"include_open_graph":69,"block_search_engines":141},"f50d366a-d67c-4a10-86a7-4b5fc5c9f54e",[15,325],{"gap":16,"_uid":17,"align":16,"count":18,"width":19,"columns":20,"component":144,"remove_padding":69},"","7d8d5b34-9501-4f53-8220-a76bf31cfe98","column-one","width-full",[21,70,123,134,145,234,269,309],{"_uid":22,"body":23,"alignment":67,"component":68,"is_full_width":69},"b989bae4-64bd-41d7-bfd4-28b9b2933a49",{"type":24,"content":25},"doc",[26,38,62],{"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,52,54,60],{"text":43,"type":34},"This demo showcases how the HOOPS Web Viewer can be used to load and display additional CAD data into a scene quickly and efficiently. In this demo, nothing is loaded into the scene until the user requests for the model to be shown. This behavior differs from the ",{"text":45,"type":34,"marks":46},"OnDemand loading",[47],{"type":48,"attrs":49},"link",{"href":50,"uuid":30,"anchor":30,"target":30,"linktype":51},"https://docs.techsoft3d.com/communicator/latest/prog_guide/viewing/data_model/stream_cache/loading.html?highlight=on%20demand#","url",{"text":53,"type":34}," feature which is shown in our ",{"text":55,"type":34,"marks":56},"Cement Plant Demo",[57],{"type":48,"attrs":58},{"href":59,"uuid":30,"anchor":30,"target":30,"linktype":51},"https://master--elaborate-shortbread-ea7430.netlify.app/project/cement-plant",{"text":61,"type":34},". Unlike the Cement Plant Demo, all models loaded into this scene are completely independent of one another and go through no preloading sequences.",{"type":39,"attrs":63,"content":64},{"textAlign":30},[65],{"text":66,"type":34},"When starting this demo, the scene will appear blank until you hover over the Models dropdown. From there you can add different models into the scene.","align-left","copy",true,{"_uid":71,"body":72,"alignment":67,"component":68,"is_full_width":69},"417764ff-e6fc-4fba-a853-ca6cbde1cba2",{"type":24,"content":73},[74,81],{"type":27,"attrs":75,"content":76},{"level":29,"textAlign":30},[77],{"text":78,"type":34,"marks":79},"How It Was Implemented",[80],{"type":37},{"type":82,"content":83},"bullet_list",[84,98,110],{"type":85,"content":86},"list_item",[87],{"type":39,"attrs":88,"content":89},{"textAlign":30},[90,92],{"text":91,"type":34},"Initialize the ",{"text":93,"type":34,"marks":94},"WebViewer",[95],{"type":48,"attrs":96},{"href":97,"uuid":30,"anchor":30,"target":30,"linktype":51},"https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/Communicator.WebViewer.html?highlight=new%20Communicator.WebViewer#constructor",{"type":85,"content":99},[100],{"type":39,"attrs":101,"content":102},{"textAlign":30},[103,105],{"text":104,"type":34},"Start the ",{"text":93,"type":34,"marks":106},[107],{"type":48,"attrs":108},{"href":109,"uuid":30,"anchor":30,"target":30,"linktype":51},"https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/Communicator.WebViewer.html?highlight=new%20Communicator.WebViewer#Communicator.Communicator.WebViewer.start",{"type":85,"content":111},[112],{"type":39,"attrs":113,"content":114},{"textAlign":30},[115,117],{"text":116,"type":34},"Load requested model using ",{"text":118,"type":34,"marks":119},"viewer.getModel().loadSubtreeFromModel",[120],{"type":48,"attrs":121},{"href":122,"uuid":30,"anchor":30,"target":30,"linktype":51},"https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/Communicator.Model.html?highlight=loadSubtreeFromModel#loadsubtreefrommodel",{"_uid":124,"body":125,"alignment":67,"component":68,"is_full_width":69},"a13c3392-16a2-48a4-97b5-7282a80b8ece",{"type":24,"content":126},[127],{"type":27,"attrs":128,"content":129},{"level":29,"textAlign":30},[130],{"text":131,"type":34,"marks":132},"How to Use (Demo Walkthrough Video)",[133],{"type":37},{"gap":16,"_uid":135,"align":16,"count":18,"width":136,"columns":137,"component":144,"remove_padding":69},"4856b2cc-b527-484c-b518-b636cf85bc1b","width-small",[138],{"_uid":139,"video":140,"is_full":141,"platform":142,"component":143,"aspect_ratio":16},"efea74d8-b9a4-4800-9a56-a813759e27f9","uBxPSby6CmA",false,"youtube","element-video","columns",{"_uid":146,"body":147,"alignment":67,"component":68,"is_full_width":69},"4528fbe7-0d6e-4536-81b4-4891791b9c17",{"type":24,"content":148},[149,156,177],{"type":27,"attrs":150,"content":151},{"level":29,"textAlign":30},[152],{"text":153,"type":34,"marks":154},"Explore HOOPS Visualise for Web",[155],{"type":37},{"type":39,"attrs":157,"content":158},{"textAlign":30},[159,163,173],{"text":160,"type":34,"marks":161},"This demo was created using ",[162],{"type":37},{"text":164,"type":34,"marks":165},"HOOPS Visualize for Web",[166,172],{"type":48,"attrs":167},{"href":168,"uuid":169,"anchor":30,"target":170,"linktype":171},"/developers/products/hoops-visualize","b5115ad7-8d04-4a41-ae62-0680605c897d","_self","story",{"type":37},{"text":174,"type":34,"marks":175}," (formerly HOOPS Communicator).",[176],{"type":37},{"type":82,"content":178},[179,194,208,221],{"type":85,"content":180},[181],{"type":39,"attrs":182,"content":183},{"textAlign":30},[184,186,192],{"text":185,"type":34},"Reference the HOOPS Visualize for Web (formerly HOOPS Communicator) ",{"text":187,"type":34,"marks":188},"Documentation",[189],{"type":48,"attrs":190},{"href":191,"uuid":30,"anchor":30,"target":30,"linktype":51},"https://docs.techsoft3d.com/communicator/latest/",{"text":193,"type":34},".",{"type":85,"content":195},[196],{"type":39,"attrs":197,"content":198},{"textAlign":30},[199,201,207],{"text":200,"type":34},"Sign up for a free ",{"text":202,"type":34,"marks":203},"evaluation",[204],{"type":48,"attrs":205},{"href":206,"uuid":30,"anchor":30,"target":30,"linktype":51},"https://manage.techsoft3d.com/signup?product=communicator",{"text":193,"type":34},{"type":85,"content":209},[210],{"type":39,"attrs":211,"content":212},{"textAlign":30},[213,215],{"text":214,"type":34},"Jump straight into coding with the ",{"text":216,"type":34,"marks":217},"3D Sandbox",[218],{"type":48,"attrs":219},{"href":220,"uuid":30,"anchor":30,"target":30,"linktype":51},"https://3dsandbox.techsoft3d.com/",{"type":85,"content":222},[223],{"type":39,"attrs":224,"content":225},{"textAlign":30},[226,228],{"text":227,"type":34},"Join our ",{"text":229,"type":34,"marks":230},"Community Forum",[231],{"type":48,"attrs":232},{"href":233,"uuid":30,"anchor":30,"target":30,"linktype":51},"https://forum.techsoft3d.com/",{"_uid":235,"body":236,"alignment":67,"component":68,"is_full_width":69},"d044d050-b8d4-462f-b447-ad857eb3dd00",{"type":24,"content":237},[238,245,257],{"type":27,"attrs":239,"content":240},{"level":29,"textAlign":30},[241],{"text":242,"type":34,"marks":243},"Questions or Feedback?",[244],{"type":37},{"type":39,"attrs":246,"content":247},{"textAlign":30},[248,250,256],{"text":249,"type":34},"We are looking for feedback and how this toolkit can be improved to meet your needs! Please connect in our ",{"text":251,"type":34,"marks":252},"forum",[253],{"type":48,"attrs":254},{"href":233,"uuid":30,"anchor":30,"target":255,"linktype":51},"_blank",{"text":193,"type":34},{"type":39,"attrs":258,"content":259},{"textAlign":30},[260,262,268],{"text":261,"type":34},"You can also sign-up for a 60-day trial of the ",{"text":263,"type":34,"marks":264},"HOOPS Web Platform",[265],{"type":48,"attrs":266},{"href":267,"uuid":30,"anchor":30,"target":255,"linktype":51},"https://www.techsoft3d.com/products/hoops/web-platform",{"text":193,"type":34},{"_uid":270,"messages":271,"component":303,"background":304,"remove_padding":69,"is_verticalized":141},"744ffc7b-e5be-4b1a-97bb-578a922ab6a5",[272],{"_uid":273,"icon":16,"buttons":274,"content":284,"headline":291,"link_url":16,"metadata":298,"component":301,"icon_size":16,"link_label":16,"headline_heading":302},"895c648c-b8c3-4953-a690-6e71dd15bba1",[275],{"_uid":276,"href":16,"color":277,"label":278,"action":279,"new_tab":141,"outline":69,"alignment":16,"component":280,"text_link":141,"destination":281},"3f9e1f1c-9c3b-4ee5-b399-669acab8f58d","light","Subscribe","action-modal","element-button",{"id":16,"url":282,"linktype":51,"fieldtype":283,"cached_url":282},"subscribe","multilink",{"type":24,"content":285},[286],{"type":39,"attrs":287,"content":288},{"textAlign":30},[289],{"text":290,"type":34},"We’ll notify you as soon as new projects are available.",{"type":24,"content":292},[293],{"type":39,"attrs":294,"content":295},{"textAlign":30},[296],{"text":297,"type":34},"Be the first to know about new projects",{"_uid":299,"title":16,"plugin":300,"description":16},"0fa59fa4-a396-48fd-8878-1ce90fb5c07c","meta-fields","element-callout-child","heading-h3","element-callout",{"id":305,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":306,"copyright":16,"fieldtype":307,"meta_data":308,"is_external_url":141},72383172008371,"https://a-us.storyblok.com/f/1023536/1350x901/98f768d3c7/mosiac.jpg","asset",{},{"_uid":310,"body":311,"alignment":67,"component":68,"is_full_width":69},"1a88a65d-c0fb-4d4d-b5cc-e95b1640588e",{"type":24,"content":312},[313],{"type":39,"attrs":314,"content":315},{"textAlign":30},[316,318,324],{"text":317,"type":34},"Need to contact us? Email us at ",{"text":319,"type":34,"marks":320},"labs@techsoft3d.com",[321],{"type":48,"attrs":322},{"href":319,"uuid":30,"anchor":30,"target":170,"linktype":323},"email",{"text":193,"type":34},{"id":282,"_uid":326,"items":327,"component":333},"ca556064-0fa5-4110-8395-86e3f005ea32",[328],{"id":329,"_uid":330,"component":331,"business_unit":332},"dbdcd35d-8954-4b0d-9902-999e4cd25928","f78173e1-09c9-45b4-92d3-445b190c5ada","hubspot-form","toolkits","modal","2023-06-16 00:00",[336],{"_uid":337,"source":338,"component":391},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":339,"created_at":340,"published_at":341,"updated_at":342,"id":343,"uuid":344,"content":345,"slug":382,"full_slug":383,"sort_by_date":30,"position":384,"tag_list":385,"is_startpage":141,"parent_id":386,"meta_data":30,"group_id":387,"first_published_at":388,"release_id":30,"lang":389,"path":30,"alternates":390,"default_full_slug":30,"translated_slugs":30,"_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":346,"items":347,"component":381},"8915070e-32eb-476d-b215-1c92ebdad15c",[348,363],{"_uid":349,"left_nav":16,"messages":350,"component":362,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[351,357],{"_uid":352,"icon":353,"link":354,"target":16,"message":355,"component":356},"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":358,"icon":359,"link":360,"target":16,"message":361,"component":356},"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":364,"menu":365,"component":380,"has_notice":69},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[366,371,374,377],{"url":367,"_uid":368,"label":369,"new_tab":141,"component":370},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","SDKs for Developers","top-menu-child",{"url":367,"_uid":372,"label":373,"new_tab":141,"component":370,"style_as_button":141},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","Apps for Businesses",{"url":367,"_uid":375,"label":376,"new_tab":141,"component":370,"style_as_button":141},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","Company",{"url":367,"_uid":378,"label":379,"new_tab":141,"component":370,"style_as_button":69},"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":393},[394],{"type":39,"attrs":395,"content":396},{"textAlign":30},[397],{"text":398,"type":34},"This HOOPS Visualize for Web (formerly HOOPS Communicator) based demo shows how multiple models can be loaded on demand within the same scene.","Four Models Demo",[401,405,409],{"id":402,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":403,"copyright":16,"fieldtype":307,"meta_data":404},153103553727336,"https://a-us.storyblok.com/f/1023536/1800x1200/d2ce154c11/four-models-demo-1.webp",{},{"id":406,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":407,"copyright":16,"fieldtype":307,"meta_data":408},153103553686375,"https://a-us.storyblok.com/f/1023536/1800x1200/f92c7e5c0e/four-models-demo-2.webp",{},{"id":410,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":411,"copyright":16,"fieldtype":307,"meta_data":412},153103553739625,"https://a-us.storyblok.com/f/1023536/1800x1200/c46bb6c439/four-models-demo-3.webp",{},[414],"hoopsVisualize",{"_uid":416,"title":417,"plugin":300,"description":418},"5aba1799-50ee-47be-bd2d-7565e80da391","Four Models Demo | Tech Soft 3D Labs","This HOOPS Visualize for Web based demo shows how multiple models can be loaded on demand within the same scene.","lab",{"id":16,"url":421,"linktype":51,"fieldtype":283,"cached_url":421},"https://four-models-docker.techsoft3d.com/",{"id":423,"alt":424,"name":16,"focus":16,"title":425,"source":16,"filename":426,"copyright":16,"fieldtype":307,"meta_data":427,"is_external_url":141},153102770641766,"Four CAD models from a 'four models' HOOPS web viewer demo","Four CAD Models","https://a-us.storyblok.com/f/1023536/447x298/a2607531eb/four-models-demo.webp",{"alt":424,"title":425,"source":16,"copyright":16},{"id":16,"url":429,"linktype":51,"fieldtype":283,"cached_url":429},"https://github.com/techsoft3d/four-models-docker"," Friday, June 16, 2023",{"id":423,"alt":424,"name":16,"focus":16,"title":425,"source":16,"filename":426,"copyright":16,"fieldtype":307,"meta_data":432,"is_external_url":141},{"alt":424,"title":425,"source":16,"copyright":16},"four-models","developers/labs/four-models",0,[],99359039112762,"4b361977-c914-497a-978f-5152136684af","2026-04-03T18:44:17.203Z",[],1776956007,[443],{"name":339,"created_at":340,"published_at":341,"updated_at":342,"id":343,"uuid":344,"content":444,"slug":382,"full_slug":383,"sort_by_date":30,"position":384,"tag_list":456,"is_startpage":141,"parent_id":386,"meta_data":30,"group_id":387,"first_published_at":388,"release_id":30,"lang":389,"path":30,"alternates":457,"default_full_slug":30,"translated_slugs":30},{"_uid":346,"items":445,"component":381},[446,450],{"_uid":349,"left_nav":16,"messages":447,"component":362,"right_nav":16},[448,449],{"_uid":352,"icon":353,"link":354,"target":16,"message":355,"component":356},{"_uid":358,"icon":359,"link":360,"target":16,"message":361,"component":356},{"_uid":364,"menu":451,"component":380,"has_notice":69},[452,453,454,455],{"url":367,"_uid":368,"label":369,"new_tab":141,"component":370},{"url":367,"_uid":372,"label":373,"new_tab":141,"component":370,"style_as_button":141},{"url":367,"_uid":375,"label":376,"new_tab":141,"component":370,"style_as_button":141},{"url":367,"_uid":378,"label":379,"new_tab":141,"component":370,"style_as_button":69},[],[],[],{"cache-control":460,"connection":461,"content-encoding":462,"content-type":463,"date":464,"etag":465,"referrer-policy":466,"sb-be-version":467,"server":468,"strict-transport-security":469,"transfer-encoding":470,"vary":471,"via":472,"x-amz-cf-id":473,"x-amz-cf-pop":474,"x-cache":475,"x-content-type-options":476,"x-frame-options":477,"x-permitted-cross-domain-policies":478,"x-request-id":479,"x-runtime":480,"x-xss-protection":481},"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:05 GMT","W/\"9d1a7728fadb80ea02f2a0181e716649\"","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)","MPxexOoMPy3VRIlIIByWTUDK7DTsSF5O3o6R6FMTn5DhDOYKpqGydw==","CMH68-P3","Miss from cloudfront","nosniff","SAMEORIGIN","none","e9ba14b7-77c7-4ad8-8fb8-bac42660b7f4","0.106457","0",1776956045378]