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 RANDOM_MIN = 20;
const RANDOM_MAX = 50;
const POINTS = 50;

let spheres = [];

const initPoints = function() {
    for (let x = 0; x < POINTS; x++) {
        var circleGeometry = new THREE.SphereGeometry(20, 5, 5);
        var circle = new THREE.Mesh(circleGeometry, new THREE.MeshBasicMaterial({
            color: 0x000000
        }));
		circle.position.copy(getVelocity());
		spheres.push(circle);
    }
};

const getVelocity = function() {
    return new THREE.Vector3(
        getRandom(),
        getRandom(),
        getRandom()
    );
};

const getRandom = function() {
    let velocity = Math.random() * 0.5 * (RANDOM_MAX - RANDOM_MIN) + RANDOM_MIN;
    if (Math.random() < 0.5) {
        velocity = -velocity;
    }
    return velocity;
};

const 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 animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene, camera);
}

initThree();
initPoints();
animate();