Render geometry on top of eachother in Three.js

Questions
, ,
1

Im experimenting a bit with Three.js and are creating thick lines that is supposed to be drawn on top of eachother on random positions on the screen. I mainly got three problems:

  1. After I have been running the application for a while I end upp with a bunch of rectangles instead of lines. How can I render the lines on top of eachother resulting seeing the full line? Causing to see the newest line that is drawn on top.

  2. I want to draw the lines on random position between the top and bottom and left and right of the screen. However when I am using code as below it gets drawn outside of the screen. How can I achieve this?

    plane.position.set((Math.random() * 2 - 1)(window.innerWidth/2),(Math.random() * 2 -1)(window.innerHeight/2),0);

  3. I ended up using PlaneBufferGeometry for drawing this lines since I had problems solving the thickness with the linematerial. Is this a good approach or are there some other recommendation?

Here is a link to codepen:

Code:

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);
}
2

/cc