Basic Setup

Required Libraries

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


Details on TypeScript support 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, start start_server.bat as detailed in our Getting Started guide.
  2. Creating an HTML file Create an empty HTML file named index.htmland save it to the web_viewer\src directory. This will be where you 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>
    <style>
        #myContainer{
            width: 640px;
            height:480px;
            position: relative;
        }
    </style>
    <div id="myContainer"></div>
    <script type="text/javascript">
    
    let hwv;
    window.onload = () => {
    //! [load_scs_model]
    hwv = new Communicator.WebViewer({
    containerId: "myContainer",
    endpointUri: "model_data/bnc.scs"
    });
    hwv.start();
    //! [load_scs_model]
    //! [set_callbacks]
    hwv.setCallbacks({
    sceneReady: () => {
    console.log("HOOPS Web Viewer has been initialized.");
    }
    });
    //! [set_callbacks]
    };
    function selectAll() {
    //! [interact_with_viewer]
    hwv.selectPart(1);
    hwv.view.setProjectionMode(Communicator.Projection.Orthographic);
    //! [interact_with_viewer]
    }
    </script>
    <input type="button" onclick="selectAll();" style="right:5px;top:5px;position:absolute;" value="Select All">
    </head>
    <body>
    </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 Building A Basic Application tutorial, which explains the minimal steps to set up a connection to the HOOPS Server and request viewing sessions.