JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

JavaScript

const LENGTH = 50;
const MIN_Y = 0;
const MAX_Y = 3;

let setupObjects = function() {
    let geometry = new THREE.BufferGeometry();

    // attributes
    let positions = new Float32Array(LENGTH * 3);
    geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));

    let line = new THREE.Line(geometry);

    let xPos = 0;

    let positionArray = line.geometry.attributes.position.array;
    for (let x = 0; x < positionArray.length; x += 3) {
        positions[x] = xPos;
        positions[x + 1] = (Math.random() * (MAX_Y + MIN_Y) - MIN_Y);
        positions[x + 2] = 0;

        xPos += 2;
    }

    let geom = new THREE.Geometry();

    var array = line.geometry.getAttribute('position').array;
    for (let x = 0; x < array.length; x += 3) {
        geom.vertices.push(new THREE.Vector3(array[x], array[x + 1], array[x + 2]));
    }

    for (let i = 0; i < geom.vertices.length; i += 2) {
        geom.colors[i] = new THREE.Color(Math.random(), Math.random(), Math.random());
        geom.colors[i + 1] = geom.colors[i];
    }

    let material = new THREE.LineBasicMaterial({
        color: 0xff00ff,
        vertexColors: THREE.VertexColors
    });

    let test = new THREE.Line(geom, material);
    test.position.y += MAX_Y * 2;

    scene.add(test);

    scene.add(line);
};

let initThree = function() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xeeeeee);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10000);

    camera.position.z = 500;
    camera.updateProjectionMatrix();

    scene.add(camera);

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
}

function getRandomVector(max_distance) {
    if (max_distance ===...