JSFiddle - React, Tailwind, and code Playground

HTML

<div id="info">Point Cloud</div>
<div id="container"></div>

<script src="http://threejs.org/build/three.min.js"></script>

CSS

body {
        color: #ffffff;
        font-family:Monospace;
        font-size:13px;
        text-align:center;
        font-weight: bold;

        background-color: #000000;
        margin: 0px;
        overflow: hidden;
    }

JavaScript

var renderer, scene, camera, pointCloud;

init();
animate();

function init() {

    // dom
    var container = document.getElementById( 'container' );

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
    
    // scene
    scene = new THREE.Scene();

    //camera
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    // point cloud geometry
    var geometry = new THREE.SphereGeometry( 100, 32, 16 );
    
    // vertex colors
    var colors = [];
    for( var i = 0; i < geometry.vertices.length; i++ ) {
    
        // random color
        colors[i] = new THREE.Color();
        colors[i].setHSL( Math.random(), 1.0, 0.5 );

    }
    geometry.colors = colors;

    // material
    material = new THREE.PointsMaterial( {
        size: 10,
        transparent: true,
        opacity: 0.7,
        vertexColors: THREE.VertexColors
    } );

    // point cloud
    pointCloud = new THREE.Points( geometry, material );

    scene.add( pointCloud );

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {

    // rotate
    pointCloud.rotation.x += 0.005;
    pointCloud.rotation.y += 0.005;

    // render
    renderer.render( scene, camera );

}