JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
	position: absolute;
	font-size: 16px;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: transparent;
		border: 0;
		border: 1px solid rgb(255, 255, 255);
		border-radius: 4px;
		color: #ffffff;
		padding: 12px 18px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

    © 2021 GitHub, Inc.
    Terms
    Privacy
    Security
    Status
    Docs

    Contact GitHub
    Pricing
    API
    Training
    Blog
    About

Loading complete

JavaScript

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

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0.375, 1).setLength(30);
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);

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0.25, 0.5, 1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

// torus
let ptsT = getRandomPointsOnTorus(9, 3, 100000);
let gt = new THREE.BufferGeometry().setFromPoints(ptsT);
gt.rotateX(Math.PI * -0.5);
let mt = new THREE.PointsMaterial({size: 0.01, color: "yellow"});
let pt = new THREE.Points(gt, mt);
scene.add(pt);

// sphere
let ptsS = new Array(100000).fill(0).map(p => {return new THREE.Vector3().randomDirection().setLength(6)});
let gs = new THREE.BufferGeometry().setFromPoints(ptsS);
let ms = new THREE.PointsMaterial({size: 0.01, color: "magenta"});
let ps = new THREE.Points(gs, ms);
scene.add(ps);

// ring
let ptsR = getRandomPointsOnRing(18, 12, 100000);
let gr = new THREE.BufferGeometry().setFromPoints(ptsR);
let mr = new THREE.PointsMaterial({size: 0.01, color: "aqua"});
let pr = new THREE.Points(gr, mr);
scene.add(pr);

window.addEventListener("resize", onWindowResize);

animate();

function animate() {

  requestAnimationFrame(animate);
  pt.rotation.y += 0.001;
  pr.rotation.y -= 0.001;
  renderer.render(scene, camera);

}

function onWindowResize() {

  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(innerWidth, innerHeight);

}

function getRandomPointsOnRing(R, r, count = 1000){
	return new Array(count).fill(0).map(p => {
  	let rand =...