JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/mrdoob/three.js/raw/dev/build/Three.js"></script>
<div id="CanvasDiv"
     style="position:absolute; width:100%; height:50%;
            top:0px; background-color:#2f1f1f"></div>
<div style="position:absolute; top:0%">canvas</div>
<div id="WebGLDiv"
     style="position:absolute; width:100%; height:50%;
            bottom:0px; background-color:#1f2f1f"></div>
<div style="position:absolute; top:50%">webgl</div>

CSS

body
{
    font-family: Courier;
    background-color: #000000;
    margin: 0px;
    overflow: hidden;
    text-align: center;
    color: #ffffff;
}

JavaScript

// CanvasRenderer ignores LinePieces flag
// https://github.com/mrdoob/three.js/issues/1668
// by John Shaffstall aka double051

var CanvasDiv = document.getElementById('CanvasDiv');
var WebGLDiv = document.getElementById('WebGLDiv');
// var THREE = THREE || {};

// renderers
var canvasRenderer = new THREE.CanvasRenderer();
CanvasDiv.appendChild(canvasRenderer.domElement);

var webglRenderer = new THREE.WebGLRenderer();
WebGLDiv.appendChild(webglRenderer.domElement);

// camera
var camFoV = 70;
var camAR = CanvasDiv.offsetWidth/CanvasDiv.offsetHeight;
var camera = new THREE.PerspectiveCamera(camFoV, camAR, 1, 50);
camera.position.set(0,0,-10);
var camRadius = 10;
var camTheta = 0;

// scene
var scene = new THREE.Scene();
scene.add(camera);

// line geometry
var vertexCount = 50;
var vertexBound = 8;
var lineGeometry = new THREE.Geometry();
for(var i = 0; i < vertexCount; i++)
{
    var vertexX = vertexBound * (Math.random()-0.5);
    var vertexY = vertexBound * (Math.random()-0.5);
    var vertexZ = vertexBound * (Math.random()-0.5);
    console.log('vertex at ('+vertexX+', '+vertexY+', '+vertexZ+')');
    var vertexPos = new THREE.Vector3(vertexX, vertexY, vertexZ);
    var vertex = new THREE.Vertex(vertexPos);
    lineGeometry.vertices.push(vertex);
}

// line object
var lineMaterial = new THREE.LineBasicMaterial({color:0xffff00});

// This is the broken part
// WebGL renderer respects THREE.LinePieces, Canvas does not
var lineObject = new THREE.Line(lineGeometry, lineMaterial, THREE.LinePieces);
lineObject.position.set
scene.add(lineObject);

function resize()
{
    var width = CanvasDiv.offsetWidth;
    var height = CanvasDiv.offsetHeight;
    console.log('width = ' + width + ', height = ' + height);
    canvasRenderer.setSize(width, height);
    webglRenderer.setSize(width, height);
    
    camera.aspect = width/height;
    camera.updateProjectionMatrix();
}

function animate()
{
    requestAnimationFrame(animate);
    camTheta += 0.01;
    var camX =...