Search code examples
three.jsblender

How to Only Color Certain Edges of Mesh in threejs

I'm just learning threejs and I have next-to-no experience in 3D modeling so I apologize if I'm being dumb in any way.

I have this complex shape, a 3D letter J imported from a .obj file, and I want to highlight the edges in a certain color. To do so, I'm using this code:

const colorEdges=()=>{
    let geometry = new THREE.EdgesGeometry( letterJ.geometry ); 
    let material = new THREE.LineBasicMaterial( { color: 0xffff00, linewidth: 2 } );
    let edges = new THREE.LineSegments( geometry, material );
    letterJ.add( edges ); 
}

And it results in this: enter image description here

However, there are some edges I don't want to color in, like the edges across the curve of the J. I want it so that only the real edges of the letter are outlined, not every intersection of faces. I tried to merge some of the faces together in blender and was successful, but it's impossible to completely smooth out the curve.

So, is there a way to selectively color some of these edges using threejs? In geometry there's an array of points but altering it has only sometimes removed edges, and while I could mess with it for hours I'd rather find a more efficient solution. If the best solution is to alter it in Blender then I could do that too, and that's what I think I'll end up doing, but if there's a better way in threejs that'd be way better. Thank you!

Solution

  • EdgesGeometry takes a second parameter. It's the number of degrees difference between 2 faces that needs for it to add an edge. It defaults to 1 degree. Set it to 30 degrees (or something) so that the edges in the curves fail but edges everywhere else succeed.