# NavCube and AxisTriad Appearance Customization

**URL:** <https://forum.techsoft3d.com/t/navcube-and-axistriad-appearance-customization/4528>\
**Category:** HOOPS Visualize Web\
**Tags:** how-to\
**Created:** [April 8, 2025, 2:04pm UTC](https://forum.techsoft3d.com/t/navcube-and-axistriad-appearance-customization/4528 "2025-04-08T14:04:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![praful.bharate](https://avatars.discourse-cdn.com/v4/letter/p/e68b1a/32.png) [@praful.bharate](https://forum.techsoft3d.com/u/praful.bharate)\
**Post date:** [April 8, 2025, 2:04pm UTC](https://forum.techsoft3d.com/t/navcube-and-axistriad-appearance-customization/4528/1 "2025-04-08T14:04:25Z")

</div>

Is there a built-in way to **customize the appearance** of the NavCube and AxisTriad, such as **changing their colors, transparency, labels, or style**?

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [April 8, 2025, 2:19pm UTC](https://forum.techsoft3d.com/t/navcube-and-axistriad-appearance-customization/4528/2 "2025-04-08T14:19:04Z")

</div>

Hello @praful.bharate,

There is not an interface to customize the appearance of the AxisTriad. With respect to the NavCube customization, there is a proof-of-concept implementation based on the NavCube source code. Please refer to this previous post:

> [@Source Code for NavCube Operator](https://forum.techsoft3d.com/t/source-code-for-navcube-operator/709):
>
> 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 [nav…](https://docs.techsoft3d.com/communicator/latest/build/api_ref/typedoc/classes/communicator.navcube.html)

Thanks,  
Tino

---

<div class="post-metadata">

**Author:** ![praful.bharate](https://avatars.discourse-cdn.com/v4/letter/p/e68b1a/32.png) [@praful.bharate](https://forum.techsoft3d.com/u/praful.bharate)\
**Post date:** [April 9, 2025, 5:49am UTC](https://forum.techsoft3d.com/t/navcube-and-axistriad-appearance-customization/4528/3 "2025-04-09T05:49:16Z")

</div>

Hi @tino ,  
Thank you for sharing the details. I have reviewed the POC and wanted to ask if it’s possible to provide the TypeScript files instead of the JavaScript version for `CustomNavCube.js`. Additionally, could you confirm whether this code is compatible with the latest version of HOOPS Communicator?

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [April 9, 2025, 1:27pm UTC](https://forum.techsoft3d.com/t/navcube-and-axistriad-appearance-customization/4528/4 "2025-04-09T13:27:51Z")

</div>

Hello @praful.bharate,

A TypeScript version is not available for `CustomNavCube.js`.

Only minor changes are required to the JavaScript file are required in order to use it for recent Communicator versions:

- `Communicator.OverlayUnitPoint` becomes `Communicator.Overlay.OverlayUnitPoint`
- Add `import * as Communicator from "./your_directory_to/hoops-web-viewer.mjs";`

Thanks,  
Tino

---

<div class="post-metadata">

**Author:** ![praful.bharate](https://avatars.discourse-cdn.com/v4/letter/p/e68b1a/32.png) [@praful.bharate](https://forum.techsoft3d.com/u/praful.bharate)\
**Post date:** [April 11, 2025, 6:40am UTC](https://forum.techsoft3d.com/t/navcube-and-axistriad-appearance-customization/4528/5 "2025-04-11T06:40:35Z")

</div>

Thankyou @tino for the suggestions.