JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 15);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var geometry = new THREE.Geometry();
var spherical = new THREE.Spherical();
for(let i = 0; i < 50000; i++){
	spherical.phi = Math.random() * Math.PI;
  spherical.theta = Math.random() * Math.PI * 2;
  spherical.radius = Math.random() * 10; // 10 is the desired radius
  geometry.vertices.push(new THREE.Vector3().setFromSpherical(spherical));
}

var material = new THREE.PointsMaterial({color: 0x00ff00, size: 0.0125});
var points = new THREE.Points(geometry, material);
scene.add(points);

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