ThreeJS Test

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Three.js 101</title>
  
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
    #layover{
      position:fixed;
      margin:15px;
    }
  </style>
  <div id="layover">
    For the most common hospital report cards, <span style="padding:2px;color:white;background:red">shown in red</span>, there are over 300 distinct measures that hospitals must track to understand and improve their perfrmance across report cards. 
  </div>
  
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="three.min.js"></script>
</head>
<body>
  <script>
 
    // Create an empty scene
    var scene = new THREE.Scene();

// Create a basic perspective camera
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.z = 20;
 
    // Create a renderer with Antialiasing
    var renderer = new THREE.WebGLRenderer({
        	antialias: true,
        	alpha: true
      });
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap

// Configure renderer clear color
    renderer.setClearColor(0xF0F0F0);

// Configure renderer size
    renderer.setSize( window.innerWidth, window.innerHeight );

// Append Renderer to DOM
    document.body.appendChild( renderer.domElement );

//https://stackoverflow.com/questions/45062506/three-js-random-multidirectional-orbits-around-point-using-trig
    
    
    const spotlight = new THREE.SpotLight();
    spotlight.position.set(-50, 100, 150);
    spotlight.castShadow = true;
    spotlight.intensity = 1;
    scene.add(spotlight);
     
    /*
    const geoPlane = new THREE.PlaneBufferGeometry(105, 105);
    const matPlane = new THREE.MeshLambertMaterial({color: 0xF0F0F0});
    
    const planeMat = new THREE.Mesh(geoPlane, matPlane);
    planeMat.rotation.x = -1;
    planeMat.position.y = -12;
    planeMat.receiveShadow = true;
    scene.add(planeMat);
    */
    
    
    var electron = null,
    		plane = new THREE.Plane(),
    		point = new THREE.Vector3();
  			geo = new THREE.SphereBufferGeometry(.1, 6, 6);
  			mat = new THREE.MeshBasicMaterial({color:"black"});
	
    
    var electrons = [];
    var numElectrons = 300;
    
    var nucleus = new THREE.Mesh(geo, mat);
  	nucleus.position.set(0, 0, 0);
     
    d3.range(numElectrons).forEach(function(d,i){
    
        var coords = PointOnSphere({"x":0,"y":0,"z":0},{"x":Math.random()*Math.PI*2,"y":Math.random()*Math.PI*2},12);
      		
      
      	//create a point at the random location. 
					var vertex = new THREE.Vector3();
					vertex.x = coords[0];
					vertex.y = coords[1];
					vertex.z = coords[2];
      
          electron = new THREE.Mesh(geo, mat);
          electrons.push(electron);
      
          electron.angle = new THREE.Vector3(
            	Math.random(),
             	Math.random(),
            	Math.random()
          )
      
          electron.orbitSpeed = (Math.random() * 0.005) + .01;
          if(Math.random() > 0.5){
            	electron.orbitSpeed *= -1;
          }
      
          plane.normal.copy(electron.angle);
      
          point.set(coords[0], coords[1], coords[2]);
      
          plane.projectPoint(point, electron.position);
          electron.castShadow = false;
          electron.position.setLength(Math.floor(Math.random() * 1) + 8);
        //  electron.position.applyAxisAngle(electron.angle, 1 / 1);
//          electron.position.add(nucleus.position);
          scene.add(electron);
 
    })
    
    
    var geometry = new THREE.SphereBufferGeometry( 6, 50, 50 );
    var material = new THREE.MeshLambertMaterial ( {color: 0x48C9B0} );
    var sphere = new THREE.Mesh( geometry, material );
    sphere.receiveShadow = true;
    scene.add( sphere );
  
    function PointOnSphere(origin,rotation,radius){
      var x=origin.x+radius*Math.cos((rotation.y))*Math.cos((rotation.x));
      var y=origin.y+radius*Math.sin((rotation.x));
      var z=origin.z+radius*Math.sin((rotation.y))*Math.cos((rotation.x));
			return [x,y,z]
    }

render();
    
    
    
    var report = null
  			geoReport = new THREE.SphereBufferGeometry(.5, 6, 6),
        matReport = new THREE.MeshBasicMaterial( {color: "red"} );
	
    var reports = [];
    var numReports = 8;
    
     
    d3.range(numReports).forEach(function(d,i){
    
        var coords = PointOnSphere({"x":0,"y":0,"z":0},{"x":Math.random()*Math.PI*2,"y":Math.random()*Math.PI*2},12);
      		 
      	//create a point at the random location. 
					var vertex = new THREE.Vector3();
					vertex.x = coords[0];
					vertex.y = coords[1];
					vertex.z = coords[2];
       
          report = new THREE.Mesh(geoReport, matReport);
          reports.push(report);
      
          report.angle = new THREE.Vector3(
            	Math.random(),
             	Math.random(),
            	Math.random()
          )
      
          report.orbitSpeed = (Math.random() * 0.005) + .01;
          if(Math.random() > 0.5){
            	report.orbitSpeed *= -1;
          }
      
          plane.normal.copy(report.angle);
      
          point.set(coords[0], coords[1], coords[2]);
      
          plane.projectPoint(point, report.position);
      
    			report.receiveShadow = true;
          report.position.setLength(Math.floor(Math.random() * 1.1) + 9);
        //  electron.position.applyAxisAngle(electron.angle, 1 / 1);
//          report.position.add(nucleus.position);
      
          scene.add(report);
          
 
    })
    
    
    
  </script>
</body>
</html>

https://d3js.org/d3.v4.min.js