Turning GLTF Model into Dashed Line

Questions
,
1

Hey guys, I have done a simple model in blender and exported on the GLTF format for easy import.

It loads flawlessly,

hmodel
hmodel698×867 4.76 KB

Now I was wondering what is the best way (or if its possible in any way) to turn that model into something like this with dashed lines

hlined
hlined809×787 9.53 KB

I’ve been trying getting BufferGeometry and LineDashed to no avail. Maybe I’m doing something wrong, so would love to have some more insight on this

Thank you

2

Two basic approaches here:

(1) it’s possible to export line segments directly from Blender. You’d need to first convert the mesh triangles to just lines, and then enable the “Loose Edges” option at export. Then you can swap out the material to whatever you need in three.js and won’t have to worry about, e.g., diagonal lines going through the middle of your quads.

(2) load the triangular mesh in three.js, simplify it to just hard edges with EdgesGeometry, and then render from there.

I’d probably lean toward (1), but if you want very custom wireframe effects, some of those are easier with triangles than with actual lines. Like these: GitHub - mattdesl/webgl-wireframes: Stylized Wireframe Rendering in WebGL, which require computing barycentric coordinates for your geometry as well.

3

@donmccurdy Could you give a little more context around number 1? I was looking for something in Blender (3.0) that sounded like converting mesh triangles to lines, but couldn’t exactly find it. The closest was converting “tris to quads” but that didn’t seem to do much.

The workflow that I’m hoping will be possible is:
1.) Create (relatively box-like) model in Blender with simple bsdf material(s)
2.) Do the “conversion” method you mention in your post converting to lines
3.) Export gltf with “loose edges” option selected
4.) Render gltf in three with aforementioned bsdf material as well as nice lines rendering with a second material that has been defined

Is this a pipe dream on my part? Thanks!

4

In Blender’s “Edit Mode”, select all faces (“A”), open the command bar (“F3”), and select “Delete → Only Faces”:

deletion
deletion3248×2112 633 KB

Then export with the “Loose Edges” option enabled.

1 Like
5

Hello,
I try to achieve a similar effect on LineSegments, that are loaded as GLTF into my scene, but no dashes are appearing… here is my code snippet for the GLTF-Load and the dahed lines, can anybody tell me whats missing or why it’s not working?

// Material for dashed lines
let dashLine = new THREE.LineDashedMaterial({color: 0xff0000, dashSize: 0.01, gapSize: 0.01});

// GLTF Loader
loader.load( 'LEGO-Copter_Explode_Lines_mesh.gltf', function ( gltf ) {
							const model = gltf.scene;
							//finding LineSegments in GLTF-file
							model.traverse((node) => {
      					                       if (!node.isLine) return;
      					                       node.material = dashLine;
      					                       node.computeLineDistances();
    					                });
    					
							scene.add( model );
							
							render();

								
						} );

I also got a message in the cosnole but don’t know what it means and how to avoid this error:
“THREE.LineSegments.computeLineDistances(): Computation only possible with non-indexed BufferGeometry.”

I’m totally new to ThreeJS and also JS, a total noob ^^

Thank you very much!