Turning GLTF Model into Dashed Line

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

It loads flawlessly,

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

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

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.

@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!

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

Then export with the “Loose Edges” option enabled.

1 Like