How to Overlay a 2D Sheet Canvas on Top of a 3D Model in HOOPS Communicator

General
, , , ,
1

Hi team,

I’m trying to display a 2D sheet (rendered in a separate canvas) on top of my 3D model viewer in HOOPS Communicator.

Both the 2D sheet and the 3D model are rendered on separate canvas elements, and my goal is to visually overlay the 2D sheet so that it appears on top of the 3D model (similar to a transparent overlay or reference drawing).

Could you please suggest the best approach for:

  1. Properly stacking both canvases in the same container.

  2. Ensuring the 2D canvas remains interactive or transparent (so the 3D viewer still responds to mouse events).

  3. Optionally syncing the 2D sheet with the 3D camera or model position (if needed).

2

Hello @raja.r,

In terms of combining 2D and 3D elements into an application, are you trying to implement something like this demo:

Thanks,
Tino

3

image
image1847×675 277 KB
something like this on top of 3d model

5

Thanks for providing the images.

What is the expected interaction with the camera? Because there is a 2D overlay on top of 3D model, only the 3D model will respond to an operation such as orbit. In which case, the 3D and 2D will not be synchronized.

6

Okay, if that’s the case, I can set the 3D model to a top view, freeze its rotation, and then overlay the 2D sheet on top as a transparent layer (if possible).

7

Here are my suggestions as a starting point for a proof-of-concept:

  • Create a quad mesh (similar to a 2D plane) to the appropriate dimension of the floorplan image
  • Apply the image as a texture to the quad mesh
  • Place the textured mesh to the desired distance in front of the 3D model
  • Set the appropriate opacity (setNodesOpacity) on the textured mesh to see 3D model behind it
  • Set Communicator.InstanceModifier.DoNotSelect on the textured mesh to allow selection operations to pass through and reach the 3D model
  • Remove any orbit operator for the operator stack such that only pan and zoom changes the camera