three.js - 未以3D渲染的线条

Question

我正在尝试在Threejs（Plexus样式）上制作连接点的三维图形，但由于某种原因，这些线条是“平坦的”（渲染在平面上而不是在3d空间中）。

以下是代码：

    // 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();

结果如下：

result of this code

线条在3d世界中的2d表面上渲染，但它们不是3d（所有点应该相互连接）。

Here is the codepen for the code

谢谢！

编辑： 最终结果应该与此类似，如果它们在草图开始时处于某个距离时相互连接（不关心形状但是关于如何渲染，而我的草图仅在2d渲染线平面）。

image 1

image 2