Javascript 在Three.js中渲染彼此顶部的几何体

我正在用Three.js做一些实验，并且正在创建粗线条，这些线条应该在屏幕上的任意位置上相互重叠。我主要有三个问题：

在我运行应用程序一段时间后，我以一堆矩形而不是直线结束upp。我怎样才能在看到整条线的情况下，使线相互重叠？使看到在顶部绘制的最新线条

我想在屏幕的顶部和底部以及左侧和右侧之间的随机位置上画线。但是，当我使用下面的代码时，它会在屏幕外绘制。我怎样才能做到这一点

plane.position.set（（Math.random（）*2-1）（window.innerWidth/2），（Math.random（）*2-1）（window.innerHeight/2），0）

我最终使用PlaneBufferGeometry绘制这条线，因为我在解决线条材质的厚度时遇到了问题。这是一个好方法还是有其他建议

以下是代码笔的链接：

代码：

var scene, camera, renderer, material, plane, currentPos;
let speed = 30;

init();

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 100;
    renderer = new THREE.WebGLRenderer({ alpha: true, preserveDrawingBuffer: true, antialias: true });
    renderer.autoClearColor = false;
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    scene = new THREE.Scene();
    drawLines();
    update();
}

function drawLines() {
    var col = new THREE.Color(Math.random(), Math.random(), Math.random());
    material = new THREE.LineBasicMaterial({ color: col })
    var geometry = new THREE.PlaneBufferGeometry(20, 20, 32);
    plane = new THREE.Mesh(geometry, material);
    plane.rotation.z = Math.random() * 360;
    let x = (Math.random() * 2 - 1) *window.innerWidth;
    plane.position.set((Math.random() * 2 - 1)*200,(Math.random() * 2 - 1)*70,0);

    currentPos = new THREE.Vector3(plane.position.x, plane.position.y, plane.position.z);
    let rand = Math.random();
    console.log((Math.random() * 2 - 1),
    (Math.random() * 2 - 1) * 500,x, window.innerWidth)
    scene.add(plane);
}

function update() {
    setTimeout(function () {
        requestAnimationFrame(update);
    }, 1000 / 60);

    let dist = currentPos.distanceTo(plane.position);

    plane.translateX(speed*0.5)
    if (dist > speed) drawLines()
    renderer.render(scene, camera);
}