Depicting Edges

[TDC]

I have created several 3D models of engineering assemblies and successfully brought them into Three.js to allow me to interact with them. However, it is difficult to see many of the details, particularly where two discrete parts fit exactly side by side because there are no edges rendered. Is there any way to create a shaded scene with edges overlaid to provide a crisp, clear understanding of the assembly. I want to create a look not unlike an Adobe 3D PDF (with edges displayed) or an engineering CAD model.

I have seen the Lego builder approach where a separate, slightly expanded mesh provides edges but this is not practical for the complex assemblies which we are importing. Is there any way of rendering hidden line edges as part of the material for instance.

Any advice or suggestions very welcome.

[Mugen87]

@TDC

Is there any way to create a shaded scene with edges overlaid to provide a crisp, clear understanding of the assembly.

Can you please share a screenshot so it’s easier to understand what you are referring to?

[TDC]

Good idea. Please find below a simple gearbox as displayed in Three.js and the same gearbox with edges displayed in our CAD software. Delicate as the edge lines are, they really help define each individual part.

[Mugen87]

Have you tried EdgesGeometry yet?

Live Demo: https://jsfiddle.net/br0d1gLf/3/

[TDC]

How interesting. No, I have not seen this before. I will do some research, thank you.

[TDC]

Thank you Mugen87. We implemented your suggestion and it works a treat. I adjusted the lines to be a darker tone of the material’s base colour which helps soften the line. Here’s an example:

.