How to add the border lines just for the edges in custom shapes

Questions
,
1

private generateCurvedCube(): void {
const shape = new THREE.Shape();

shape.lineTo(0,3);

shape.absarc(0,0,3,1.4,0,true);

shape.lineTo(0,0);

const extrudeSettings = {
  depth: 2.5,
  bevelEnabled: false,
  bevelSegments: 0,
  steps: 1,
  bevelSize: 0,
  bevelThickness: 0,

};
const material = new THREE.MeshStandardMaterial({
color: new THREE.Color(ColorCodes.red),
transparent: true,
opacity: CanvasConfig.transparentOpacity,
});

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const curvedCube = new THREE.Mesh(geometry, material);

// For the outline
const outlineMaterial = new THREE.MeshBasicMaterial({
  color: ColorCodes.yellow as ColorRepresentation,
});

const outlineGeometry = new THREE.EdgesGeometry(geometry);
const outline = new THREE.LineSegments(outlineGeometry, outlineMaterial);
curvedCube.add(outline);
curvedCube.name = this.availableShapes.CurvedCube;

this.shapes.push(curvedCube);
this.scene.add(curvedCube);

}

I created a shape like this and tried to add border lines similar to that we have in cube → box-helper, unfortunately for the curved face of the shape i am not able to remove the horizontal lines, Please help.

Screenshot 2023-08-10 at 4.41.08 PM

2

Links for some ideas:

  1. LDraw-like edges
  2. How to render full outlines as a post process - tutorial
  3. EdgesGeometry’s constructor has the second parameter thresholdAngle , try to play with it.
1 Like
3

Thanks, thresholdAngle worked

1 Like