A Developer’s Quickstart Guide: Building a 3D CAD Model Viewer with HOOPS Communicator
If you’ve ever needed to view complex CAD files right in the browser, you know how challenging it can be to get the right toolset in place. That’s where HOOPS Communicator comes in — it’s a powerful SDK that makes it surprisingly easy to build robust 3D web viewers for CAD and engineering data.
In this guide, we’ll walk through how you can quickly get up and running with HOOPS Communicator. We’ll cover how to load a CAD model, set up the web viewer, and even interact with the 3D geometry, all with clear, hands-on code samples.
What is a HOOPS Communicator?
The HOOPS Communicator SDK provides software developers with a powerful JavaScript API, enabling teams to incorporate 2D and 3D CAD viewing easily and interaction features into their web applications across all major browsers. Whether you’re developing a web app for Additive Manufacturing, AEC/BIM, PLM, MaaS, Metrology, CAM, or CAE, the HOOPS Communicator graphics engine allows you to quickly integrate 3D graphics. It efficiently converts CAD files into lightweight formats, ensuring smooth, hardware-accelerated 3D rendering in the browser.
Prerequisites
Before we get our hands dirty, make sure you have a few things ready:
- HOOPS Communicator SDK: Download it from the Tech Soft 3D website.
- Node.js (or another server runtime).
- A CAD model in a supported format — STEP, IGES, or SolidWorks files is great.
- Basic HTML, JavaScript, and command-line knowledge.
The Basic Architecture
HOOPS Communicator has two parts:
- The server component converts CAD files and streams them.
- The client (JavaScript API) that runs in the browser and handles rendering, UI, and interaction.
You’ll run the server locally (or deploy it to the cloud) and connect to it from your web app.
Step-by-Step Guide to Building a 3D Viewer
Step 1: Convert Your CAD Model
First, you need to convert your CAD file into the SC (stream cache) format that HOOPS Communicator uses.
Run the hoops_converter tool that comes with the SDK:
./hoops_converter --input /path/to/your/model.step --output /path/to/output/directory/This will generate .scs files — these are optimized for fast streaming.
Step 2: Set Up the Server
Next, let’s spin up the HOOPS Communicator server. Here’s a simple Node.js server example:
Create a server.js file:
const express = require('express');
const path = require('path');
const app = express();
const PORT = 11180; // Default port for HOOPS Communicator
// Serve static files
app.use(express.static(path.join(__dirname, 'public')));
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});Make sure your public folder contains your converted .scs model and the HOOPS Communicator client files.
Run the server with:
node server.js
Step 3: Create the Web Viewer
Now, the fun part — let’s display the model on a web page.
Inside your public folder, create an index.html:
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HOOPS Communicator Quickstart</title>
<script src="hoops_web_viewer.js"></script>
</head>
<body>
<div id="viewerContainer" style="width: 100%; height: 100vh;"></div>
<script>
const viewer = new Communicator.WebViewer({
containerId: "viewerContainer",
endpointUri: "http://localhost:11180/",
});
viewer.start();
viewer.setCallbacks({
sceneReady: () => {
viewer.loadModel("model.scs");
}
});
</script>
</body>
</html>Here’s what’s happening:
- You create a WebViewer instance and specify the location of your server (endpointUri).
- Once the scene is ready, you load your .scs file.
When you open this page in your browser, you should see your CAD model rendered in glorious 3D!
Step 4: Loading and Converting Your CAD Models
To view your own CAD files, first convert them to HOOPS Communicator’s .scs format using the provided conversion tools (part of the SDK):
# Example conversion command for a .step file
./converter.sh mymodel.step --output mymodel.scsPlace your .scs model into the server’s /scs/ directory, then update the model path in your JavaScript init as shown above.
Dynamically Loading Models
You might want to load models dynamically based on user input. Here’s how you can do that:
function loadModel(modelName) {
viewer.model.clear().then(() => {
let nodeId = viewer.model.createNode(null, modelName);
viewer.model.loadSubtreeFromScsFile(nodeId, "/scs/" + modelName + ".scs")
.then(() => {
viewer.view.fitWorld();
});
});
}
// Example usage
loadModel("my_new_model");This allows seamless swapping or adding of models in the web viewer—ideal for product configurators or inventory apps.
Step 5: Interacting with 3D Geometry
HOOPS Web Viewer provides a robust API for interacting with the scene, selecting components, highlighting, and more. Here’s a snippet for selecting objects and changing their appearance:
viewer.setSelectionMode(Communicator.SelectionMode.Face);
viewer.selectionManager.setHighlightColor(new Communicator.Color(255, 180, 0));
viewer.setCallbacks({
selection: function(event) {
if (event.isNewSelection) {
let selectedNodeId = event.getSelection().getNodeId();
// You can now work with this node: fetch metadata, modify style, etc.
console.log("Selected node:", selectedNodeId);
}
}
});Add markups, section planes, or metadata displays with equally simple API calls using the rich documentation and tutorials in the SDK.
viewer.view.setBackgroundColor(
new Communicator.Color(33, 33, 33),
new Communicator.Color(175, 175, 175)
);
viewer.view.getNavCube().enable();
viewer.view.getNavCube().setAnchor(Communicator.OverlayAnchor.LowerRightCorner);You will find even more advanced customization options in the full HOOPS API docs.
Wrapping Up
The HOOPS Communicator SDK is packed with advanced capabilities like streaming huge assemblies, custom shaders, and tight integration with other HOOPS products.
But for many use cases, what you’ve built here is all you need to get started: a fast, reliable way to view and interact with CAD data right in your browser.
We hope this guide helps you kick off your journey with HOOPS Communicator. If you run into questions or want to learn more about adding 3D visualization to your engineering workflows, feel free to reach out to the team here at ProtoTech Solutions.
Looking to build a custom CAD viewer or need help with 3D visualization? Contact ProtoTech Solutions to turn your ideas into reality!
