<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  display; block;
}
let scene = new THREE.Scene({ background: 'red' });
let camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);

camera.position.set(0, 0, 20);
let renderer = new THREE.WebGLRenderer({
  antialias: true,
});
let canvas = renderer.domElement;

document.body.appendChild(canvas);
scene.background = new THREE.Color('orange');

const shapeData = [
  {
    x1: 0.00020759999999997447,
    y1: 2.5999999999999996,
    x2: 2.5995316,
    y2: 0.0006755000000000511,
    cX1: 1.42874464,
    cY1: 2.5999999999999996,
    cX2: 2.5995316,
    cY2: 1.42921298,
    lineType: 'CubicBezier',
  },
  {
    x1: 2.5995316,
    y1: 0.0006755000000000511,
    x2: 0.39966663999999996,
    y2: -2.5650593999999995,
    cX1: 2.5995316,
    cY1: -1.2917947,
    cX2: 1.6402616400000003,
    cY2: -2.37072,
    lineType: 'CubicBezier',
  },
  {
    x1: 0.39966663999999996,
    y1: -2.5650593999999995,
    x2: 0.39966663999999996,
    y2: -1.2902018000000002,
    lineType: 'Straight',
  },
  {
    x1: 0.39966663999999996,
    y1: -1.2902018000000002,
    x2: 1.34947864,
    y2: 0.000675499999999829,
    cX1: 0.9536176399999999,
    cY1: -1.1223918000000004,
    cX2: 1.34947864,
    cY2: -0.6127965000000002,
    lineType: 'CubicBezier',
  },
  {
    x1: 1.34947864,
    y1: 0.000675499999999829,
    x2: 0.00020759999999997447,
    y2: 1.3504638799999997,
    cX1: 1.34947864,
    cY1: 0.7536628599999998,
    cX2: 0.7531946399999999,
    cY2: 1.3504638799999997,
    lineType: 'CubicBezier',
  },
  {
    x1: 0.00020759999999997447,
    y1: 1.3504638799999997,
    x2: -1.3495814,
    y2: 0.000675499999999829,
    cX1: -0.7527794000000001,
    cY1: 1.3504638799999997,
    cX2: -1.3495814,
    cY2: 0.7536628599999997,
    lineType: 'CubicBezier',
  },
  {
    x1: -1.3495814,
    y1: 0.000675499999999829,
    x2: -0.4002843999999999,
    y2: -1.2902018000000002,
    cX1: -1.3495814,
    cY1: -0.6124499000000001,
    cX2: -0.9537444000000002,
    cY2: -1.1221006,
    lineType: 'CubicBezier',
  },
  {
    x1: -0.4002843999999999,
    y1: -1.2902018000000002,
    x2: -0.4002843999999999,
    y2: -2.5645426000000002,
    lineType: 'StraightLine',
  },
  {
    x1: -0.4002843999999999,
    y1: -2.5645426000000002,
    x2: -2.5996344,
    y2: 0.000675499999999829,
    cX1: -1.6403544,
    cY1: -2.3697421000000003,
    cX2: -2.5996344,
    cY2: -1.2914175,
    lineType: 'CubicBezier',
  },
  {
    x1: -2.5996344,
    y1: 0.000675499999999829,
    x2: 0.00020760000000041856,
    y2: 2.5999999999999996,
    cX1: -2.5996344,
    cY1: 1.4292129799999997,
    cX2: -1.4283303999999997,
    cY2: 2.5999999999999996,
    lineType: 'CubicBezier',
  },
  {
    x1: 0.00020760000000041856,
    y1: 2.5999999999999996,
    x2: 0.00020759999999997447,
    y2: 2.5999999999999996,
    lineType: 'StraightLine',
  },
];

shapeData.forEach(item => {
  console.log('item', item);

  if (item.lineType === 'CubicBezier') {
    let start = new THREE.Vector3(item.x1, item.y1, 0); // Starting point
    let midA = new THREE.Vector3(item.cX1, item.cY1, 0); // First control point
    let midB = new THREE.Vector3(item.cX2, item.cY2, 0); /// Optional control point
    let end = new THREE.Vector3(item.x2, item.y2, 0); //
    let curve = new THREE.CubicBezierCurve3(start, midA, midB, end);
    const points = curve.getPoints(50);
    const geometry = new THREE.BufferGeometry().setFromPoints(points);

    const material = new THREE.LineBasicMaterial({ color: 'red' });

    // Create the final object to add to the scene
    const curveObject = new THREE.Line(geometry, material);

    scene.add(curveObject);
  } else {
    const material = new THREE.LineBasicMaterial({
      color: 0x0000ff,
    });

    const points = [];

    points.push(new THREE.Vector3(item.x1, item.y1, 0));
    points.push(new THREE.Vector3(item.x2, item.y2, 0));

    const geometry = new THREE.BufferGeometry().setFromPoints(points);

    const line = new THREE.Line(geometry, material);

    scene.add(line);
  }
});

render();

function resize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;

  if (needResize) {
    renderer.setSize(width, height, false);
  }

  return needResize;
}

function render() {
  if (resize(renderer)) {
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.