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)
