Drawing Manipulator Class

HOOPS Communicator offers great support for BIM workflows with its ability to import all the major 3D and 2D formats as well as dedicated functionality that makes it easy to build web applications in the Building & Construction space. However, while working primarily with a “single source of truth” 3D model is the ideal case for BIM the reality is that in a typical building project there are still a lot of 2D drawings generated by different stakeholders that only exist as images or 2D PDF’s. While it is trivial to display this type of 2D data in a web-browser with open source libraries like PDF.js it is often desirable to combine them with the 3D model. This is what this class is about.

This operator allows you to drag & drop images or 2D PDF’s into your viewer window and add them to the 3D scene. From there you can then adjust the size and orientation of those drawings to easily match them up with the 3D model.


Usage:

myDrawingManipulator = new DrawingManipulator(hwv);
myOperatorHandle = hwv.operatorManager.registerCustomOperator(myDrawingManipulator);
hwv.operatorManager.push(myOperatorHandle);

Creates a new DrawingManipulator object and registers it as an operator.

myDrawingManipulator.setupDropArea(dropdiv);

Creates a drop area for dragging & dropping images or PDF files into the viewer. If dropdiv is not specified the default HC div is used (‘content’).

let drawingnode = myDrawingManipulator.addImage(data, width, height);

You can directly pass your image data with the above function. The function will return the nodeid of the new drawing.

myDrawingManipulator.getDrawings()
Returns an array of drawing nodeids.

myDrawingManipulator.activate(nodeid);
Activates the drawing and enables its cutting plane

myDrawingManipulator.deactivate();
Deactivates a drawing and disables its cutting plane

myDrawingManipulator.showPivotHandles();
Shows the pivot handles. Pivot handles allow you to easily align a drawing with the 3D model. To use them drag the handles to key points on the image. After they are positioned they can then be aligned with the 3D model by holding down shift while dragging.

While the Drawing Manipulator is active you can also ctrl-click to align the drawing with a given surface on the 3D model.

myDrawingManipulator.showMovementHandles();
Shows the drawing handles to move the drawing back and forth along its axis and to rotate it manually.

myDrawingManipulator.disableHandles();

Disables all handles

myDrawingManipulator.alignCameraWithDrawing();
Aligns the camera with the currently active drawing


Below is the main code for the DrawingManipulator class. Besides requiring the HOOPS Web Viewer libraries, PDF.js is required for 2D PDF support:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>

It is important to note that this code is not production-ready and provided “as-is”. It is really meant as a starting point for your own development and as an example for some of the functionality and concepts used in HOOPS Communicator.

If you have any questions or comments or found a bug, please don’t hesitate to post them here in the forum.

DrawingManipulator.js (23.9 KB)
ViewerUtility.js (5.6 KB)

2 Likes

Thanks for great article.
But how can I use your js source in “hoops_web_viewer_sample.html”?

Below is a self-contained example that shows the usage of this class. After placing an scs file (e.g. arboleda) into the models directory simply start with:
http://127.0.0.1:5500/viewer.html?scs=models/arboleda.scs

Then you can just drag & drop a pdf or image onto the canvas to display it as a drawing aloongside the 3D model. I have added a separate menu to active the current drawings and the various option to change its position and orientation.

I hope this helps,
Guido

drawingmanipexample.zip (5.2 MB)

I have also made a slight bugfix to the existing class which can be downloaded here (it is already included in the project above):
DrawingManipulator.js (23.9 KB)

excuteme, do you have any tutorial video? It very helpfull but i don’t nkow how to do.

1 Like

I have made a quick video that illustrates how to use the drawingmanipulator that works with the 3dsandbox snippet below. I have also included the drawing used in this video:

https://3dsandbox.techsoft3d.com/?snippet=23XQULNLffjVpGXyJEU8De

1 Like

hi!!!
Can you calculate the projected area?

Can you elaborate? What projected area are you referring to?


like this . i need the projected area

It would be fairly easy to project the mesh onto the three major planes and display the result visually but if you are looking for calculating the exact 2d area of the projected mesh, that is not trivial for complex meshes I think and HOOPS Communicator does not have a function to accomplish this directly.

1 Like


I need to calculate the projected area of an object like this. Is there any function in C# that can help me with this? Or are there any similar methods available?

Does Hoop support accessing the vertices and polygons of an object ?

Yes, all of our products (HOOPS Visualize, Exchange and Communicator) give you access to the vertices and triangles/polygons of a piece of geometry.

With regard to getting the projected area, once again we have no direct function to calculate this but what you could do is use an offscreen image, project the model to the desired plane and then simply count the pixels of the resulting image. That would give you a fairly good approximation of the projected area. Both HOOPS Visualize and HOOPS Communicator support offscreen image generation.

1 Like

Could you guide me on how to obtain the vertices and triangles/polygons using a hoop and provide any instructional resources for that?

In the example below (which display the tessellation for a mesh), you can see how to extract the vertices and triangles of a mesh in HOOPS Communicator:
https://3dsandbox.techsoft3d.com/?snippet=3YgjHRQW8Kadi9VNrHLOik

Documentation for the relevant function can be found here:
https://docs.techsoft3d.com/communicator/latest/api_ref/viewing/classes/Communicator.Model.html?highlight=getnodemeshdata#getnodemeshdata

I’m assuming, you are interested in HOOPS Communicator, but let me know if you need similar information for HOOPS Visualize.

1 Like