JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/three@0.132.2";
import {
  OrbitControls
} from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 8, 13);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

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

//scene.add(new THREE.GridHelper())

let pts = [];
let POINT_COUNT = 10000;
let mainR = 5;
let outerLimit = 1;
let innerLimit = 5;
for(let i = 0; i < POINT_COUNT; i++){

	let inout = (Math.random() - 0.5) * 2;
  let lim = (inout >= 0 ? outerLimit : innerLimit);
  let rand = mainR + Math.pow(Math.random(), 3) * lim * inout;

	pts.push(
  	new THREE.Vector3().setFromCylindricalCoords(
    	rand,
      Math.PI * 2 * Math.random(),
      0
    )
  )
}
let g = new THREE.BufferGeometry().setFromPoints(pts);
let m = new THREE.PointsMaterial({size: 0.05, color: "aqua"});
let p = new THREE.Points(g, m);
scene.add(p);


window.addEventListener("resize", onResize);

renderer.setAnimationLoop(_ => {
  renderer.render(scene, camera);
})

function onResize(event) {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
}