three.js - Lines not rendered in 3D

Question

I am trying to make a 3d figure of connected dots on Threejs (Plexus style), but for some reason the lines are "flat" (rendered on a flat surface rather than in a 3d space).

Here is the code:

    // Variables
    var showred = false;
    var nx = 0;
    var ny = 0;
    var radius = 20;
    var randomcounter = 0;
    var rotSpeed = 2.0;

    // set up the scene
    var scene = new THREE.Scene();

    // set up the threejscamera to see the actual scene
    var threejscamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000);
    scene.add(threejscamera);
    threejscamera.position.x = -4000 + Math.random() * 2000;
    threejscamera.position.y = 1000;

    var cameracontrols = new THREE.OrbitControls(threejscamera);
    cameracontrols.autoRotate = true;
    cameracontrols.update();

    // set up the renderer
    var renderer = new THREE.WebGLRenderer();
    window.onload = function() {
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0x000000, 0);
      document.body.appendChild(renderer.domElement);
    }

    // make the canvas adaptable to the window screen
    window.addEventListener('resize', function() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      renderer.setSize(width, height);
      threejscamera.aspect = width / height;
      threejscamera.updateProjectionMatrix();
    });

    // create the particle variable
    var particlesCount = 150;
    var particles = new THREE.Geometry();
    var particlesMaterial = new THREE.PointsMaterial({
      color: 0xffffff,
      transparent: true,
      opacity: 1.0,
      sizeAttenuation: false,
      size: 2
    });

    for (var i = 0; i < particlesCount; i++) {

      var px, py, pz;

      var lat = (i / particlesCount) * Math.PI;

      for (var j = 0; j < particlesCount; j++) {
        var lon = (j / particlesCount) * (Math.PI * 2);

        var index = i * j + i;

        var particle = particles.vertices[index];

        var v = radius;

        px = v * Math.sin(lat) * Math.cos(lon);
        py = v * Math.sin(lat) * Math.sin(lon);
        pz = v * Math.cos(lat);

        // add the particle to the array
        var particle = new THREE.Vector3(px, py, pz);
        particles.vertices.push(particle);
      }
    }

// Add the line geometry to the code, connected to the particle system
    var lines = new THREE.Geometry();
    var lol = 0;
    for (var i = 0; i < particlesCount; i++) {
      var a = particles.vertices[i];
      for (var j = 0; j < particlesCount; j++) {
        var b = particles.vertices[j];
          lines.vertices.push(a);
          lines.vertices.push(b);
      }
    }
    var line = new THREE.Line(lines, new THREE.LineBasicMaterial({
      color: 0x00FFFF,
      opacity: 0.1,
      transparent: true
    }));
    scene.add(line);

    // Create a new particle system with the particles and the material
    var ParticleSystem = new THREE.Points(particles, particlesMaterial);

    // Add the particle system to the scene
    scene.add(ParticleSystem);

    // Lights
    var light = new THREE.PointLight(0x555555, 1, 10000, 2);
    scene.add(light);
    light.position.set(0, 1000, 0);

    // red light, connected to the red particle system
    var redlight = new THREE.PointLight(0xDE0000, .5, 20000, 2);
    scene.add(redlight);
    redlight.position.set(0, 1300, 0);

    // update function
    const updateThreejs = function() {

      for (var i = 0; i < particlesCount; i++) {
        // latitude for the spherical coordinate system
        var lat = i / particlesCount * Math.PI;

        for (var j = 0; j < particlesCount; j++) {
          // longitude for the spherical coordinate system
          var lon = j / particlesCount * Math.PI;

          // Get the index of this particle
          var index = i + j * particlesCount;

          // get a copy of the particles
          var particle = particles.vertices[index];

          // get the new values
          var v = radius;

          // Spherical coordinates
          var sinlat = Math.sin(lat);
          var coslat = Math.cos(lat);
          var coslon = Math.cos(lon);
          var sinlon = Math.sin(lon);

          particle.x = v * sinlat * coslon;
          particle.y = v * sinlat * sinlon;
          particle.z = v * coslat;
        }
      }

      // flag to the particle system and the lines geometry
      // that we've changed its vertices.
      particles.verticesNeedUpdate = true;
      lines.verticesNeedUpdate = true;
      lines.__dirtyvertices = true;

      cameracontrols.update();
    };

    // render function
    var render = function() {
      // let's render the actual scene, first parameter is the scene, second the threejscamera
      renderer.render(scene, threejscamera);
    };

    // Game Loop function (update, render, repeat)
    var drawThreejs = function() {

      requestAnimationFrame(drawThreejs);

      // update and render
      updateThreejs();
      render();
    };

    drawThreejs();

And here is the result:

result of this code

The lines are rendered on a 2d surface in a 3d world, but they are not 3d (all the dots should be connected each other).

Here is the codepen for the code

Thanks!

EDIT: The end result should be something similar to this, with points connected each other if they are at a certain distance when the sketch starts (don't care about the shape but about how it is rendered, while my sketch renders line only on a 2d flat surface).

image 1

image 2