How to convert edges to an lineloop or curve?

Questions
,
1

Hello Three js team,

I am using edges geometry to get the border across my 3d shape but if you see in the attached image the edges is perfectly follow the shape i only need an line loop means an outer border instead of getting the edges like shape.

Please can some one provide urgent help

Thanks

edges
edges782×509 78.1 KB

2

If you just want a border like an outline, you probably have to use post processing. Consider to use a) OutlinePass or implement an edge detection pass by yourself based on a e.g. sobel filter.

a) https://threejs.org/examples/webgl_postprocessing_outline.html
b) https://threejs.org/examples/webgl_postprocessing_sobel

A third option is the usage of OutlineEffect although it is primarily intended for toon shading.

c) https://threejs.org/examples/webgl_materials_variations_toon

3

I am using this algorithm but i my code the offset value is less than 1 like 0.00894 for an example and this algorithm is fail in that case so what i am doing i am using the extrudegeometry with bevelThickness to get such an bigger polygon and it give me proper result also but i am not getting an border line i gives me solid shape but i need outline only.

Please see my code

  let shape = new THREE.Shape(points);

  extrudeSettings.bevelSize = offset

  let shapeGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

  shapeGeometry.rotateX(Math.PI * .5);

  let mesh = new THREE.Mesh(shapeGeometry,new THREE.MeshBasicMaterial({color: 'red'}))

  
  let edgesMesh = new THREE.LineSegments( geometry, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 10 } ) );

  so the black borders are edges but i need lineloop not edges.

my points are

  1. 0: Vector2 {x: 0.07961689313879339, y: 0.1475970323602923}
  2. 1: Vector2 {x: 0.07672063987823452, y: 0.14234336600458364}
  3. 2: Vector2 {x: 0.08695736034194478, y: 0.13467906070780342}
  4. 3: Vector2 {x: 0.09518070009862374, y: 0.13873743609992617}
  5. 4: Vector2 {x: 0.09253871032863452, y: 0.14708736582032172}
  6. 5: Vector2 {x: 0.07961689313879339, y: 0.1475970323602923}

offset value
0.0017960512242138306

Please can you suggest me a better option or way

Thanks

4

@Mugen87 any inputs on this

5

No sorry :man_shrugging: