HOOPS Communicator 3D Sandbox

As a software developer, there are many times when you would like to quickly prototype an idea, test a particular functionality, or learn how to use a feature that you saw mentioned in the documentation. Often, this requires setting up a test project testing within an existing project. In the case of new functionality, you might also have to download a new SDK, upgrade, and pray that nothing breaks.

Interactive code sandboxes are certainly not new, but it’s a concept that lends itself well to HOOPS Communicator. The idea is to provide an easy way for developers to quickly prototype without needing to jump through many of the hoops (no pun intended) involved with running a project locally. Because of this, we decided to create the HOOPS Communicator 3D Sandbox. By navigating to a URL, you can begin prototyping your software concepts with no downloads or project setup required.

The HC 3D Sandbox is built with the same editor library that Visual Studio Code is based on and provides similar features found in its IDE. We have included many advanced editing functions, and auto-complete for Javascript and the HOOPS Communicator API. The text editor is right next to the HC WebViewer window so that any changes made to your code can be easily run and visualized on the right-hand side of the page. In addition, we provide a handful of code samples, with more coming over time.

We wanted to make a tool that felt familiar to developers. We initially looked at Code Mirror but then settled on the Monaco Editor instead which is used in VS Code. This was an excellent choice for because it made it really easy to implement auto-complete based on the HOOPS Communicator typescript definitions and other features. It is also well documented with tons of examples. From there, getting our project up and running was relatively straightforward. The offline version of the 3D sandbox is available on GitHub. (https://github.com/techsoft3d/HOOPS-Communicator-Live-Code-Editor). After this initial offline implementation, we added a server backend for saving and versioning of code-snippets and related data in a mongoDB database. Finally, everything is running on an automatically backed-up Amazon EC2 instance with additional storage via Amazon S3.

We have many additional features that we hope to add to this project, including live code collaboration, a chat window and video calls, all powered by WebRTC. In addition, the sandbox can be embedded in a webpage. We hope it will find its way into our documentation soon. If you’re a developer reading this, I’m sure you already have experienced the pain of trying to debug over Zoom, or even worse, trying to debug over the phone or email. We hope that the HC 3D Sandbox can be a tool that makes the lives of all of our partners and developers much easier.

How will you use the Sandbox or what features would you like to see? Leave us a comment.

You can find the HOOPS Communicator 3D Sandbox here:
https://3dsandbox.techsoft3d.com/