D3 Examples - ThreeJS Test

xxxxxxxxxx
 
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Three.js 101</title>
  <!--  Simple reset to delete the margins  -->
  <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>
  <!--  Three.js CDN  -->
  <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]
    }
​
    
    function updateElectrons(){
      
      var obj = null;
      
      for(var i = 0; i < numElectrons; ++i){
            //grab the electron from the electron array
          obj = electrons[i]
          obj.position.sub(nucleus.position);
            obj.position.applyAxisAngle(obj.angle, obj.orbitSpeed);
            obj.position.add(nucleus.position);
      }
      
      var obj = null;
      
      for(var i = 0; i < numReports; ++i){
            //grab the electron from the electron array
          obj = reports[i]
          obj.position.sub(nucleus.position);
            obj.position.applyAxisAngle(obj.angle, obj.orbitSpeed);
            obj.position.add(nucleus.position);
      }
      
      
    }
    
    // Render Loop
    var render = function () {
      requestAnimationFrame( render );
            updateElectrons()
      renderer.render(scene, camera);
    };
​
    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>
    