RoundedCornerLine

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
  function roundedCornerLine(points, radius, smoothness, closed) {

    radius = radius !== undefined ? radius : .1;
    smoothness = smoothness !== undefined ? Math.floor(smoothness) : 3;
    closed = closed !== undefined ? closed : false;

    let newGeometry = new THREE.BufferGeometry();

    if (points === undefined) {
      console.log("RoundedCornerLine: 'points' is undefined");
      return newGeometry;
    }
    if (points.length < 3) {
      console.log("RoundedCornerLine: 'points' has insufficient length (should be equal or greater than 3)");
      return newGeometry.setFromPoints(points);
    }

    // minimal segment
    let minVector = new THREE.Vector3();
    let minLength = minVector.subVectors(points[0], points[1]).length();
    for (let i = 1; i < points.length - 1; i++) {
      minLength = Math.min(minLength, minVector.subVectors(points[i], points[i + 1]).length());
    }
    if (closed) {
      minLength = Math.min(minLength, minVector.subVectors(points[points.length - 1], points[0]).length());
    }

    radius = radius > minLength * .5 ? minLength * .5 : radius; // radius can't be greater than a half of a minimal segment

    let startIndex = 1;
    let endIndex = points.length - 2;
    if (closed) {
      startIndex = 0;
      endIndex = points.length - 1;
    }

    let positions = [];
    if (!closed) {
      positions.push(points[0].clone())
    };

    for (let i = startIndex; i <= endIndex; i++) {

      let iStart = i - 1 < 0 ? points.length - 1 : i - 1;
      let iMid = i;
      let iEnd = i + 1 > points.length - 1 ? 0 : i + 1;
      let pStart = points[iStart];
      let pMid = points[iMid];
      let pEnd = points[iEnd];

      // key points
      let vStartMid = new THREE.Vector3().subVectors(pStart, pMid).normalize();
      let vEndMid = new THREE.Vector3().subVectors(pEnd,...

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 20);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var avg = { x: false, y: false, z: false }
var regions = new THREE.Group()
var lines = []
var geometry = new THREE.BufferGeometry()
var points = [new THREE.Vector3(11480992.59240649,3454785.183761712,0),
new THREE.Vector3(11481107.78168301,3454732.692403951,0),
new THREE.Vector3(11481100.31350271,3454716.314788647,0),
new THREE.Vector3(11480985.23491298,3454768.755673313,0),
new THREE.Vector3(11480992.59240649,3454785.183761712,0)]
geometry.setFromPoints( points );
var line = new THREE.Line( geometry, new THREE.MeshBasicMaterial({color: 'white'}) );
lines.push(line)
points =[new THREE.Vector3(11476001.10705733,  3451888.554065744, 0),
new THREE.Vector3(11475983.16102746,  3452040.27762404, 0),
new THREE.Vector3(11475953.58238295,  3452371.686142904, 0),
new THREE.Vector3(11475923.94875162,  3452743.854388532, 0),
new THREE.Vector3(11475923.94875162,  3453220.703065744, 0),
new THREE.Vector3(11477596.19835162,  3453220.703065744, 0),
new THREE.ector3 (1477592.88717881,3452645.162676895, 0),
new THREE.Vector3(11477390.72157881,  3452645.162676895, 0),
new THREE.Vector3(11477394.03275162,  3452344.210265744, 0),
new THREE.Vector3(11476895.51030277,  3452344.210265744, 0),
 new THREE.Vector3(11476895.07689253,  3452144.215357179, 0),
 new THREE.Vector3(11476401.55052434,  3451895.300889509, 0),
 new THREE.Vector3(11476198.19006487, 3451888.554065744, 0) ,
 new THREE.Vector3(11476001.10705733, 3451888.554065744, 0),]
 geometry.setFromPoints( points );
line = new THREE.Line( geometry, new THREE.MeshBasicMaterial({color: 'white'}) );
lines.push(line)
lines.forEach(entity => {
  let...