Basic Setup

Required Libraries

The following files are necessary for running the HOOPS Web Viewer:

TypeScript definition files for the HOOPS Web Viewer can be found here.

For more information on the location of these files in your HOOPS Communicator package, consult our Package Description page.

Creating a Basic Application

Getting your application running with the HOOPS Web Viewer directly from the installation can be accomplished in a few straightforward steps:

  1. Starting the HOOPS Server. In the quick_start directory, click on start_server.bat. You can find a lot more information about the HOOPS Server here but for this minimal example we will only be using the built-in web-server and not the streaming and server-side rendering capabilities of the HOOPS Server.
  2. Creating an HTML file. Create an empty JS file and save it to the web_viewer\src directory. This will be where you'll add the HTML, CSS, and Javascript for interacting with the HOOPS Web Viewer. Once the server has been started, you'll be able to view this HTML file in a browser by navigating to http://localhost:11180/myfile.html.
  3. Including the HOOPS Web Viewer JavaScript library.

    <script type="text/javascript" src="hoops_web_viewer.js"></script>

  4. Setting up a container.

    <style>
    #myContainer{
    width: 640px;
    height:480px;
    position: relative;
    }
    </style>
    <div id="myContainer"></div>

    This is the place on the page where you would like HOOPS Web Viewer to render into. A single <div> tag is enough, anything below it will be automatically created by the HOOPS Web Viewer as children of this element.

  5. Creating and starting the WebViewer object.

    hwv = new Communicator.WebViewer({
    containerId: "myContainer",
    endpointUri: "model_data/bnc.scs"
    });
    hwv.start();

    At a minimum you need to pass the name of the #div element we just created to the containerId parameter of the WebViewer constructor. If you are leveraging the streaming capabilities of the HOOPS Server you would specify the uri of the Stream Cache Server with the endpointUri parameter but in this case we are just loading an SCS file that doesn't require streaming from the server. In the Communicator package see the \content\model_data directory for the location of this file (the built-in webserver of the HOOPS Server is configured to serve files from this directory).

    A full listing of parameters is available in the Reference Manual here, some of them will also be discussed in the next chapter and throughout the rest of this Programming Guide.

  6. Listening for events.

    hwv.setCallbacks({
    sceneReady: () => {
    console.log("HOOPS Web Viewer has been initialized.");
    }
    });

    We discuss HOOPS Web Viewer event handling in an upcoming chapter.

  7. Interacting with the HOOPS Web Viewer

    hcw.selectPart(1);
    hcw.view.setProjectionMode(Communicator.Projection.Orthographic);

    Once the scene is ready, you can invoke methods on it. Please refer to the API Reference for a complete list of all API methods.

    If you'd like to load one of your own models into the viewer, simply drag them onto the easy_convert command-line utility. This utility will convert your file to several different formats, including SCS.

    Below is the full HTML source for this example:

    <html>
    <head>
    <script type="text/javascript" src="js/hoops_web_viewer.js"></script>
    </head>
    <body>
    <style>
        #myContainer{
            width: 640px;
            height:480px;
            position: relative;
        }
    </style>
    <div id="myContainer"></div>
    <script type="text/javascript">
    

    let hwv;
    window.onload = () => {
    hwv = new Communicator.WebViewer({
    containerId: "myContainer",
    endpointUri: "model_data/bnc.scs"
    });
    hwv.start();
    hwv.setCallbacks({
    sceneReady: () => {
    console.log("HOOPS Web Viewer has been initialized.");
    }
    });
    };
    function selectAll() {
    hwv.selectPart(1);
    hwv.view.setProjectionMode(Communicator.Projection.Orthographic);
    }
    </script>
    <input type="button" onclick="selectAll();" style="right:5px;top:5px;position:absolute;" value="Select All">
    </body>
    </html>
    

The steps above are all that is required for a bare-bones application that can load SCS files into your application using the HOOPS Web Viewer, but this setup won't give you access to the streaming capabilities of HC. For a quick introduction on how to communicate with the HOOPS Server, we recommend the Connection to the HOOPS Server section of the Getting Started guide, which explains the minimal steps to set up a connection to the HOOPS Server and request viewing sessions.

HC also ships with several helper classes that make it easy to connect to the HOOPS Server in streaming mode on a local machine and set the various options directly via the URL. We have also provided detailed step-by-step instructions on setting up a minimal application utilizing the HOOPS Web Viewer in your own environment in the Getting Started guide.