JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<!DOCTYPE html>
<html>

    <head>
        <title>Space</title>
        <meta charset="utf-8">
        <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>
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    </head>

    <body>
        <canvas id="viewer"></canvas>
    </body>

</html>

CSS

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

JavaScript

const MAX_DISTANCE = 8000;
const MAX_DOTS = 10000;

let camera, scene, controls, renderer;

let dots = new THREE.Object3D();

function createSpace() {
    for (var i = 0; i < MAX_DOTS; i++) {
        var circleGeometry = new THREE.SphereGeometry(50, Math.random() * 5, Math.random() * 5);
        var color;
        if (Math.round(Math.random()) === 0)
            color = new THREE.Color('#003d5d');
        else
            color = new THREE.Color('#f23d5d');
        var material = new THREE.MeshBasicMaterial({
            color: color,
            side: THREE.DoubleSide,
            transparent: true
        });
        material.flatShading = true;

        material.opacity = Math.random() * 1;

        var circle = new THREE.Mesh(circleGeometry, material);

        circle.fadeIn = Math.floor(Math.random() * 2) == 1 ? true : false;
        circle.fadeSpeed = Math.random() * .015;

        let direction = getRandomVector().normalize();
        let minDistance = MAX_DISTANCE * 5;
        let maxDistance = minDistance + 0.5;
        direction.multiplyScalar(Math.random() * (maxDistance - minDistance) + minDistance);

        circle.position.add(direction);

        dots.add(circle);
    }
    scene.add(dots);
}

function getRandomVector(max_distance) {
    if (max_distance === undefined)
        max_distance = 1;
    return new THREE.Vector3(getRandom(max_distance), getRandom(max_distance), getRandom(max_distance));
}

function getRandom(max_distance) {
    let random = Math.random() * max_distance;
    random *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
    return random;
}

function setupModel() {
    let xcor = 0,
        ycor = 0,
        flag = 0,
        i = 1;
    while (i != 42) {
        switch (flag) {
            case 0
            ycor = i;
            flag = 1;
            break;
            case 1:
                xcor = -1 * i;
                flag = 2;
                break;
            case 2:
                ycor = -1 * (i + 1);
               ...