JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

JavaScript

const MIN_SPHERE_RADIUS = 20;
const MAX_SPHERE_RADIUS = 50;
const LOCATION_FROM_CENTER = 100;
const SPHERES = 1;

let spheres = [];

let updateSpheres = function() {
	for (let x = 0; x < spheres.length; x++) {
  	let sphere = spheres[x];
    
    let direction = sphere.position.sub(new THREE.Vector3(0,0,0));
   	direction.normalize();
    
   	direction.multiplyScalar(1);
    
    sphere.position.add(direction);
  }
};

let setupObjects = function() {
  for (let x = 0; x < SPHERES; x++) {
    let sphereRadius = Math.floor(Math.random() * (MAX_SPHERE_RADIUS - MIN_SPHERE_RADIUS)) + MIN_SPHERE_RADIUS;

    let geometry = new THREE.SphereGeometry(sphereRadius, 50, 50);
	
	for (let y = 0; y < geometry.fac)
	
    let sphere = new THREE.Mesh(geometry);

    if (x == 0) {
      sphere.position.x += LOCATION_FROM_CENTER;
    } else {
      sphere.position.x -= LOCATION_FROM_CENTER;
    }

    spheres.push(sphere);

    scene.add(sphere);
  }
};

let initThree = function() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xeeeeee);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10000);

  camera.position.z = 500;
  camera.updateProjectionMatrix();

  scene.add(camera);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

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

function animate() {
  requestAnimationFrame(animate);
  render();
}

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

initThree();
setupObjects();

animate();