JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

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

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

var canvas, scene, renderer, camera; // Standard basic objects for three.js

var pointCloud; // The object that represents the visible cloud of points.

var MAX_POINTS = 10000; // Number of points available
var points; // An array of Vector3, containing all possible points
var spinSpeeds; // An array of Quarterians, containing point rotations for "spin" animation
var driftSpeeds; // An array of Vector3, contianing point velocities for "drift" animation

var geometry; // Object of type THREE.Geometry containing the visible points.
var material; // Object of type THREE.Shadow.camera.Material for point color and size.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10); // there was canvas instead of window


var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x333333); // moved here as it was called before instatiating the renderer
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


camera.position.z = 5;
points = new Array(MAX_POINTS);

var i = 0;
var yaxis = new THREE.Vector3(0, 1, 0);
while (i < MAX_POINTS) {
  var x = 2 * Math.random() - 1;
  var y = 2 * Math.random() - 1;
  var z = 2 * Math.random() - 1;
  if (x * x + y * y + z * z < 1) { // only use points inside the unit sphere

    points[i] = new THREE.Vector3(x, y, z);
    i++;
  }
}

var geometry = new THREE.Geometry();
for (i = 0; i < 1000; i++) {
  geometry.vertices.push(points[i]);
}
material = new THREE.PointsMaterial({
  color: "yellow",
  size: 2,
  sizeAttenuation: false
});
pointCloud = new THREE.Points(geometry, material);
scene.add(pointCloud);

renderer.setAnimationLoop(()=>{renderer.render(scene, camera)}); // added render loop