Building 3D web applications with CAD Exchanger Web Toolkit

Whether you deal with PCB manufacturing or shoe design, you might need to demonstrate a prototype or a final product to your stakeholders, with the browser being the most universal medium. If you need to display 3D CAD models online, be it an e-Commerce website or an engineering application, this article should prove a valuable read for you.

Perhaps you’ve once read our overview of available options for viewing 3D CAD data in a browser:

  • Converting the original CAD file into one of the interim formats and importing it with three.js API (gltf as the most promising as explained here)
  • Writing into native three.js JSON format
  • Using CAD Exchanger Web Toolkit

Today we’d like to focus on CAD Exchanger Web Toolkit, which scope has significantly broadened since the publication of the previous post.

What is CAD Exchanger Web Toolkit?

It is provided in the form of JavaScript libraries that get integrated into your web pages. The Web Toolkit is used by our own CAD Exchanger Cloud, so you can always test drive it right away.

The toolkit is available in two forms:

  • If your app already uses three.js, you can seamlessly integrate the Web Toolkit into it using the minified package. Here is an example of such integration.
  • Otherwise you should use the bundled package, which encapsulates dealing with three.js. Usage of the bundled package is demonstrated in the rest of the examples, as well as the code excerpt below.

Who is this tool for?

None of the interim formats supported by three.js are capable of carrying validation properties and displaying B-Reps, PMI, or layers. Text-based OBJ, VRML, and STL formats take a lot of disk space and network bandwidth inflating initial file size up to 20 times. OBJ doesn’t support product structure and object instancing which requires generating duplicate meshes. STL only feature is to hold bare polygons. And even the most feature-rich format, GLTF is not able to carry the above-mentioned features which are must have for any precise real-world CAD model.

In case you prefer a responsive widget with a comprehensive 3D view, give some serious thought to using CAD Exchanger Web Toolkit, which lets you take full advantage of CAD model properties.

Web Toolkit Features

Data imported from any of these formats is available to Web Toolkit via its native CDXFB format specifically designed for faster display on the web. In addition to the visualization, CDXFB enables access to product structure and PMI, measurements, selection, and other interactive features. Let’s take a closer look at the available functions.


  1. Creation of a scene and viewport
  2. Selecting the part representation: BRep, polygonal, or one of the available polygonal ones (for formats that allow multiple LODs, e.g., JT)
  3. Specifying display mode: wireframe with boundary curves, shading with or without boundaries
  4. Displaying selected part representation

Here is an example of the key functionality of the web viewer.

Access to the product data

  • Product structure or scene graph (a hierarchy of assemblies and parts, and instances thereof)
  • Names and appearances (i.e. colors and materials) attached to the graph elements
  • User-defined properties (attached as string, integer or double-precision numbers, dates, etc)
  • Geometrical representations of the parts, for instance, meshes
  • PMI (Product and Manufacturing Information)

This Model Explorer example demonstrates which data can be retrieved from a 3D model.

Available interactions

  • Two modes of selection: an entire part (e.g. a nut in a large assembly) or a particular B-Rep vertex/mesh node
  • Multi-selection
  • Rotation, zoom, and pan
  • Displaying graphical PMI in the browser

Thanks to integration with CAD Exchanger SDK API, the Web Toolkit-based apps can also implement interactive measurements, such as standard (bounding boxes, distances, angles) and more complex ones (surface area, volume, centroid, minimum bounding box).

Check out our examples of distances and angles measurements and PMI display.

Cross-browser support

Web Toolkit Advantages

Efficient data format

  • It is a highly-compressed binary format that allows efficient data transfer. E.g., an original 60 KB JT file would be converted to 127 KB CDXFB compared to the 550 KB GLTF at best
  • CAD Exchanger uses external references for quicker loading, reduced memory footprint and storage space. It is possible to filter out unnecessary data for the sake of performance optimization. Among other things, one can choose whether to store PMI data or which mesh granularity level to use

Feature-rich visualization

  • Developers may choose orthographic or perspective viewport, with or without a background
  • They can add a viewcube as an interactive control to switch between camera views
  • Objects might be displayed in shaded or wireframe modes
  • Materials and textures may be presented depending on the purpose of the app

Unified data access API

Ease of use

On the whole, your starting point should be to define the necessary level of 3D visualization. Assuming the development underworld ins and outs, I can imagine that this can still be unclear. That is why we provide a free 30-days trial version with a full technical support.

Using the documentation, one can familiarize themselves with CAD Exchanger Web Toolkit key features, fiddle around with geometries and interaction — in short, try out the tool in its entirety.

As for the financial side, we offer flexible licensing per customer’s application with convenient pricing both for startups and enterprise customers. There is a separate plan for an in-house usage of CAD Exchanger Web Toolkit and the tier-based licensing model for customer-facing apps and services.

Feel free to contact us whether you have questions or feedback on CAD Exchanger products. We are equally glad to navigate you through 3D visualization and to improve our services along the way.

CAD Exchanger is a technology that enables data exchange in the multi-CAD world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store