Showing in a browser an interactive 2D floorplan using html5 and javascript

Question

I need to replace the Flash viewer I've built years ago to show interactive 2D floorplans coming from AutoCAD.

Currently, the AutoCAD files are read and converted to XML files containing the X and Y coordinates of the polygons representing the objects of the floorplan: rooms, walls, assets, etc. The objects in the drawing are clickable and can be set as visible or not depending on thematic views.

Sometimes these floorplans could be relatively big, having a lot of points.

I have already tried to use a web map control like LeafletJS as it has already the PAN and ZOOM functionality, I can insert clickable markers, and manage layers so I can show or hide objects by a thematic view. I have set the map CRS as metric, and I load data as GeoJSON. Unfortunately, with real-world mid-size floorplans, it is too much slow and sometimes became unresponsive.

The example below is made of 18630 line objects and is not very reactive on panning.

So now I'd like to draw directly the floorplan in the browser using SVG or CANVAS. I'd prefer to use CANVAS as it is a lot faster than SVG, using also WebGL if supported, but I have to rely on a library in order to have events handlers and easy object management like a DOM.

So now I'm asking if a library like threeJS can handle easy a task like this, even if I need to map 2D objects and if it is the right technology to choose. In particular, is it possible with threeJS:

1. To assign events listener to objects to get their IDs?
2. To apply CSS3 rules to style objects, for example, to highlight a room or a table?
3. ThreeJS can easily draw to both SVG or Canvas elements?
4. With ThreeJS I can easily manage pan and zooming also?
5. Can it be displayed also on mobile devices? (Android and iOS)

If anyone knows better library or technology to accomplish this task I'm completely free to any suggestion.

(Please note that I need only 2D drawings because 3D has been already built with other technologies from Revit)

Answer 1

Using webgl (via three.js for instance) you can draw millions of simple line primitives at 60fps on GPU enabled desktop browsers.

Here's a contrived example of over a million line primitives, thrown together using three.js:

https://codesandbox.io/s/0pp3x92n4p

and here:

http://vectorslave.com/wireblueprint/index.html