How to load 3D CAD data into three.js. Part 2.

As time passed after publication of the previous blog on the topic of loading CAD data into three.js, several important updates have been accumulated which warranted a new post.

This post will cover:
- Use of the GLTF as an interim format
- More details on the .cdxfb format used in CAD Exchanger Cloud
- Detailed example of CAD Exchanger Web Toolkit

1. Using GLTF as an interim format

In addition to OBJ, STL and VRML mentioned in the previous blog, there is also GLTF (GL Transmission Format). The GLTF format is a “JPEG of 3D” format standardized and promoted by the Khronos group.

Support of GLTF export has been added in CAD Exchanger 3.7.0 along with a few other exciting features. Refer to this blog post for details.

GLTF comes in two flavors: JSON-formatted .gltf file bundled with .bin (binary file containing geometry) or as a monolithic .glb file.

Three.js supports GLTF loader similar to three above mentioned formats. Refer to this example in three.js documentation, for instance.

To get GLTF from any input CAD file with the help of CAD Exchanger, you do just the same as was explained in the Part1 of this blog post:

A. Using CAD Exchanger CLI:

B. Using CAD Exchanger SDK:

Here is what the updated comparison table looks like:

Among all above formats supported by three.js out-of-the box — STL, OBJ, VRML, GLTF — I would recommend the latter as its support by three.js seems to be the most powerful. Although VRML itself is slightly more feature-rich (thanks to user-defined properties), three.js does not take advantage of that.

2. More details on the .cdxfb format used in CAD Exchanger Cloud

When working on CAD Exchanger Cloud we had to design our own format that we could use to save the data in on a server and restore from on a client. We obviously could not use any of the above motioned formats supported by three.js (STL, VRML, OBJ, GLTF) as they are much more limited than what CAD files can generally contain. For instance, none of them is capable to contain B-Rep information, PMI or layers.

So we ended up developing our own format which would be highly efficient for cloud worfklows. Efforts in that direction resulted in birth of our proprietary format, which we called .cdxfb. It is highly compressed, multi-file format enabling to store entire 3D model with all retrieved supported data from the original CAD file.

The below table adds two formats introduced in this blog:

With growth of the original JT file size, the delta with the resulting .cdxfb tends to diminish. For instance, 1.05MB JT file is converted into 1.09MB .cdxfb file.

3. Detailed example of CAD Exchanger Web Toolkit

After publication of the previous post we had been working on updating our web-site and adding more relevant details on each product we offer. With that, we added a dedicated page on CAD Exchanger Web Toolkit (which we formerly referred to as “Web SDK” but decided to rename it to avoid confusion with “CAD Exchanger SDK”).

We are still working on providing easy-to-read Web Toolkit User’s Guide and providing source code for available Javascript examples, so that you can better comprehend capabilities of the library. Up to now all of this is available to evaluating users per individual request. Don’t hesitate to contact us at if you want to get free evaluation access.

While documentation publication is still underway, let me share just a very short and simple code snippet demonstrating capabilities of displaying CAD files with the help of three.js and CAD Exchanger Web Toolkit:

To see this code in action please go to the ‘three.js’ example available through the above link.

I hope to continue this blog post series by providing a more detailed example on how to display a 3D CAD file with the help of three.js. I’m going to demonstrate how to do this with the help of CAD Exchanger Web Toolkit and without it, so that you could get better understanding of both paths and choose the one that works best for you.

Please stay tuned — that shouldn’t be long ;-).

(To be continued…)

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