[{"data":1,"prerenderedAt":389},["ShallowReactive",2],{"{\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/minimal-web-viewer":3},{"data":4,"headers":366},{"story":5,"cv":348,"rels":349,"links":365},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":340,"full_slug":341,"sort_by_date":30,"position":342,"tag_list":343,"is_startpage":157,"parent_id":344,"meta_data":30,"group_id":345,"first_published_at":346,"release_id":30,"lang":304,"path":30,"alternates":347,"default_full_slug":30,"translated_slugs":30},"Minimal Web Viewer","2026-03-27T16:47:31.453Z","2026-04-23T12:28:55.371Z","2026-04-23T12:28:55.409Z",159500089204480,"56bbad4b-8a2f-4d13-bbce-a3656a977a7a",{"_uid":13,"body":14,"date":249,"fold":250,"intro":307,"title":6,"gallery":320,"category":321,"metadata":324,"component":328,"demo_link":329,"thumbnail":330,"github_link":336,"last_updated":337,"open_graph_image":338,"include_open_graph":51,"block_search_engines":157},"f50d366a-d67c-4a10-86a7-4b5fc5c9f54e",[15,240],{"gap":16,"_uid":17,"align":16,"count":18,"width":19,"columns":20,"component":239,"remove_padding":51},"","f6f97b29-f4c1-4242-863b-a4543a5a2bbc","column-one","width-full",[21,52,56,111,146,187,223],{"_uid":22,"body":23,"alignment":49,"component":50,"is_full_width":51},"152b4bc8-9953-4de6-97d6-3ca41c22cb62",{"type":24,"content":25},"doc",[26,38,44],{"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],{"text":43,"type":34},"With just a few lines of HTML, a developer can add 3D content to any website.",{"type":39,"attrs":45,"content":46},{"textAlign":30},[47],{"text":48,"type":34},"Here's a minimal implementation of 3D data being loaded into the HOOPS Web Viewer and an explanation of how it's done.","align-left","copy",true,{"_uid":53,"code":54,"component":55},"5a7eb982-8a51-4f0e-be2e-7e1cd9804968","\u003Cdiv style=\"height: 0; margin: 20px 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative;\">\n\u003Ciframe style=\"height: 100%;left: 0; position: absolute; top: 0; width: 100%;\" src=\"https://innovation-lab-downloads.s3-us-west-2.amazonaws.com/minimal.html\">\u003C/iframe>\n\u003C/div>","code",{"_uid":57,"body":58,"alignment":49,"component":50,"is_full_width":51},"f2adecbd-ef0e-41ef-83ba-15419b51ba2f",{"type":24,"content":59},[60,67,84],{"type":27,"attrs":61,"content":62},{"level":29,"textAlign":30},[63],{"text":64,"type":34,"marks":65},"How It Was Implemented",[66],{"type":37},{"type":39,"attrs":68,"content":69},{"textAlign":30},[70,72,82],{"text":71,"type":34},"The ",{"text":73,"type":34,"marks":74},"HOOPS Visualize",[75],{"type":76,"attrs":77},"link",{"href":78,"uuid":79,"anchor":30,"target":80,"linktype":81},"/developers/products/hoops-visualize","b5115ad7-8d04-4a41-ae62-0680605c897d","_self","story",{"text":83,"type":34}," Web Viewer is imported in a script tag. The Web Viewer is created with two arguments. The endpointUri shows where to load 3D data from. The containerId is an HTML element id where the Web Viewer should render to. The Web Viewer is started, and that's all there is to it.",{"type":39,"attrs":85,"content":86},{"textAlign":30},[87,91,93,101,103,109],{"text":88,"type":34,"marks":89},"Where did the data come from? ",[90],{"type":37},{"text":92,"type":34},"HOOPS Visualize's ",{"text":94,"type":34,"marks":95},"CAD Converter",[96],{"type":76,"attrs":97},{"href":98,"uuid":30,"anchor":30,"target":99,"linktype":100},"https://docs.techsoft3d.com/hoops/visualize-web/prog_guide/data_import/cad_conversion/converter_app/converter-application-overview.html","_blank","url",{"text":102,"type":34},", which relies on ",{"text":104,"type":34,"marks":105},"HOOPS Exchange",[106],{"type":76,"attrs":107},{"href":108,"uuid":30,"anchor":30,"target":80,"linktype":100},"https://www.techsoft3d.com/developers/products/hoops-exchange/",{"text":110,"type":34}," to quickly read CAD files, converted a CATIA V5 CAD assembly into a lightweight, streamable SCS file. The SCS file is saved to a public AWS S3 bucket for easy access.",{"_uid":112,"body":113,"alignment":49,"component":50,"is_full_width":51},"67c4014c-c9ee-42e5-8407-c5c49ed9eed8",{"type":24,"content":114},[115,122,135],{"type":27,"attrs":116,"content":117},{"level":29,"textAlign":30},[118],{"text":119,"type":34,"marks":120},"Try It For Yourself",[121],{"type":37},{"type":39,"attrs":123,"content":124},{"textAlign":30},[125,127,133],{"text":126,"type":34},"For a deeper look at this implementation and how to extend it, see the ",{"text":128,"type":34,"marks":129},"building a basic application",[130],{"type":76,"attrs":131},{"href":132,"uuid":30,"anchor":30,"target":99,"linktype":100},"https://docs.techsoft3d.com/hoops/visualize-web/tutorials/basic-app/introduction.html",{"text":134,"type":34}," guide for HOOPS Visualize for Web.",{"type":39,"attrs":136,"content":137},{"textAlign":30},[138,140,144],{"text":139,"type":34},"It introduces the core concepts of developing a web application with ",{"text":73,"type":34,"marks":141},[142],{"type":76,"attrs":143},{"href":78,"uuid":79,"anchor":30,"target":99,"linktype":81},{"text":145,"type":34},". By the end, you’ll have a solid foundation to start integrating it into your own projects.",{"_uid":147,"messages":148,"component":181,"background":182,"remove_padding":51,"is_verticalized":157},"f964a1a0-8c11-4253-9374-60fac4cd3a0a",[149],{"_uid":150,"icon":16,"buttons":151,"content":162,"headline":169,"link_url":16,"metadata":176,"component":179,"icon_size":16,"link_label":16,"headline_heading":180},"8db5e947-ff83-4bde-b44c-c230d43ec62e",[152],{"_uid":153,"href":16,"color":154,"label":155,"action":156,"new_tab":157,"outline":51,"alignment":16,"component":158,"text_link":157,"destination":159},"ff9677fc-f285-40b3-ab6f-3fa2e32c697e","light","Subscribe","action-modal",false,"element-button",{"id":16,"url":160,"linktype":100,"fieldtype":161,"cached_url":160},"subscribe","multilink",{"type":24,"content":163},[164],{"type":39,"attrs":165,"content":166},{"textAlign":30},[167],{"text":168,"type":34},"We’ll notify you as soon as new projects are available.",{"type":24,"content":170},[171],{"type":39,"attrs":172,"content":173},{"textAlign":30},[174],{"text":175,"type":34},"Be the first to know about new projects",{"_uid":177,"title":16,"plugin":178,"description":16},"0fa59fa4-a396-48fd-8878-1ce90fb5c07c","meta-fields","element-callout-child","heading-h3","element-callout",{"id":183,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":184,"copyright":16,"fieldtype":185,"meta_data":186,"is_external_url":157},72383172008371,"https://a-us.storyblok.com/f/1023536/1350x901/98f768d3c7/mosiac.jpg","asset",{},{"_uid":188,"body":189,"alignment":49,"component":50,"is_full_width":51},"8fdf56ab-b62c-48bf-a5d3-bd005e411480",{"type":24,"content":190},[191,198,211],{"type":27,"attrs":192,"content":193},{"level":29,"textAlign":30},[194],{"text":195,"type":34,"marks":196},"Questions or Feedback?",[197],{"type":37},{"type":39,"attrs":199,"content":200},{"textAlign":30},[201,203,209],{"text":202,"type":34},"We are looking for feedback and how this toolkit can be improved to meet your needs! Please connect in our ",{"text":204,"type":34,"marks":205},"forum",[206],{"type":76,"attrs":207},{"href":208,"uuid":30,"anchor":30,"target":99,"linktype":100},"https://forum.techsoft3d.com/",{"text":210,"type":34},".",{"type":39,"attrs":212,"content":213},{"textAlign":30},[214,216,222],{"text":215,"type":34},"You can also sign-up for a 60-day trial of the ",{"text":217,"type":34,"marks":218},"HOOPS Web Platform",[219],{"type":76,"attrs":220},{"href":221,"uuid":30,"anchor":30,"target":99,"linktype":100},"https://www.techsoft3d.com/products/hoops/web-platform",{"text":210,"type":34},{"_uid":224,"body":225,"alignment":49,"component":50,"is_full_width":51},"99152d4a-552b-453a-90c0-b4b9796888c1",{"type":24,"content":226},[227],{"type":39,"attrs":228,"content":229},{"textAlign":30},[230,232,238],{"text":231,"type":34},"Need to contact us? Email us at ",{"text":233,"type":34,"marks":234},"labs@techsoft3d.com",[235],{"type":76,"attrs":236},{"href":233,"uuid":30,"anchor":30,"target":80,"linktype":237},"email",{"text":210,"type":34},"columns",{"id":160,"_uid":241,"items":242,"component":248},"ca556064-0fa5-4110-8395-86e3f005ea32",[243],{"id":244,"_uid":245,"component":246,"business_unit":247},"dbdcd35d-8954-4b0d-9902-999e4cd25928","f78173e1-09c9-45b4-92d3-445b190c5ada","hubspot-form","toolkits","modal","2020-03-02 00:00",[251],{"_uid":252,"source":253,"component":306},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":254,"created_at":255,"published_at":256,"updated_at":257,"id":258,"uuid":259,"content":260,"slug":297,"full_slug":298,"sort_by_date":30,"position":299,"tag_list":300,"is_startpage":157,"parent_id":301,"meta_data":30,"group_id":302,"first_published_at":303,"release_id":30,"lang":304,"path":30,"alternates":305,"default_full_slug":30,"translated_slugs":30,"_stopResolving":51},"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":261,"items":262,"component":296},"8915070e-32eb-476d-b215-1c92ebdad15c",[263,278],{"_uid":264,"left_nav":16,"messages":265,"component":277,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[266,272],{"_uid":267,"icon":268,"link":269,"target":16,"message":270,"component":271},"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":273,"icon":274,"link":275,"target":16,"message":276,"component":271},"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":279,"menu":280,"component":295,"has_notice":51},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[281,286,289,292],{"url":282,"_uid":283,"label":284,"new_tab":157,"component":285},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","SDKs for Developers","top-menu-child",{"url":282,"_uid":287,"label":288,"new_tab":157,"component":285,"style_as_button":157},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","Apps for Businesses",{"url":282,"_uid":290,"label":291,"new_tab":157,"component":285,"style_as_button":157},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","Company",{"url":282,"_uid":293,"label":294,"new_tab":157,"component":285,"style_as_button":51},"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":308},[309],{"type":39,"attrs":310,"content":311},{"textAlign":30},[312,314,318],{"text":313,"type":34},"The HOOPS Web Platform uses HOOPS Exchange for CAD data access and ",{"text":73,"type":34,"marks":315},[316],{"type":76,"attrs":317},{"href":78,"uuid":79,"anchor":30,"target":80,"linktype":81},{"text":319,"type":34}," for Web (formerly HOOPS Communicator) for 3D web visualization.",[],[322,323],"hoopsExchange","hoopsVisualize",{"_uid":325,"title":326,"plugin":178,"description":327},"54a2ef1e-aa5c-4f3b-9b9d-f866451ee8e6","Minimal Web Viewer | Tech Soft 3D Labs","The HOOPS Web Platform uses HOOPS Exchange for CAD data access and HOOPS Visualize for Web (formerly HOOPS Communicator) for 3D web visualization.","lab",{"id":16,"url":16,"linktype":100,"fieldtype":161,"cached_url":16},{"id":331,"alt":332,"name":16,"focus":16,"title":333,"source":16,"filename":334,"copyright":16,"fieldtype":185,"meta_data":335,"is_external_url":157},160806696871751,"A 3D model in a minimal CAD viewer built with HOOPS Visualize.","Minimal CAD Viewer","https://a-us.storyblok.com/f/1023536/1920x1080/e1c17dea97/minimal-cad-viewer.jpg",{"alt":332,"title":333,"source":16,"copyright":16},{"id":16,"url":16,"linktype":100,"fieldtype":161,"cached_url":16},"Monday, March 2, 2020",{"id":331,"alt":332,"name":16,"focus":16,"title":333,"source":16,"filename":334,"copyright":16,"fieldtype":185,"meta_data":339,"is_external_url":157},{"alt":332,"title":333,"source":16,"copyright":16},"minimal-web-viewer","developers/labs/minimal-web-viewer",-200,[],99359039112762,"4a2fa999-84cf-4106-a297-f63b5b104b6f","2026-04-03T18:44:12.259Z",[],1776956007,[350],{"name":254,"created_at":255,"published_at":256,"updated_at":257,"id":258,"uuid":259,"content":351,"slug":297,"full_slug":298,"sort_by_date":30,"position":299,"tag_list":363,"is_startpage":157,"parent_id":301,"meta_data":30,"group_id":302,"first_published_at":303,"release_id":30,"lang":304,"path":30,"alternates":364,"default_full_slug":30,"translated_slugs":30},{"_uid":261,"items":352,"component":296},[353,357],{"_uid":264,"left_nav":16,"messages":354,"component":277,"right_nav":16},[355,356],{"_uid":267,"icon":268,"link":269,"target":16,"message":270,"component":271},{"_uid":273,"icon":274,"link":275,"target":16,"message":276,"component":271},{"_uid":279,"menu":358,"component":295,"has_notice":51},[359,360,361,362],{"url":282,"_uid":283,"label":284,"new_tab":157,"component":285},{"url":282,"_uid":287,"label":288,"new_tab":157,"component":285,"style_as_button":157},{"url":282,"_uid":290,"label":291,"new_tab":157,"component":285,"style_as_button":157},{"url":282,"_uid":293,"label":294,"new_tab":157,"component":285,"style_as_button":51},[],[],[],{"cache-control":367,"connection":368,"content-encoding":369,"content-type":370,"date":371,"etag":372,"referrer-policy":373,"sb-be-version":374,"server":375,"strict-transport-security":376,"transfer-encoding":377,"vary":378,"via":379,"x-amz-cf-id":380,"x-amz-cf-pop":381,"x-cache":382,"x-content-type-options":383,"x-frame-options":384,"x-permitted-cross-domain-policies":385,"x-request-id":386,"x-runtime":387,"x-xss-protection":388},"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:01 GMT","W/\"82caa48dde024a0c2876935b6bf703ef\"","strict-origin-when-cross-origin","5.764.0","nginx/1.29.1","max-age=31536000","chunked","Origin,Accept-Encoding, Origin","1.1 b7a454c5d7e9ad8ba2aca6a02bb25f14.cloudfront.net (CloudFront)","gQOXlSADAMPmhWiKDIS5Feepgc6TPFM-5VBVJqMAREK2eucaXOwBBg==","CMH68-P3","Miss from cloudfront","nosniff","SAMEORIGIN","none","6d732cc4-55ae-4228-b511-37f83d502158","0.038566","0",1776956041563]