three.js: EdgesGeometry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.js"></script>
<script src="https://yume.human-interactive.org/examples/buffer-geometry/OrbitControls.js"></script>

JavaScript

// scene

const scene = new THREE.Scene();

// camera

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 25, 25, 50 );
camera.up.set(0,0,1);
// meshes

const geometry = new THREE.CylinderBufferGeometry( 10, 10, 20 );
const material = new THREE.MeshBasicMaterial( { color: 0x6083c2 } );

//geometry.translate(0,-20,0);

geometry.rotateX(Math.PI/2)

geometry.rotateY(Math.PI/5)

const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

// lines

var edges = new THREE.EdgesGeometry( geometry, 60 ); // the second parameter solves your problem ;)
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );

// renderer

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x20252f );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

// controls

const controls = new THREE.OrbitControls( camera, renderer.domElement );

animate();

window.addEventListener( 'resize', onResize );

function onResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

	requestAnimationFrame( animate );

	render();
  
}

function render() {

	renderer.render( scene, camera );

}