Building a Basic Application

Table of Contents

• Project Layout
• Hello Web Viewer
• Custom Operator Basics
• Advanced Operator Concepts
• Interacting with the Model Tree
• Color and Transparency
• Geometry and Texture Creation
• Model Loading and Aggregation
• Connection to the HOOPS Server

This tutorial will walk you through the fundamentals of writing a web application with HOOPS Visualize Web using the Web Components UI kit (@ts3d-hoops/web-viewer-components). After completion of this tutorial, you should have enough understanding of the technology to start integrating HOOPS Visualize Web into your application.

The prerequisite for this tutorial is an understanding of JavaScript/TypeScript development and basic familiarity with npm-based tooling (we use Vite as our dev server/bundler, but any comparable bundler will work). No advanced CAD expertise is required. All examples are client-side and require no server backend except for the last section, which covers the HOOPS Server and streaming.

This tutorial builds up a small application step by step; for a component-by-component reference once you’re past the basics, see Web Components Introduction (the full list of available components and services) and Using the Web Components UI (a self-contained setup walkthrough) in the Programming Guide.

Web Viewer Preview

Double click the Web Viewer canvas to reset the camera position!

Model Structure...

Not Ready

CameraCallback

{
        "position": { "x": 0, "y": 0, "z": 0 },
        "target": { "x": 0, "y": 0, "z": 0 },
        "up": { "x": 0, "y": 0, "z": 0 },
        "width": 0,
        "height": 0,
        "projection": 0,
        "nearLimit": 0.0,
        "className": ""
}