How To Load 3D CAD Data Into Three.js. Part 2

Previous part:

How To Load 3D CAD Data Into Three.js. Part 1

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 Batch:

ExchangerConv.exe -i conrod.jt -e conrod.obj conrod.glb

B. Using CAD Exchanger SDK:

cadex::ModelData_Model aModel;

cadex::JT_Reader aJTReader;
aJTReader.ReadFile ("conrod.jt") && aJTReader.Transfer (aModel);

cadex::GLTF_Writer aGLTFWriter;
aGLTFWriter.Transfer (aModel) && aGLTFWriter.WriteFile ("conrod.glb");

Here is what the updated comparison table looks like:

	OBJ	VRML	STL	GLTF
Product structure (hierarchy of assemblies and parts)
Names
Colors
Materials
Textures
B-Rep (Boundary representation, or precise geometry)
Polygonal representation (tessellations, or meshes)
PMI (Product and Manufacturing Information)
Layers
Validation properties (bounding boxes, volumes, surface areas, centers of gravity)
User-defined properties

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 info@cadexchanger.com 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:

const aScene = new THREE.Scene();

// Create model
const aModel = new cadex.ModelData_Model();
// Model uses multiple external data, so requires provider for it.
const dataLoader = async (theModelUrl, theObjId) => fetchFile(theModelUrl + '/' + theObjId);

// Load model by URL.
await aModel.loadFile(theModelPath, dataLoader, false /*append roots*/);

// Convert model into three.js entities
const aConverterParameters = new cadex.ModelAlgo_ThreejsConverterParameters();
const aThreejsConverter = new cadex.ModelAlgo_ThreejsConverter(aConverterParameters);
aScene.add(await aThreejsConverter.convertModel(aModel));

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

Moreover, the following WebGL widget demonstrates using the above code right here, in HTML:

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 ;-).

Learn more:

Client-side libraries for 3D data display: Three.js vs Babylon.js

Next part:

Building 3D web applications with CAD Exchanger Web Toolkit