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({
  antialias: true
});
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++) {
  geometry.vertices.push(setRandomPointInSphere(10)); // 10 is the desired radius
}
console.log(geometry.vertices.length);


function setRandomPointInSphere(radius) {
  var v = new THREE.Vector3(
    THREE.Math.randFloatSpread(radius * 2),
    THREE.Math.randFloatSpread(radius * 2),
    THREE.Math.randFloatSpread(radius * 2)
  );
  if (v.length() > radius) {
    return setRandomPointInSphere(radius);
  }
  return v;
}

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);
}