How to create 3D markup and make canvas markup aggregation

I want to create a 3D markup,the effect as in the link below

And make the markup aggregate, like the effect in the link.

And I want create the skybox background like below link

Is there any method that can be used in hoops?Looking forward to your answer


with regard to your question regarding skybox support. While skyboxes are not officially supported in HOOPS Communicator, it is possible in perspective projection mode to emulate a skybox by using a textured sphere far away from the origin. See below for a sandbox example:


I’m not sure I understand your question with regard to 3D markup. Can you provide more information.


Just to follow-up, if you try to implement 3d markup you might want to have a look at the class below:

I mean, the markup we create usually exist in the form of div. I want to convert div into canvas, and the markup can be aggregated.Aggregation means that markup can be merged or expanded by scaling the model.The effect is the same as in the link below

I think you will have to write this functionality largely on your own. In general to convert a div to a canvas element you can use the library below, which is also used in HOOPS Communicator (and the spritemanager class I mentioned in my previous reply) for that purpose:

1 Like

Thank you for your method. So is there any way to make markup aggregation in hoops?

From what I can tell when looking at the link you provided, the markup is grouped together and styled differently based on the distance of the camera and some other proprietary heuristics. We don’t offer that functionality and you would have to implement this yourself on top of your existing markup logic, which I think should be fairy straightforward.

It is an interesting feature, so its possible this could into the spritemanager class at some point but there are no current plans.

1 Like

Thank you very much. :laughing:

When I used loadSubtreeFromScsFile function,the console prompts incompatible types.I used the same code as in the sandbox, and replaced the scsFilename of loadSubtreeFromScsFile with the string ’ '.What is the possible reason?


if you are loading scs files you need to make sure that you don’t start the webviewer in streaming mode. For example the code below would startup an empty viewer, that allows you to load scs files:

viewer = new Communicator.WebViewer({
containerId: container,
empty: true

1 Like