Source Code for NavCube Operator

While the NavCube class provided by HOOPS Communicator is a very useful tool to intuitively orient the camera, it is not very customizable via the official API. It is also not part of the UI components we have made available in source code form in the package. There are plans to address this in a future version of the product but for now here is a “standalone” version of the operator with additional customization options.


Usage:

The CustomNavCube has the same API as the build-in navcube. In addition the new class provides an init function to set various customization options. If you feel adventurous you can of course also dive into the source code and make additional modifications.

Here is sample code that shows how to use this new class in your application. This code should be executed after the modelStructureReady() callback has fired.


//disable the existing navcube (if active)
hwv.view.getNavCube().disable(); 

//create a new instance of the custom navcube class
var navcube = new CustomNavCube(hwv);

//initialize the navcube with custom values. All parameters are optional but 
//calling this functions is required before enabling the navcube.
navcube.init(["Links","Rechts","Vorne","Hinten","Unten","Oben"],Communicator.Color.red(),
Communicator.Color.white(),Communicator.Color.yellow(),Communicator.Color.blue());

//register the custom navcube operator for navcube interaction
var myop = new CustomNavCubeOperator(hwv,navcube);
var nhandle = hwv.operatorManager.registerCustomOperator(myop);
hwv.operatorManager.push(nhandle);

//enable the custom navcube
navcube.enable();

This is the signature for the new init function:

 
// Initializes the operator. All parameters are optional
// @param texts The texts used for the 6 sides of the cube as an array of strings. Default is  ["LEFT","RIGHT","FRONT","BACK","BOTTOM","TOP"]
// @param textColor The color of the text. Default is 128,128,128
// @param backgroundColor The color of the background. Default is 128,128,128
// @param selectionFaceColor The color of the selected face. Default is 76,186,240
// @param outlineColor The color of the outline. Default is 17,94,133
async init(texts, textColor, backgroundColor, selectionFaceColor, outlineColor);

Below is the source code for the new class. It is not part of the official HOOPS Communicator product and and provided “as-is”.

If you have any questions or comments, found a bug or have suggestions for additional features or improvements, please don’t hesitate to post about it here in the forum.

CustomNavCube.js (60.8 KB)

I have updated the operator to now also support customization of the size of the cube. See below for the updated init function signature. Also it is now possible to call the init functions multiple times to change the various customization options on-the-fly.

// Initializes the operator. All parameters are optional
// @param texts The texts used for the 6 sides of the cube as an array of strings. Default is  ["LEFT","RIGHT","FRONT","BACK","BOTTOM","TOP"]
// @param textColor The color of the text. Default is 128,128,128
// @param backgroundColor The color of the background. Default is 128,128,128
// @param selectionFaceColor The color of the selected face. Default is 76,186,240
// @param outlineColor The color of the outline. Default is 17,94,133
// @param viewportSize. The size of the viewport. Default is 200
async init(texts, textColor, backgroundColor, selectionFaceColor, outlineColor, viewportSize)

CustomNavCube.js (61.5 KB)