How can I optimize draw calls and manage transparency for large Three.js CAD models?

Hi everyone!

I’m developing a 3D viewer for a proprietary CAD format where models can be very large and consist of many elements. I currently convert each unique object (mesh and submesh) into a single GLB file. These are dynamically imported into a Three.js scene, where I duplicate each instance and apply rotation/translation matrices. This approach keeps the disk format compact.

The main functions I need are:

• Highlighting one or more elements
• Applying transparency to one or more elements
• Show/hide specific elements
• (I don’t need texture management)

In this first version, I preload the “meshes” using GLTFLoader (with DRACOLoader and MeshoptDecoder) and store the single glTF scene in a JavaScript Map. Then, I clone the “Mesh” from the map using .clone() and set the rotation and translation for each instance.

Here is an example model in a legacy Windows viewer:
[

immagine886×573 125 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/b/abee6088ab5094c6867f5afc6f3816a33e8090b7.png "immagine")

When importing with the glTF importer, each CAD object becomes a Three.js Object3D containing several meshes (one per material). I’m wondering:
Would it be better to use the BufferGeometry.groups?

I considered using instanced meshes, but that doesn’t seem to allow independent transparency for each object. Or am I mistaken? I need to make each object transparent independently.

Here is my initial test:
[

immagine894×714 111 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/b/8bdea9709b5131161145fa383cbae88aa7f86073.png "immagine")