Logo

Built with HOOPS Toolkits

← Back to Projects

Minimal Web Viewer

The HOOPS Web Platform uses HOOPS Exchange for CAD data access and HOOPS Communicator for 3D web visualization. With just a few lines of HTML, a developer can add 3d content to any website. Here's a minimal implementation of 3D data being loaded into the HOOPS Web Viewer and an explaination of how it's done.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/techsoft3d/hoops-web-viewer/hoops_web_viewer.js"></script>
    <script type="text/javascript">
    window.onload = function () {
      viewer = new Communicator.WebViewer({
        endpointUri: "https://innovation-lab-downloads.s3-us-west-amazonaws.com/microengine.scs",
        containerId: "content"
      });
      viewer.start();
    }        
    </script>
</head>
<body>
  <div id="content"></div>
</body>
</html>

The Communicator 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.

Where did the data come from? HOOPS Communicator's CAD Converter, which relies on HOOPS Exchange to quickly read CAD files, converted a Catia V5 CAD assembly a lightweight, streamable SCS file. The SCS file is saved to a public AWS S3 bucket for easy access.

Try it:

  • Download project
  • Load minimal.html and load into a web browser

For a more thorough discussion of this implemenation and how to build upon it check out HOOPS Communicator Getting Started Guide.

 

Last Updated: March 2nd 2020
Project Size: 0.5 KB

Experimental Project

No Official Support

Related Projects

Electron Viewer

Cloud Modeler

IoT Demo

Copyright © 2021 Tech Soft 3D. All Rights Reserved. Built by your friends at Tech Soft 3D

Contact Us: e-mail