Basic Setup

Required libraries

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

  • hoops_web_viewer.mjs contains the core functionality of the HOOPS Web Viewer, and has dependencies on engine-wasm.js and engine.wasm. These should be placed in the same directory as hoops_web_viewer.mjs. The HOOPS Web Viewer component will attempt to load the most optimal version of the graphics engine based on browser capabilities.

  • For faster startup time and to prevent a warning in the console, ensure that your HTTP server serves .wasm files with the application/wasm MIME type. This may require additional configuration on your server.

  • A file called hoops_web_viewer_monolith.mjs is also available. This file is a standalone library and does not require additional files or dependencies to run the HOOPS Web Viewer, but it only contains the asm.js engine and isn’t compatible with WebAssembly.

  • There are several other files in this directory which are related to the standard HOOPS Web Viewer UI and the integration with the HOOPS Server component. Those are not required for integrating the HOOPS Web Viewer into your own web application.

Note

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.html and 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="module">
  import * as Communicator from "./js/hoops/hoops-web-viewer.mjs";

  // other initialization (see step 5, below)

</script>

  1. 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.

  1. Creating and starting the WebViewer object.

        const hwv = new Communicator.WebViewer({
			containerId: "myContainer",
			enginePath: "/js/hoops",
			endpointUri: "./data/Small_House.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, as well as the enginePath which points to the location of engine.esm.js. 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. However, 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 list of parameters is available in the Reference Manual. Some of them will also be discussed in the next chapter and throughout the rest of this Programming Guide.

  1. 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.

  1. Interacting with the HOOPS Web Viewer

hwv.selectPart(1);
hwv.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",
                        enginePath: "/js/hoops",
                });
                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.